Dark Mode

How do we detect and set the color scheme?

JavaScript detects the user’s preferred color scheme by checking the prefers-color-scheme media query (either light or dark). Once detected, we store the user’s preference in a cookie so the site can remember it across sessions.

At the CSS level, the script applies two key changes:

1. It sets the color-scheme property on the :root element:

   :root {
     color-scheme: dark; /* or light, based on user preference */
   }

   
   

2. It adds a corresponding class to the <body> element:

   <body class="theme-dark"> <!-- or "theme-light" -->

   
   

   This class allows for theme-specific styling through CSS. Wherever possible, we use the light-dark() function to define color values that adapt automatically based on the theme. For example:

   body {
     background-color: light-dark(#ffffff, #151515); /* white for light mode, dark gray for dark mode */
     color: light-dark(#000000, #f0f0f0); /* black for light mode, near-white for dark mode */
   }

   
   

CSS

#cc0000

#e74646

#666666

#777777

#15770E

#10ae11

#ffffff

#151515

#333333

#dddddd

#cc0000

#f22222

#520000

#ab0000

#cc0000

#cc0000

#eeeeee

#000000

#FFFFFF

#333333

#cccccc

#777777

#dddddd

#333333

#990000

#5e0000