RSK World - Multi-Theme Switcher 2026 | Light, Dark & Custom Themes | Theme Generator, Scheduler, Analytics | RSK World

Theme Switcher Theme Generator Theme Scheduler Analytics Vanilla JS

Multi-Theme Switcher is an advanced theme management system with 6 predefined themes (Light, Dark, Ocean, Sunset, Forest, Purple), smooth CSS transitions, and persistent localStorage preferences. Main app (index.html, script.js, styles.css): theme modal, theme gallery, customization (primary color, font size, border radius, animation speed), demo form, keyboard shortcut Ctrl+T, system preference detection. Theme Generator (theme-generator.html): color harmony (complementary, triadic, analogous, split-complementary, tetradic), live preview, palette display, CSS export, saved themes. Theme Scheduler (theme-scheduler.html): time-based slots (morning/afternoon/evening/night), location-based sunrise/sunset, follow system theme, reduce motion, high contrast. Analytics (analytics.html): usage stats, distribution charts, session tracking, export report. All pages share styles.css and use data-theme on documentElement. By rskworld.in.

If you find this Multi-Theme Switcher 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 Multi-Theme Switcher

Multi-Theme Switcher Core

script.js: ThemeSwitcher class with 6 themes (light, dark, ocean, sunset, forest, purple). Load/save theme and custom settings from localStorage; respect prefers-color-scheme when no saved theme. Theme modal (theme toggle button), theme gallery (clickable preview cards), customization panel: primary color (picker + presets), font size (A-/A+), border radius slider, animation speed. Keyboard: Escape closes modal, Ctrl+T opens theme menu. meta theme-color updated per theme. Export/import theme settings as JSON.

script.js: ThemeSwitcher – loadSavedSettings(), applyTheme(), saveSettings(); themes array and customSettings (primaryColor, fontSize, borderRadius, animationSpeed).
styles.css: :root and [data-theme="light|dark|ocean|sunset|forest|purple"] with full CSS variable sets (--bg-primary, --text-primary, --primary-color, shadows, borders).
Theme modal and theme gallery – switch via header button or by clicking theme preview cards; selection applied and saved to localStorage (selectedTheme, themeCustomSettings).
Customization: primary color (picker + 5 presets), font size 12–24px, border radius 0–20px, animation speed (none/fast/normal/slow); Reset and Save Preferences with toast notifications.
Accessibility: skip link, ARIA labels, focus styles, prefers-reduced-motion in CSS; meta theme-color for mobile browser chrome.

Project Structure & Files

Main: index.html (hero, theme gallery, customization panel, demo content, theme modal), styles.css (all 6 theme variables, layout, components), script.js (ThemeSwitcher class). Theme Generator: theme-generator.html, theme-generator.js, theme-generator.css. Theme Scheduler: theme-scheduler.html, theme-scheduler.js, theme-scheduler.css. Analytics: analytics.html, analytics.js, analytics.css. All pages link styles.css; sub-pages add their own CSS/JS. No build step.

index.html – semantic sections (hero, theme showcase, customization, demo content), theme modal, nav links to Theme Generator, Theme Scheduler, Analytics.
styles.css – :root and 6 data-theme blocks; shared components (buttons, forms, cards, footer); responsive breakpoints; reduced-motion and high-contrast support.
script.js, theme-generator.js, theme-scheduler.js, analytics.js – vanilla JavaScript only; no frameworks; each page has its own init and localStorage keys.
No build step – open index.html or serve folder; ideal for learning theme systems and integrating into existing projects.
LICENSE and README – free to use, modify, distribute; documentation of features and file purposes for developers and educators.

Theme Generator

theme-generator.js: ThemeGenerator class. Base colors: primary, secondary, background, text (color picker + hex input, two-way sync). Color harmony: complementary, triadic, analogous, split-complementary, tetradic (HSL math: hexToHSL, hslToHex). Sliders: saturation, brightness, contrast. Templates: corporate, creative, minimal, vibrant, elegant, nature. Actions: Generate Palette, Random Theme, Save Theme (name + localStorage), Export CSS, Share, Import. Live preview (mini site with CSS variables). Saved themes grid with Apply/Delete. Copy CSS outputs :root variables.

