RSK World - System Theme Detection | Light Dark Mode, prefers-color-scheme, CSS Variables | RSK World

System Theme Detection - Light and Dark Mode - RSK World

System Detection Light/Dark Mode Theme Generator Gallery & Analytics Vanilla JS

System Theme Detection is an automatic theme detection demo based on user system preferences. Uses CSS prefers-color-scheme media query, CSS custom properties (variables), and ThemeDetector JavaScript class. Features: system preference detection, automatic light/dark switching, manual override (Force Light, Force Dark, Auto Detect), theme toggle in nav, keyboard shortcuts (Ctrl+Shift+T/L/D/A), localStorage for theme and animations, theme generator (custom colors, palettes, contrast checker, export/import), theme gallery (built-in and advanced themes), analytics dashboard (sessions, theme usage, time per theme), theme scheduler (time-based and more). Files: index.html, styles.css, advanced-themes.css, advanced-styles.css, script.js, theme-generator.js, theme-gallery.js, analytics-dashboard-fixed.js, theme-scheduler-fixed.js. By rskworld.in.

If you find this System Theme Detection project useful, you can support with a small contribution.

Secure Fast Trusted

Pay via UPI QR

Scan or tap an amount to auto-generate

₹

Open UPI app

GPay PhonePe Paytm

Download System Theme Detection Demo

System Theme Detection

ThemeDetector class in script.js uses window.matchMedia("(prefers-color-scheme: dark)") for system preference. Modes: auto (follow system), light, dark. Applies theme via body classes light-theme, dark-theme. Listens for media query change, visibilitychange, and focus to re-check system. Saves theme-preference and animations-enabled in localStorage.

script.js ThemeDetector: matchMedia(prefers-color-scheme: dark), applyTheme(), setTheme(light|dark|auto), cycleTheme(), updateSystemPreference() – core detection and switching.
CSS :root variables in styles.css; @media (prefers-color-scheme: dark) and body.light-theme / body.dark-theme override for full control over light and dark themes.
Real-time UI: system preference, current theme, last changed displayed in status cards; theme toggle icon (moon/sun) and page title update on change.
Manual override buttons: Force Light, Force Dark, Auto Detect with active state; optional Enable Transitions toggle persisted in localStorage.
Keyboard shortcuts: Ctrl/Cmd+Shift+T (cycle), +L (light), +D (dark), +A (auto) for accessible theme switching.

Project Structure & Files

Root: index.html (hero, status, demo, controls, How it works, advanced tabs). CSS: styles.css (base, variables, light/dark), advanced-themes.css (Ocean, Sunset, Forest, Galaxy, Cyberpunk presets), advanced-styles.css (tabs, generator, gallery, analytics, scheduler). JS: script.js (ThemeDetector), theme-generator.js, theme-gallery.js, analytics-dashboard-fixed.js, theme-scheduler-fixed.js. No build step.

index.html – semantic sections, theme toggle in nav, status grid, demo grid (palette, typography, components), control panel, info cards, tabbed advanced features.
styles.css, advanced-themes.css, advanced-styles.css – CSS variables, prefers-color-scheme, body theme classes, preset themes, tab and component styles.
script.js, theme-generator.js, theme-gallery.js, analytics-dashboard-fixed.js, theme-scheduler-fixed.js – vanilla JavaScript; no frameworks.
No build step – open system-theme-detection/index.html in browser or serve folder; ideal for learning theme detection and CSS variables.
README.md and LICENSE options – documentation and usage for developers and educators.

Theme Generator & Gallery

theme-generator.js: ThemeGenerator class – color picker (primary, secondary, accent, background, text), predefined palettes (ocean, sunset, forest, galaxy, cyberpunk, minimal, pastel, monochrome), random theme, apply/save/reset, contrast checker, export/import. theme-gallery.js: ThemeGallery – built-in and advanced themes, categories, search, grid view, preview and apply.

ThemeGenerator: setupColorPicker(), setupPaletteGenerator(), setupAISuggestions(), setupExportImport(), setupContrastChecker() – full custom theme creation.
Predefined palettes map to advanced-themes.css body classes (ocean-theme, sunset-theme, forest-theme, galaxy-theme, etc.) for consistent presets.
ThemeGallery: loadThemes() (builtIn + advanced), renderGallery(), categories and search – browse and apply themes from a single UI.
Export/import theme config and contrast checker – reuse themes and ensure readability (WCAG).
window.themeGenerator and window.themeGallery – modules exposed for console and integration.

Analytics & Scheduler

analytics-dashboard-fixed.js: ThemeAnalytics – tracks sessions, theme changes, time per theme; stores in localStorage (theme-analytics); dashboard with period filter (today/week/month/all), export and clear. theme-scheduler-fixed.js: ThemeScheduler – schedules in localStorage (theme-schedules); time-based (name, time, days, theme), list of active schedules, Start/Stop scheduler.

ThemeAnalytics: loadAnalyticsData(), saveAnalyticsData(), getSystemInfo(), setupAnalyticsDashboard(), startTracking(), generateReports() – full analytics pipeline.
Session stats, theme usage, time per theme, system info (userAgent, prefersColorScheme, timezone, etc.) – SEO and UX insights.
ThemeScheduler: loadSchedules(), saveSchedules(), setupSchedulerUI(), time-based form (name, time, days, theme) – automate theme by time of day.
Tabs for time-based, location-based, weather-based, activity-based – extensible structure for future automation.
window.themeAnalytics and window.themeScheduler – modules initialized on DOMContentLoaded with other scripts.

