Integration with the new media query: prefers-color-scheme

[YamiOdymel]

What is it

The incoming media query prefers-color-scheme allows developers to change the styles based on the user preference about the dark theme or light theme.

@media (prefers-color-scheme: dark) {
  div {
     color: white;
     background: black;
  }
}

@media (prefers-color-scheme: light) {
  div {
     color: black;
     background: white;
  }
}

What should we do

Maybe a solution, tutorial about how to adapt two different Fomantic-UI themes with the prefers-color-scheme media query, or a discussion about how to support this feature.

Similar discussion

【twbs/bootstrap】Support for prefers-color-scheme media query

[YamiOdymel]

Since we have the new Central dynamic color map, it's possible to add the color variables for the dark theme.

@pinkiepie: {
    color         : @pinkie;
+   darkColor     : @darkPinkie;
    light         : @lightPinkie;
+   darkLight     : @darkPinkie;
    background    : @lightPinkie;
+   darkBackground: @darkPinkie;
    ...
};

But it's stupid since you will have to render the styles twice now for the different color scheme.

@media (prefers-color-scheme: light) {
  .ui.pinkiepie.button {
     color     : @color;
     background: @background;
  }
}

@media (prefers-color-scheme: dark) {
  .ui.pinkiepie.button {
     color     : @darkColor;
     background: @darkBackground;
  }
}

Solution

The solution will be the CSS Variable. Where we only need to define the style once and change the variable only between the different preferred color scheme.

/** 
  * Variables 
  */

@media (prefers-color-scheme: light) {
  :root {
    --pinkepieColor     : @color;
    --pinkepieBackground: @background;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --pinkepieColor     : @darkColor;
    --pinkepieBackground: @darkBackground;
  }
}

/** 
  * Definition
  */

.ui.pinkiepie.button {
   color     : var(--pinkepieColor);
   background: var(--pinkepieBackground);
}

[lubber-de]

I think, you can achieve this today without any change to the code and keep full IE11 compatibility.

@import url('semantic.css'); /*default for non supporting browsers */
@import url('semantic-my-custom-dark-theme.css') (prefers-color-scheme: dark);
@import url('semantic-my-custom-light-theme.css') (prefers-color-scheme: light);

[lubber-de]

I am closing this, because i think my simple suggested solution is sufficient

[harsh1868-zz]

Hi, can you suggest a way to add this line I mean in which file should I add this things?

[lubber-de]

Two options

• Create a separate CSS File which contain those three lines and include this instead of the semantic.css
• Declare a style html node inside your index.htm instead of including semantic.css and pout the three lines inside this node

I would personally go for option 1 because i always have separate CSS declarations in a separate file anyway in my projects