Color harmony algorithms – complementary (180°), triadic (120°), analogous (±30°), split-complementary, tetradic; displayPalette() and updateCSSOutput() for generated palette and CSS.
Live preview uses --preview-primary, --preview-secondary, --preview-bg, --preview-text on .preview-website for instant feedback.
Saved themes in localStorage (customThemes); displaySavedThemes(), applyTheme(id), deleteTheme(id); name and createdAt for each saved theme.
Export theme as CSS file (custom-theme.css); Copy CSS button for :root block; optional share/import for theme portability.
YUI-inspired enhanced classes for buttons, inputs, cards, tooltips; theme-generator.css extends base styles for generator layout and controls.

Theme Scheduler

theme-scheduler.js: ThemeScheduler class. Time-based: morning (6–12), afternoon (12–18), evening (18–22), night (22–6); each slot has theme select. Location-based: enable toggle, location input, Detect Location (geolocation), sunrise/sunset theme selects; calculateSunTimes() for display. System: Follow System Theme (prefers-color-scheme), Reduce Motion (--transition-speed 0), High Contrast (class on html). Scheduler runs every 60s; checkAndApplyTheme() applies theme and logs activity. Schedule and statistics in localStorage.

Time slots – morning, afternoon, evening, night with theme dropdowns; checkAndApplyTheme() uses current hour to pick target theme and applyTheme() if different.
Location: getCurrentPosition for coords; getCityFromCoordinates (mock); getLocationData(city); calculateSunTimes(location) for sunrise/sunset display and day/night theme switch.
System preferences: followSystem applies light/dark from matchMedia; reduceMotion sets --transition-speed; highContrast toggles .high-contrast on documentElement.
UI: current time, current theme, next change, scheduling status; timeline of slot themes; upcoming changes list; activity log (last 100). Save/Test/Reset schedule.
localStorage: themeSchedule (time/location/system settings), themeStatistics (totalChanges, themeUsage, activityLog).

Theme Analytics

analytics.js: ThemeAnalytics class. Data: themeChanges[], sessions[], themeUsage{}, dailyStats{}, hourlyStats{}. MutationObserver on documentElement for data-theme changes to record theme switches. Session start/end on visibilitychange and beforeunload. Time period filter: today, week, month, year, all. Stats: total changes, active sessions, favorite theme, avg session time. Canvas charts: theme distribution, daily usage, hourly changes, popularity. Table: per-theme usage count, %, avg duration, last used. Insights: peak hour, theme loyalty, change frequency, theme diversity. Recent activity timeline. Export report (JSON), Clear data.

Tracking: MutationObserver on data-theme; trackThemeChange(theme) pushes to themeChanges and updates themeUsage, dailyStats, hourlyStats; session tracking with start/end and duration.
Dashboard: getPeriodData() filters by currentPeriod; updateOverviewStats(), updateThemeMetrics(), updateInsights(), updateActivityTimeline(); period selector (today/week/month/year/all).
Charts: createThemeDistributionChart(), createDailyUsageChart(), createHourlyChangesChart(), createPopularityChart() – Canvas 2D bar/line charts using theme colors and CSS variables.
Export report as JSON (summary, themeUsage, recentActivity, insights); Clear data with confirmation; all data in localStorage (themeAnalytics).
analytics.css – stat cards, chart containers, metrics table, insights grid, activity timeline; responsive and theme-aware.

What You Get

