Intro:
Required Steps:
Optional Steps (but useful to verify to avoid problems):
How to do this for iOS?
How to do this for Android?
Changelog:
Conclusion:
- After sunrise, 99% of the websites I visit will show a light mode/background.
- After sunset, 99% of the websites I visit will show a dark mode/background.
- Automated Light/Dark mode achieved.
Here's how I setup my operating system to have dynamically changing theme (either Light or Dark) based on the time of day.
At the same time, the websites I visit will dynamically change their wallpaper/background, to be either Light or Dark.
Beyond the initial setup, I don't have to do anything manually since the system will run automatically.
At the same time, the websites I visit will dynamically change their wallpaper/background, to be either Light or Dark.
Beyond the initial setup, I don't have to do anything manually since the system will run automatically.
Required Steps:
1. For Desktop OS's
1A) If you use MacOS, go to settings, appearance, set to 'Auto'.
- after sunrise, MacOS sets the system colors/menus to Light mode.
- after sunset, MacOS sets the system colors/menus to Dark mode.
- i set it to 'Auto', so I don't have to toggle this manually.
1B) If you use Windows, you won't be able to change from Light to Dark mode automatically, since Windows can only set either Light or Dark mode manually (for some reason).
But if you install an open-source program called AutoDarkMode (from github), and enable it to auto-start on Windows startup, it will dynamically change your Window's system mode automatically.
2. Install a browser extension that darkens website background color.
In your browser of choice (Chrome, Firefox, Safari, or Edge), install 'dark reader' (website).
This is an open-source browser extension that protects your privacy by default, hence my recommendation.
Cllck on it's 'icon' in the menu bar, to configure these 2 options:
2A) enable 'detect dark theme' (under 'configure website toggling').
- this will force the extension to detect whether the current website is showing in dark mode.
- if the extension detects that the website shows in dark mode, then the extension won't activate (if your MacOS/Windows is already set to Dark mode).
- if the extension detects that the website shows in light mode, then the extension will activate (if your MacOS/Windows is already set to Dark mode).
- the extension won't activate at all (if your MacOS/Windows is already set to Light mode).
2B) enable 'use system color scheme' (under 'on/off' button).
- this will force the extension to use MacOS/Windows mode we defined earlier.
3. For Desktop Browsers:
These options below effectively ignore the browser's own preference and instead uses Operating System's preference we set earlier.
- If you're using Chrome, go to Settings, Appearance, set the "Mode" to "Device".
- If you're using Brave, go to Settings, Appearance, set "Brave colors" to "Same as OS".
- If you're using Firefox, go to Settings, General, set "Website Appearance" to "Automatic".
- If you're using Edge, go to Settings, Appearance, set "Overall Appearance" to "System Default".
- If you're using Safari (for MacOS), then you don't need to do anything.
- If you're using Opera, go to Settings, Appearance, set "Theme" to "System"
1A) If you use MacOS, go to settings, appearance, set to 'Auto'.
- after sunrise, MacOS sets the system colors/menus to Light mode.
- after sunset, MacOS sets the system colors/menus to Dark mode.
- i set it to 'Auto', so I don't have to toggle this manually.
1B) If you use Windows, you won't be able to change from Light to Dark mode automatically, since Windows can only set either Light or Dark mode manually (for some reason).
But if you install an open-source program called AutoDarkMode (from github), and enable it to auto-start on Windows startup, it will dynamically change your Window's system mode automatically.
2. Install a browser extension that darkens website background color.
In your browser of choice (Chrome, Firefox, Safari, or Edge), install 'dark reader' (website).
This is an open-source browser extension that protects your privacy by default, hence my recommendation.
Cllck on it's 'icon' in the menu bar, to configure these 2 options:
2A) enable 'detect dark theme' (under 'configure website toggling').
- this will force the extension to detect whether the current website is showing in dark mode.
- if the extension detects that the website shows in dark mode, then the extension won't activate (if your MacOS/Windows is already set to Dark mode).
- if the extension detects that the website shows in light mode, then the extension will activate (if your MacOS/Windows is already set to Dark mode).
- the extension won't activate at all (if your MacOS/Windows is already set to Light mode).
2B) enable 'use system color scheme' (under 'on/off' button).
- this will force the extension to use MacOS/Windows mode we defined earlier.
3. For Desktop Browsers:
These options below effectively ignore the browser's own preference and instead uses Operating System's preference we set earlier.
- If you're using Chrome, go to Settings, Appearance, set the "Mode" to "Device".
- If you're using Brave, go to Settings, Appearance, set "Brave colors" to "Same as OS".
- If you're using Firefox, go to Settings, General, set "Website Appearance" to "Automatic".
- If you're using Edge, go to Settings, Appearance, set "Overall Appearance" to "System Default".
- If you're using Safari (for MacOS), then you don't need to do anything.
- If you're using Opera, go to Settings, Appearance, set "Theme" to "System"
Optional Steps (but useful to verify to avoid problems):
1. Homepage.
I set my homepage as google.ca and logged into my google account, then go to 'Settings' on bottom right corner of screen, then 'Search Settings', then Other Settings', under 'dark theme', change to 'device default'.
- which typically sets my homepage's background's color manually.
- I set it to 'device default', in order to use MacOS/Windows mode we defined earlier.
Repeat similar steps, for other homepages, if needed.
2. Youtube.
On Youtube.com, once logged in, click on your name on top-right corner, select 'appearance', change from 'dark/light theme' to 'use device theme'.
- which typically sets the youtube background's color manually.
- i set it to 'use device theme', in order to use MacOS/Windows mode we defined earlier.
I set my homepage as google.ca and logged into my google account, then go to 'Settings' on bottom right corner of screen, then 'Search Settings', then Other Settings', under 'dark theme', change to 'device default'.
- which typically sets my homepage's background's color manually.
- I set it to 'device default', in order to use MacOS/Windows mode we defined earlier.
Repeat similar steps, for other homepages, if needed.
2. Youtube.
On Youtube.com, once logged in, click on your name on top-right corner, select 'appearance', change from 'dark/light theme' to 'use device theme'.
- which typically sets the youtube background's color manually.
- i set it to 'use device theme', in order to use MacOS/Windows mode we defined earlier.
How to do this for iOS?
- Dark Reader is also available for iOS, as a Safari extension, for US$4.99 (iOS Link). It works well with iOS's system Light/Dark mode. It changes websites to dark mode when the iOS mode is dark and doesnt activate for websites when the iOS mode is light. It can also detect if websites have a dark background already. To change the settings, open Safari (browser), hit the aA icon, select the extension, enable it for 'all websites', then select 'Dark Reader', set it to 'Auto', then hit the 'settings' button, and enable 'detect dark theme'.
- If you don't wish to pay US$4.99, then here's free options (that I've tested and worked) and that were recently updated:
1. Nitefall: Browser dark mode (iOS Link)
- Once installed, open Safari, hit the aA icon, select the extension, enable it for 'all websites'.
Other available iOS apps, but I don't recommend due to issues listed:
1. Darker - Dark Mode for Safari (iOS Link) - Last updated Dec 2022.
2. Hyperweb (iOS Link) - Last updated March 2023.
3. Dark Mode + (iOS Link) - Last updated Never.
4. Dark Mode for Safari: NightEye (iOS Link) - Free to install, but activates a free trial for a few months right away, which means it won't be free.
5. Dark Night Browser (iOS Link) - Not a Safari extension, just another browser (questionable source).
6. Dark Mode + For Safari Browser (iOS Link) - Seems to be subscription model.
- If you don't wish to pay US$4.99, then here's free options (that I've tested and worked) and that were recently updated:
1. Nitefall: Browser dark mode (iOS Link)
- Once installed, open Safari, hit the aA icon, select the extension, enable it for 'all websites'.
Other available iOS apps, but I don't recommend due to issues listed:
1. Darker - Dark Mode for Safari (iOS Link) - Last updated Dec 2022.
2. Hyperweb (iOS Link) - Last updated March 2023.
3. Dark Mode + (iOS Link) - Last updated Never.
4. Dark Mode for Safari: NightEye (iOS Link) - Free to install, but activates a free trial for a few months right away, which means it won't be free.
5. Dark Night Browser (iOS Link) - Not a Safari extension, just another browser (questionable source).
6. Dark Mode + For Safari Browser (iOS Link) - Seems to be subscription model.
How to do this for Android?
- Dark Reader is also available for Android. See link for explanation how.
Changelog:
- 2023-11-06: Launched
- 2023-11-08: Re-organized
- 2023-12-01: Added Spoilers
- 2023-12-09: Added free alternative options for iOS, since Dark Reader is paid for iOS (US$4.99).
- 2023-12-13: Added notes for all major desktop browsers (Chrome, Firefox, Brave, Edge, Safari for MacOS)
- 2023-12-15: Added notes for Opera
- 2023-12-17: Added notes about Dark Reader being open-source and doesnt track you, which is why I'm recommending it over others.
- 2023-11-08: Re-organized
- 2023-12-01: Added Spoilers
- 2023-12-09: Added free alternative options for iOS, since Dark Reader is paid for iOS (US$4.99).
- 2023-12-13: Added notes for all major desktop browsers (Chrome, Firefox, Brave, Edge, Safari for MacOS)
- 2023-12-15: Added notes for Opera
- 2023-12-17: Added notes about Dark Reader being open-source and doesnt track you, which is why I'm recommending it over others.
Conclusion:
- After sunrise, 99% of the websites I visit will show a light mode/background.
- After sunset, 99% of the websites I visit will show a dark mode/background.
- Automated Light/Dark mode achieved.
Last edited:
