Changing CSS variable based on the parent class || Sass and Tailwind CSS - css

Question

I'm styling a Next.js website using Tailwind CSS and trying to build a theme switching mechanism using CSS (Sass) variables.
Mainly I have two modes:
Default mode: Includes light and dark themes.
Minimalist mode: also includes light and dark themes but with much fewer colours (black and white mostly).
So generally the user has four options, and the same tailwind colour changes based on the dynamically provided classes.
Based on the main div class bg-primary should be as follows:
no class provided => default light theme, bg-primary = #79A542; // works perfectly
"dark" => default dark theme, bg-primary = #03004C; // works perfectly
"minimalist" => minimalist light theme, bg-primary = #FEFDF8; // works perfectly
"minimalist dark" => minimalist dark theme, bg-primary = #0f0f0f; // doesn't work
All of the theme combinations work except for "minimalist dark", the bg-primary is #03004C not #0f0f0f why is that? Why is the minimalist dark theme overridden by the default one?
This is my globals.scss file configuration:
#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 is 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
And this 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: [],
}
Has the issue something to do with reusing the same dark class? How do I resolve this?

Answer 1

Your current CSS selector will be .minimalist .dark which means the dark class inside the minimalist class. You want to have the minimalist class that's also have a class of dark. In CSS that's .mimimalist.dark, without a space.
In SCSS, you need to remove the space between the parent selector (&) and the class name, like this:
.minimalist {
--third: #98999B;
--inverse: transparent;
--primary: #FEFDF8;
--secondary: #0f0f0f;
&.dark {
--primary: #0f0f0f;
--secondary: #FEFDF8;
}
}
The default .dark class works fine, because it's inside the :root class.