Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
302 views
in Technique[技术] by (71.8m points)

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

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?

question from:https://stackoverflow.com/questions/65849109/changing-css-variable-based-on-the-parent-class-sass-and-tailwind-css

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

1.4m articles

1.4m replys

5 comments

57.0k users

...