Dark mode custom CSS

Using custom CSS for the Dark mode

Custom CSS

If custom CSS is enabled in the dark mode modules in the first section, you can use the custom CSS to customize the element’s appearance in the frontend when the dark mode is enabled.

Dark mode custom CSS
Dark mode custom CSS

Below are a few pointers to use the custom CSS for dark mode:

  • Add * {isolation: isolate;} to the frontend, and it deactivates all colors in the dark mode frontend.

  • Add new CSS var colors to body.darkmode--activated { --primary-color: red; } like this for all colors in the frontend.

  • The below code helps to revert the colours back to the original. We can use it for images.

    .darkmode--activated .logo { mix-blend-mode: difference; }

  1. We can use the .darkmode-ignore to ignore any change to elements in dark mode.
← Dark mode customization
Overview →