Question 319504 in CSS Question posted in
Some basic documentation can be found here.

Css – How to handle different color schemes in large projects

I’ve been searching all day to find a way to implement different color themes. Most solutions implement this on a small scale (change the body background and text for instance). But what I’ve a large project that has different types of cards, buttons, forms, etc. Something like this won’t be enough of course:

:root {
    --body-text-clr: #232323;
    --body-bg-clr: #fff;
}
:root[data-theme="dark"] {
    --body-text-clr: #fff;
    --body-bg-clr: #232323;
}

Usually, I have a lot of colors like this:

:root {

    // THOSE USUALLY DON'T CHANGE
    --clr-primary-400: somevalue;
    --clr-primary-500: somevalue;
    --clr-primary-600: somevalue;

    // THOSE CHANGE COMPLETELY
    --clr-neutral-100: somevalue;
    --clr-neutral-200: somevalue;
    --clr-neutral-300: somevalue;
    --clr-neutral-400: somevalue;
    --clr-neutral-500: somevalue;
    --clr-neutral-600: somevalue;
}

and every color is used multiple times in different places. I tried to solve this in different ways but none worked. Here’s some of the methods I tried to implement:

Method 1: Leave it as it is

I thought the design was made in a way that every color in the light mode corresponds to another color in the dark mode. But it didn’t take me long until I realized this is not the case. Some elements have a shared background in a particular theme but they don’t share the same background in another theme.

Method 2: Tokens

I tried to do something like this:

// I DO THIS FOR EVERY COMPONENT I HAVE
:root {
    --card-text-clr: somevalue;
    --card-bg-clr: somevalue;
}

:root[data-theme="dark"] {
    --card-text-clr: somevalue;
    --card-bg-clr: somevalue;
}

I don’t have a problem that it’s a lot of work to set that up. But my problem was that I couldn’t use any utility classes to set my colors anymore (I won’t generate a utility class for a single use like this .card-bg or .card-text-clr). If I want to set the background of my card, I’d have to do it in my CSS file.

I’m looking forwards to see how you approach this problem in your projects.
I don’t have a problem if your solution includes using SASS since I use it already.

Tags:

2

Answers


  1. 0

    1st option: assign the relevant theme class or attr to the body. and write CSS for each component according to the relevant theme class.

    2nd option: create the color palette using variables and change the variables. color palette and variable should be designed or planned first on the design side / figma.
    for example: https://github.com/royalfig/dark-mode-demo/blob/master/main.scss

           &[color-mode="light"] {
      --surface1: #e6e6e6;
      --surface2: #f2f2f2;
      --surface3: #ffffff;
      --element1: #111111;
      --element2: #222222;
      --element3: #333333;
      --elementInverse: #eee;
      --primary: #01408e;
      --secondary: #3c5d5c;
      --tertiary: #fff7d6;
      --box-shadow: 20px 20px 60px #cacaca, -20px -20px 60px #ffffff;
    }

    &[color-mode="dark"] {
      --surface1: #262626;
      --surface2: #333333;
      --surface3: #404040;
      --element1: #eeeeee;
      --element2: #dddddd;
      --element3: #cccccc;
      --elementInverse: #111;
      --primary: #8fceff;
      --secondary: #72faca;
      --tertiary: #eee8a9;
      --box-shadow: 20px 20px 60px #1d1d1d, -20px -20px 60px #272727;
    }
    }

    You can use whichever is simpler.

    Login or Signup to reply.
  2. 0

    Looks like your using tailwindcss so you should look at daisyui themes.

    Alternatively, This is what i do which is influenced by materializecss.

    /// Select five colors for the theme. 
/// Two lights
/// Mid
/// Two Darks
$theme-colors: (
    "lightest":  #FFFFFF,
    "light":  #D3D3DD,
    "bright":     #DEC2B5,
    "dark": #32422b,
    "darkest": #000000,    
);

$all-themes: lightest1, lightest2, light1, light2, bright1, bright2, dark1, dark2, darkest1, darkest2;

@function themecolor($color) {
    @if map-has-key($theme-colors, $color) {
        @return map-get($theme-colors, $color);
    }
    @warn "Unknown `#{$color}` in $style-colors.";
    @return null;
}

.lightest1 {
    color: themecolor("darkest");
    background: themecolor("lightest");
}
.lightest2 {
    color: themecolor("dark");
    background: themecolor("lightest");
}

.light1 {
    color: themecolor("darkest");
    background: themecolor("light");
}
.light2 {
    color: themecolor("dark");
    background: themecolor("light");
}

.bright1 {
    color: themecolor("bright");
    background: themecolor("darkest");
}

.bright2 {
    color: themecolor("darkest");
    background: themecolor("bright");
}

.dark1 {
    color: themecolor("light");
    background: themecolor("dark");
}
.dark2 {
    color: themecolor("bright");
    background: themecolor("dark");
}
.darkest1 {
    color: themecolor("lightest");
    background: themecolor("darkest");
}
.darkest2 {
    color: themecolor("light");
    background: themecolor("darkest");
}

    And then for particular widgets such as buttons.

     .lightest1 .btn-themed {
    outline: 2px solid themecolor("darkest");
    color: themecolor("darkest");
    background: themecolor("lightest");
  }
.lightest1 .btn-themed:hover {
    color: themecolor("lightest");
    background: themecolor("darkest");
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search