Static HTML/CSS/JS: index.html, styles.css, script.js; theme-generator.html, theme-generator.js, theme-generator.css; theme-scheduler.html, theme-scheduler.js, theme-scheduler.css; analytics.html, analytics.js, analytics.css. LICENSE and README. 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 main switcher, Theme Generator, Theme Scheduler, and Analytics; ready to copy or embed.
No build step – open index.html or serve with any static server; no npm or bundler required.
README with usage and customization – features, file structure, technologies, author, usage steps.
Technologies: HTML5, CSS3, Vanilla JS – works in all modern browsers; easy to maintain. © 2026 RSK World.
MIT License – free to use, modify, and distribute for personal, educational, and commercial use.

Usage

Open index.html for main theme switcher. Use theme button or gallery to switch themes; customize primary color, font size, radius, animation. Visit theme-generator.html to create palettes and export CSS; theme-scheduler.html to set time/location/system scheduling; analytics.html to view usage stats and export reports. All preferences persist in localStorage.

index.html – theme modal (Ctrl+T), theme gallery cards, customization panel, demo form; Theme Generator, Theme Scheduler, Analytics linked in nav.
Theme Generator – pick colors, choose harmony, adjust sliders, save themes, export CSS; live preview and palette display update in real time.
Theme Scheduler – enable time or location scheduling; set themes per slot; follow system, reduce motion, high contrast; save and test.
Analytics – select time period; view stats, charts, table, insights, activity timeline; refresh, export report, or clear data.
Author: RSK World | rskworld.in – free UI/UX projects and source code; contact for customization or integration help.

Project Features

6 themes (Light, Dark, Ocean, Sunset, Forest, Purple); smooth transitions; customization (color, font size, radius, animation); Theme Generator (harmony, palette, CSS export); Theme Scheduler (time, location, system); Analytics (charts, sessions, export); localStorage persistence; keyboard shortcuts; accessibility (skip link, ARIA, reduced motion, high contrast). All vanilla JS.

Six full themes with CSS variables – consistent tokens for background, text, primary, borders, shadows across all components.
Theme Generator with color harmony, live preview, saved themes, and CSS export; Theme Scheduler with time slots and optional location/system; Analytics with charts and export.
Accessible: skip link, ARIA, focus styles, prefers-reduced-motion, high-contrast support; meta theme-color for mobile.
Vanilla JS, responsive layout, no frameworks – minimal dependencies; works on desktop and mobile; easy to integrate.

Credits & Acknowledgments

Multi-Theme Switcher by RSK World. Advanced theme management with 6 color schemes, Theme Generator, Theme Scheduler, and Analytics for modern web apps and learning front-end theme systems.

Multi-Theme Switcher – 6 themes, customization, Theme Generator, Theme Scheduler, Analytics. Free for learning and integration.
RSK World – Project creator and educational platform for UI/UX demos and free source code.
Author: Molla Samser (Founder - RSK World). Website: https://rskworld.in. Email: help@rskworld.in | Phone: +91 93305 39277. Address: Nutanhat, Mongolkote, Purba Burdwan, West Bengal, India.
Third-party credits: Font Awesome – Icons; Bootstrap – CSS/JS framework; Prism.js – Syntax highlighting in file browser.
Razorpay – Payment integration; QR Server API – UPI QR code generation (api.qrserver.com / goqr.me).
© 2026 RSK World. All rights reserved. Multi-Theme Switcher is provided under MIT License for educational and commercial use.

Support & Contact

For Multi-Theme Switcher customization or integration help, please contact us.

Email: help@rskworld.in – for Multi-Theme Switcher customization, theme integration, or front-end questions.
Phone: +91 93305 39277 – support, custom theme requirements, or bulk licensing.
Website: RSKWORLD.in – more free UI/UX projects and resources by RSK World.
Location: Nutanhat, Mongolkote, Purba Burdwan, West Bengal, India – RSK World base.
Author: Molla Samser (Founder, RSK World) – creator of Multi-Theme Switcher and other UI/UX projects.
Multi-Theme Switcher – README and documentation included for features, file structure, and usage.
Technical Support – help with theme variables, scheduler, analytics, or accessibility.
Feature Requests Welcome – suggest new themes, generator options, or scheduler rules.