How to use light mode and dark mode colors web development

#css #web #design #colors

offering light and dark mode options in web design and app development can help to improve the accessibility, user preference, and energy efficiency of a website or app, which can enhance the user experience.

So When creating a light and dark mode for a website or application, it is common to use different colors for each mode to provide a visually distinct experience for the user. Here are some examples of colors that you might use for light and dark modes:

Light mode:

White
Light grey
Pale blue
Light yellow
Pale green
Dark mode:

Dark mode:

Black
Dark grey
Dark blue
Dark purple
Dark green

Of course, these are just a few examples, and you can use any colors that you like for your light and dark modes. It is also a good idea to consider the color contrast between different elements in your design to ensure that they are easily readable for users.

To switch between light and dark modes in CSS, you can use the prefers-color-scheme media query. This media query allows you to apply different styles based on the user's preferred color scheme, as set in their operating system or browser settings.

Here is an example of how you might use the prefers-color-scheme media query to apply different colors for light and dark modes:

/* Light mode colors */
body {
  color: black;
  background-color: white;
}

/* Dark mode colors */
@media (prefers-color-scheme: dark) {
  body {
    color: white;
    background-color: black;
  }
}

In this example, the light mode colors are applied by default, and the dark mode colors are applied when the user's preferred color scheme is set to "dark".

How to manually implement it in your html document

To apply light and dark mode options to your HTML document, you can follow these steps:

Create two CSS stylesheets, one for light mode and one for dark mode. In each stylesheet, define the styles for the various elements in your HTML document, such as the background color, text color, and other styles as needed.
In your HTML document, link to the two stylesheets using the link element. You can set the rel attribute to "stylesheet" and the href attribute to the URL of the stylesheet.
Create a toggle button or other element in your HTML document that will be used to switch between light and dark mode. You can use the button element or any other element that is suitable for your needs.
Add an onclick event handler to the toggle button or element, which will be called when the user clicks the button. In the event handler, you can use JavaScript to switch between the two stylesheets by adding or removing the link elements from the DOM.

<!-- Link to the light mode stylesheet -->
<link rel="stylesheet" href="/css/light-mode.css" id="light-mode">

<!-- Link to the dark mode stylesheet -->
<link rel="stylesheet" href="/css/dark-mode.css" id="dark-mode" disabled>

<!-- Toggle button to switch between light and dark mode -->
<button onclick="toggleMode()">Toggle Mode</button>

<script>
  function toggleMode() {
    // Get the light and dark mode stylesheets
    const lightMode = document.getElementById("light-mode");
    const darkMode = document.getElementById("dark-mode");

    // Toggle the disabled attribute of the stylesheets
    lightMode.disabled = !lightMode.disabled;
    darkMode.disabled = !darkMode.disabled;
  }
</script>

the link elements for the light and dark mode stylesheets are added to the HTML document, and the toggle button has an onclick event handler that switches between the two stylesheets by toggling the disabled attribute of the link elements.