Use color scheme color if dark scheme, otherwise use my color in theme

Alex_P · May 25, 2021, 5:21am

Yay, seems to work

A bit weird that the parameters are not in the same order as the function name.

app/assets/stylesheets/common/foundation/variables.scss

50926f614


      
            $darkness
          ) {
            @if dc-color-brightness($adjusted-color) <
              dc-color-brightness($comparison-color)
            {
              @return scale-color($adjusted-color, $lightness: $lightness);
            } @else {
              @return scale-color($adjusted-color, $lightness: $darkness);
            }
          }
          @function dark-light-choose($light-theme-result, $dark-theme-result) {
            @if is-light-color-scheme() {
              @return $light-theme-result;
            } @else {
              @return $dark-theme-result;
            }
          }
          
          @function is-light-color-scheme() {
            @if dc-color-brightness($primary) < dc-color-brightness($secondary) {
              @return true;

So it needs to be dark-light-choose(#3b5998, $primary)

Topic		Replies	Views
How to change css item based on dark or light mode? Development	11	2600	June 18, 2023
Update themes and plugins to support automatic dark mode Developer Guides how-to , auto-dark , theme-guides	10	4528	November 14, 2025
Color definitions for more than light/dark color schemes Product Support	1	667	January 6, 2024
How to add a specific body class for the dark (or light) mode? Product Support	12	4017	March 7, 2022
Different CSS changes for different color schemes Development css	3	854	October 17, 2023

Use color scheme color if dark scheme, otherwise use my color in theme

Related topics