Enabling Gray Colors for Dark and Light Modes (Theme Electro)

[Abdul_Basit_14]

Hello,

Can someone tell me how to enable dark grey colour on dark mode and light grey colour on light mode?

like...

https://electrox.arenacommerce.com/

[Niyeepo]

There are a few different ways to enable dark grey color on dark mode and light grey color on light mode, depending on the specific framework or technology you are using to build your website. Here are a few examples:

• CSS: You can use the @media (prefers-color-scheme: dark) query to apply a different set of styles for dark mode. For example, you can use the following code to set a background-color of dark grey for dark mode and light grey for light mode:

body {

  background-color: lightgray;

}

@media (prefers-color-scheme: dark) {

  body {

    background-color: darkgray;

  }

}

• Javascript: You can use the matchMedia() method to check the user's preferred color scheme and apply the appropriate styles. For example:

const checkDarkMode = window.matchMedia('(prefers-color-scheme: dark)');

checkDarkMode.addListener((e) => {

  if (e.matches) {

    document.body.style.backgroundColor = "darkgray";

  } else {

    document.body.style.backgroundColor = "lightgray";

  }

});

• SASS: You can use the lightness and darkness functions to set the color based on the current theme. For example:

$light-gray: #f5f5f5;

$dark-gray: #333;

body {

    background-color: lightness($light-gray, 100%);

    @IF(lightness($light-gray) > 50) {

        background-color: darken($light-gray, 5%);

    }

    @else {

        background-color: lighten($light-gray, 5%);

    }

}

Note: These are just examples and you might have to tweak it based on your specific requirements and frameworks you are using.