Uses only CSS media queries to make the theme follow the system color scheme, with no JavaScript dependency
HTMLStarter
Sync-Website-Theme-With-OS-Dark-Mode-And-Light-Mode-CSS-Only-Trick — HTML Starter Template
By saeedkohansal
An HTML example template that uses only CSS media queries to make a webpage theme automatically follow the operating system's dark/light preference.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Desktop homepage1 / 2
Desktop captureTop of page
Actual screenshot captured by the server browser.
All pages & views 2
Screenshots show visual appearance; interactive behavior may differ.
Recorded 2026-10-12View source
What stands out
A quick read of the recorded project description.
When the system switches between dark and light, the page updates automatically without a refresh
Demonstrates how to detect the user's current color scheme mode with CSS and display it on the page
Theme switching can be made smoother by adding a CSS transition property to the body
Includes a link to the author's video tutorial for reference while understanding the implementation
Template Details
This template demonstrates how to keep a webpage theme in sync with the operating system's color preference without using JavaScript. The core approach is to detect whether the user's system is currently using a light or dark color scheme via a CSS media query and apply the corresponding styles, so when the user switches between dark and light mode in system settings, the page follows automatically without a refresh.
The repository also shows how to detect the user's color scheme mode with CSS and display the detection result on the page; if a smoother theme transition is desired, a CSS transition property can be added to the body selector. The author also provides a companion video tutorial link.
The template uses HTML as its tech stack and is a launcher/example, suitable as a reference starting point for implementing automatic night mode and day mode functionality. The README does not describe specific implementation details beyond browser compatibility, nor does it cover build tools or dependency management.
HTMLLauncher
Is it right for your project?
Use Cases
- Add automatic dark/light theming that follows system settings to a static webpage
- Display the detected user color scheme mode on the page
- Use as example code for learning the CSS prefers-color-scheme media query
- Quickly introduce script-free theme switching logic into an existing HTML page
Suitable For
- Front-end beginners who want to implement dark mode with pure CSS
- Developers who need to add system theme synchronization to a static site
- Teaching or reference scenarios looking for a CSS media query color scheme example
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
The repository is an HTML example; you can open the demo page directly to see the effect
- 2
Before use, confirm that the target browser supports the CSS color scheme media query
- 3
For smooth transitions, add a transition property to the body selector
- 4
The code is MIT licensed; retain the copyright and license notice when distributing
- 5
Third-party assets such as images in the demo must be checked separately under their respective licenses
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version of a public repository under the MIT license; the free scope applies to that version's code and does not imply that external services or third-party assets are free.
Must comply with when using
- You may use, modify, commercially use, and distribute this version's code for free.
- When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
- The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.
Additional costs & items to verify
- Demo images, fonts, icons, and other third-party assets must be checked under their respective licenses; the code's MIT license alone is not sufficient to determine this.
- External services such as domains, hosting, databases, payments, or AI may incur separate charges.
View Original Text Basis
https://github.com/saeedkohansal/Sync-Website-Theme-With-OS-Dark-Mode-And-Light-Mode-CSS-Only-Trick/blob/main/LICENSEhttps://github.com/saeedkohansal/Sync-Website-Theme-With-OS-Dark-Mode-And-Light-Mode-CSS-Only-Trick/blob/main/README.mdPermission is hereby granted, free of charge
Original License Text
Compiled by DeepSeek based on repository license and README ·2026-10-12. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.
Project checks & description sources
Template Information
- Source platforms
- GitHub
- Documentation and maintenance reference score
- More documented · 77 / 100
- Technologies
- HTML
- Website type
- Starter
How this score is calculated
Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.
What to verify for this project
- Repository update recorded
- 2025-06-05
- Screenshot last checked
- 2026-10-12
A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.
The catalog identifies HTML as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.
Use a selection guide →How this description was prepared
AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.
Review declaration: [email protected] · 2026-10-13
Inspect the recorded source material
SHA-256: 61c1f64a0d00ef794ec74bd58f6408f94f5e5a7d02687f298faafa65252715d5
2026-10-12T22:30:57.943Z
Source file / repository# 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_  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
Explore similar templates
Compare previews and descriptions within the same stack and category.
startbootstrap-simple-sidebar
A Bootstrap off-canvas sidebar navigation HTML starter template from Start Bootstrap. It provides directly editable HTML and CSS in the dist directory, while the source uses Pug, SCSS, and JavaScript with npm build scripts for live preview and compilation.
HTML · Starter
adminkit
AdminKit is a free, MIT-licensed HTML admin and dashboard template built on Bootstrap 5. The free version includes 15 demo pages, 1 plugin, and 1 color scheme, with hundreds of UI components, forms, tables, charts, and icons.
HTML · Admin dashboard
Landing-Page
A general-purpose landing page HTML template maintained by Tailwind Toolbox, written in pure HTML and loading the complete Tailwind CSS via CDN.
HTML · Corporate Website
light-bootstrap-dashboard
Light Bootstrap Dashboard is a free, MIT-licensed admin dashboard template from Creative Tim, built on Bootstrap with a responsive static HTML structure.
HTML · Admin dashboard
sing-app
Sing App Lite is a free, open-source admin dashboard template from Flatlogic, built with Bootstrap 4.5 and SCSS. It provides a responsive layout, dashboard examples, typography, tables, notifications, basic charts, icons, maps, and a hover sidebar, along with styled Bootstrap components.
HTML · Admin dashboard
startbootstrap-modern-business
Modern Business is a multipurpose Bootstrap full-site HTML template from Start Bootstrap with 17 standalone pages covering home, about, services, portfolio, pricing, blog, FAQ, and contact.
HTML · Starter