https://github.com/saeedkohansal/sync-website-theme-with-os-dark-mode-and-light-mode-css-only-trick

Sync A Website Or Webpage Theme With OS's Preferred Color Scheme, Dark Mode, And Light Mode using only CSS. We can call this feature CSS Automatic Night Mode And Day Mode By OS Color Setting. As you can see, without any page refresh, my website automatically switches by my OS setting between Dark Mode And Light Mode. With a CSS Media query...
https://github.com/saeedkohansal/sync-website-theme-with-os-dark-mode-and-light-mode-css-only-trick

autodarkmode automaticdarkmode css css-tricks css3 csstricks darkmode darktheme gilgeekify html night-mode night-theme nightmode programming tutorial web-design web-development webdesign webdesigner webdevelopment

Last synced: about 1 month ago
JSON representation

Sync A Website Or Webpage Theme With OS's Preferred Color Scheme, Dark Mode, And Light Mode using only CSS. We can call this feature CSS Automatic Night Mode And Day Mode By OS Color Setting. As you can see, without any page refresh, my website automatically switches by my OS setting between Dark Mode And Light Mode. With a CSS Media query...

• Host: GitHub
• URL: https://github.com/saeedkohansal/sync-website-theme-with-os-dark-mode-and-light-mode-css-only-trick
• Owner: saeedkohansal
• License: mit
• Created: 2023-01-20T01:40:54.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-07-22T14:05:59.000Z (9 months ago)
• Last Synced: 2025-01-30T09:23:08.082Z (3 months ago)
• Topics: autodarkmode, automaticdarkmode, css, css-tricks, css3, csstricks, darkmode, darktheme, gilgeekify, html, night-mode, night-theme, nightmode, programming, tutorial, web-design, web-development, webdesign, webdesigner, webdevelopment
• Language: HTML
• Homepage: https://saeedkohansal.github.io/Sync-Website-Theme-With-OS-Dark-Mode-And-Light-Mode-CSS-Only-Trick/source-code/
• Size: 219 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# How To Sync Website Theme With OS Dark Mode And Light Mode

_How To Sync Website Theme With OS Dark Mode And Light Mode - CSS Automatic Night Mode And Day Mode_

![YouTube Thumbnail](https://raw.githubusercontent.com/saeedkohansal/Sync-Website-Theme-With-OS-Dark-Mode-And-Light-Mode-CSS-Only-Trick/main/image/Sync-Website-Theme-With-OS-Dark-Mode-And-Light-Mode-CSS-Only-Trick.png "YouTube Thumbnail")

I will show you how to Sync A Website Or Webpage Theme With OS's Preferred Color Scheme, Dark Mode, And Light Mode using only CSS. We can call this feature CSS Automatic Night Mode And Day Mode By OS Color Setting. As you can see, without any page refresh, my website automatically switches by my OS setting between Dark Mode And Light Mode. With a simple CSS Media query, we can detect if the user has set their system to use a light or dark color theme. This CSS trick works on most Desktop and Mobile Devices that support Dark Mode And Light Mode features. Also, I'm gonna show you how you can detect a user's color scheme mode by CSS and display it on a Web page. If you want the theme to change smoothly, just add a CSS transition property for the body selector.

## Video Tutorial [ Sync Website Theme With OS Theme Mode ]

[https://youtu.be/8WdJuPdz4w0](https://youtu.be/8WdJuPdz4w0)

 

## If You Enjoy My Content, Please Support Me 😍🙏

💙 PAYPAL DONATION

https://paypal.me/gilgeekify

❤️ PATREON

https://www.patreon.com/gilgeekify

💛 BUY ME A COFFEE

https://www.buymeacoffee.com/gilgeekify

🪙 My Public Address To Receive BTC • Bitcoin

bc1qerc5ev074cqknu9nz589w4vjf5ecmhuc2df83h

🥈 My Public Address To Receive ETH • Ethereum

0x566A47B9731209A5144336D274D44224bfb9C0ea