To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more

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

Abdul_Basit_14
Tourist
7 1 1

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/

Abdul_Basit_14_0-1674635335089.png

 

 

 

Best regards,
Abdul Basit
basitrahimjakhura@gmail.com
Reply 1 (1)
Niyeepo
Tourist
201 13 24

 

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.

5diamond