[noypiscripter]

Let's take this mod to another level!

What if a user had enabled Dark mode preference through the Operating System setting or the browser setting and your forum automatically turned into a Dark mode too? Wouldn't that be super awesome?

How to Enable Dark Mode on Your Computer or Mobile Device

1. Windows
   • Go to Settings > Personalization > Colors and then choose Dark for the default app mode.
2. Mac
   • Go to Apple menu > System Preferences > General > Appearance and then choose Dark or Auto.
3. Chrome for Android
   • Go to Settings > Theme and then choose "System default" or Dark.
   • If System default is chosen, dark mode is enabled when you turn on Battery Saver on the device or enable Dark theme on the device.
4. iPhone
   • Go to Settings > Display & Brightness and then choose Dark or Automatic.

Without the CSS code in this post, setting Dark mode at the OS, device or browser level, only the browser tabs and browser controls will turn dark but not the websites. But with the CSS code below, your forum (or any website for that matter) will automatically turn into Dark mode. If the device has auto dark mode enabled based on certain event (e.g. sunset) or at a specific time, then when user visits your site, it will automatically be in Dark mode too!

Add this CSS in css_additional template of the light theme/style:

/* Auto Detect Dark Mode - START */
@media (prefers-color-scheme: dark) {
    /* Copy and paste all CSS code for Dark Theme you've created based from the steps in the first post */
}
/* Auto Detect Dark Mode - END */

For browser support, please see this compatibility chart.

Watch demo on YouTube below:

https://www.youtube.com/watch?v=Ln4vqs1rWL0

In the demo, I used my Android phone and set "System default" in the Theme settings in Chrome browser app and then enabled Dark mode by turning on Battery Saver on the device.