Currently, I am in the process of customizing a Next.js website with Tailwind CSS and working on implementing a theme switching feature utilizing CSS (Sass) variables.
There are two primary modes I am focusing on:
- Default mode: consisting of light and dark themes.
- Minimalist mode: also offering light and dark themes but with a more limited color palette (mainly black and white).
As a result, users have four options, and the tailwind color changes based on dynamically provided classes.
Depending on the main div class bg-primary, the color scheme should be as follows:
- If no class is provided => default light theme,
bg-primary = #79A542;// this works fine - If "dark" is specified => default dark theme,
bg-primary = #03004C;// this works well - If "minimalist" is specified => minimalist light theme,
bg-primary = #FEFDF8;// this works perfectly - If "minimalist dark" is specified => minimalist dark theme,
bg-primary = #0f0f0f;// facing issues here
All theme variations seem to be functioning except for "minimalist dark," where the background color is #03004C instead of #0f0f0f. Why is the minimalist dark theme being overridden by the default one?
Here is a snippet from my globals.scss file setting:
@tailwind base;
@import url('https://fonts.googleapis.com/css2?family=Amiri&family=Montserrat&family=Rakkas&family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aref+Ruqaa&family=Lateef&display=swap');
:root {
/*default mode*/
--primary: #79A542;
--secondary: #CFF0A5;
--third: #CFF0A5;
--inverse: #0f0f0f;
--font-mono: 'Roboto Mono',monospace;
--font-sans: 'Montserrat', sans-serif;
& .arabic {
--font-mono: 'Amiri', serif;
--font-sans: 'Rakkas', cursive;
}
& .dark {
--primary: #03004C;
--secondary: #6A1497;
--third: #E61D6D;
--inverse: #7C54E1;
}
}
.minimalist {
/*Minimalist mode*/
--third: #98999B;
--inverse: transparent;
--primary: #FEFDF8;
--secondary: #0f0f0f;
& .dark {
--primary: #0f0f0f;
--secondary: #FEFDF8;
}
& .arabic {
--font-mono: 'Aref Ruqaa', serif;
--font-sans: 'Lateef', cursive;
}
}
@tailwind components;
@tailwind utilities;
This section is from my _app.js file:
import '../styles/globals.css'
import Nav from '../components/Nav'
import { useState} from 'react'
function MyApp({ Component, pageProps }) {
const [attributes, setAttributes] = useState("minimalist dark") // Themes are changed here
return (
<div className={attributes}>
<main className="bg-primary">
<Nav/>
</main>
</div>
)
}
export default MyApp
Below is my tailwind.config.js file:
module.exports = {
purge: ['./pages/**/*.js', './components/**/*.js'],
darkMode: 'class', // or 'media' or 'class'
theme: {
extends: {
},
colors: {},
textColor: {
primary: 'var(--primary)',
secondary: 'var(--secondary)',
third: 'var(--third)',
inverse: 'var(--inverse)',
white: 'var(--white)',
black: 'var(--black)',
},
backgroundColor: {
primary: 'var(--primary)',
secondary: 'var(--secondary)',
third: 'var(--third)',
inverse: 'var(--inverse)',
white: 'var(--white)',
black: 'var(--black)',
},
fontFamily: {
'sans': 'var(--font-sans)',
'mono': 'var(--font-mono)',
},
},
variants: {
extend: {},
},
plugins: [],
}
Is the issue related to reusing the same dark class? How can I resolve this?