Light and Dark Mode best practice?

Front End Components
#1

How do you implement a switch for light or dark mode ui?

What are the best practices to keep in mind when designing for light and dark mode via wappler?

#2

You can change the class of the <body> to something like <body class="dark"> when the “dark mode” is switched on. Then based on this you can style your elements in the CSS.

example:

body {
    background: #f1f1f1;
    color: #111;
}
section { 
    background: #fff; 
}
h1 {
    color: #333; 
}

body.dark {
    background: #444;
    color: #eee;
}
body.dark section {
    background: #333; 
}
body.dark h1 { 
    color: #eee; 
}

and so on.

#3

You could use variables as well. Most simple way to detect if a browser/device prefers dark mode is by css media queries:

 @media (prefers-color-scheme: dark) { 
    :root {
        --body-bg: #000000;
      }
  }
  
  @media (prefers-color-scheme: light) {
    :root {
        --body-bg: #ffffff;
      }
  }

  body {
    background-color: var(--body-bg);
  }

You could also use js to to switch the data-color-scheme attribute in which case the css would look like this:

:root {
    --body-bg: #ffffff;
  }
  
:root [data-color-scheme="dark"]{
    --body-bg: #000000;
  }

  body {
    background-color: var(--body-bg);
  }

Using variables for dark themes is recommended since it makes it easier to switch out values and it requires less css.

9 Likes
#4

Hi. Thanks for all the replies. By using variables, meaning, I can just set a variable for specific color then refer to that variable with if/else? Sorry. I’m a non-tech and doesn’t know much of coding.

For bootstrap 5, is there any code that can switch the entire theme to dark/light? I saw that there is a dark/light color in the themes but not sure what that is for.

#5

This may help Light /dark example
This is for bootstrap 5