CSS Variables & Media Queries

styles.css: :root defines --bg-primary, --text-primary, --color-primary, etc. @media (prefers-color-scheme: dark) overrides for dark. body.light-theme and body.dark-theme override variables so user choice wins. advanced-themes.css: body.ocean-theme, .sunset-theme, .forest-theme, .galaxy-theme set full variable sets for preset themes.

Single source of truth: all components use var(--variable-name) so one change updates entire UI for light, dark, or preset.
prefers-color-scheme: dark media query – no JavaScript required for initial system-based theme; JS adds manual override and persistence.
body.no-transitions class when animations disabled – respects user preference for reduced motion and performance.
Smooth transitions on background-color, color, border-color – professional theme switch UX.
Responsive breakpoints at 768px and 480px – layout adapts for mobile and tablet.

What You Get

Static HTML/CSS/JS: index.html, styles.css, advanced-themes.css, advanced-styles.css, script.js, theme-generator.js, theme-gallery.js, analytics-dashboard-fixed.js, theme-scheduler-fixed.js, README.md, LICENSE options. No build step. Open index.html or serve folder. Technologies: HTML5, CSS3, Vanilla JS. © 2026 RSK World.

Complete source – all HTML, CSS and JS for system theme detection, theme generator, gallery, analytics, and scheduler ready to use or customize.
No build step – open system-theme-detection/index.html in browser or serve the folder; no npm or bundler required.
README.md with usage, API reference (ThemeDetector methods), keyboard shortcuts, customization, and browser support.
Technologies: HTML5, CSS3, Vanilla JS – standard web stack; works in Chrome 76+, Firefox 67+, Safari 12.1+, Edge 79+. © 2026 RSK World.
Multiple license options – MIT, GPL, Apache, Creative Commons, Commercial; see LICENSE-README.md.

Usage

Open system-theme-detection/index.html. Theme auto-detects from system; use nav toggle to cycle auto/light/dark. Use Force Light, Force Dark, or Auto Detect in controls. Toggle Enable Transitions if needed. Explore Theme Generator, Theme Gallery, Analytics, and Scheduler in Advanced Features tabs.

index.html – open in browser; ThemeDetector initializes on DOMContentLoaded; theme preference and animations load from localStorage.
Theme toggle (nav) cycles auto → light → dark; control buttons set specific mode; keyboard shortcuts for power users.
Advanced tabs: Theme Generator (custom colors, palettes, contrast, export/import), Theme Gallery (browse and apply), Analytics (stats), Scheduler (time-based theme).
Author: RSK World | rskworld.in – system theme detection and UI/UX demos; contact for customization or integration.

Project Features

System detection via prefers-color-scheme; automatic light/dark switching; manual override (Force Light/Dark/Auto); theme toggle and keyboard shortcuts; localStorage persistence; theme generator with palettes and contrast checker; theme gallery with presets; analytics dashboard; theme scheduler; smooth transitions; responsive layout; ARIA and semantic HTML. All vanilla JS.

System detection and manual override – best of both: follow OS or lock to light/dark with one click or keyboard shortcut.
Theme generator, gallery, analytics, scheduler – beyond basic toggle: create themes, track usage, and automate by time.
Accessible: semantic HTML, ARIA on controls, keyboard shortcuts, optional reduced transitions for motion sensitivity.
Vanilla JS, responsive, no frameworks – minimal dependencies; works on desktop and mobile; easy to embed in any project.

Credits & Acknowledgments

System Theme Detection by RSK World. Automatic theme detection with prefers-color-scheme, CSS variables, ThemeDetector API, theme generator, gallery, analytics, and scheduler for learning front-end and vanilla JS.

System Theme Detection – prefers-color-scheme, CSS variables, light/dark/auto, theme generator, gallery, analytics, scheduler. Free for learning and integration.
RSK World – Project creator and educational platform for UI/UX demos and theme detection examples.
Author: Molla Samser (Founder - RSK World). Designer & Tester: Rima Khatun. Website: https://rskworld.in. Email: info@rskworld.com | Phone: +91 93305 39277. Location: Nutanhat, Mongolkote, Purba Burdwan, West Bengal, India.
Third-party credits: Font Awesome – Icons; Google Fonts – Inter.
Razorpay – Payment integration; QR Server API – UPI QR (api.qrserver.com / goqr.me).
© 2026 RSK World. All rights reserved. System Theme Detection provided under multiple license options for educational and commercial use.

Support & Contact

For System Theme Detection customization or integration help, please contact us.

Email: info@rskworld.com – for System Theme Detection customization, theme integration, or front-end questions.
Phone: +91 93305 39277 – support, custom theme detection requirements, or licensing.
Website: RSKWORLD.in – more UI/UX projects, theme detection examples, and resources by RSK World.
Location: Nutanhat, Mongolkote, Purba Burdwan, West Bengal, India – RSK World base.
Author: Molla Samser (Founder, RSK World); Designer & Tester: Rima Khatun.
System Theme Detection – README and documentation included for features, file structure, API reference, and usage.
Technical Support – help with ThemeDetector, theme generator, analytics, or scheduler integration.
Feature Requests Welcome – suggest new themes, scheduler rules, or analytics metrics for future demos.