LayX
Download
Getting started
Introduction Installation Quick Start CLI
Core Concepts
Overview
Customize
Customize
Layout System
Breakpoints Container Component Layout Component
Main
Base Typography
Components
theme Alert Breadcrumb Button Card Carousel Chart Dialog Draggable Form Footer Media Navbar Pagination Popover Sheet Section Tab Tooltip Window
Helpers
Flex and Grid Layout
Utilities
Border Color Display Flex Grid Height Margin Opacity Padding Position Shadow Width Z-index
Others
Background Dynamic Render Icon PWA Partial Render Scroll Driven Animation Smooth Scroll Syntax Highlighter Theme View Transition
About
Contributing License
Theme Management

The Theme class facilitates dynamic theme switching between light and dark modes, or adapting to the system's preferred color scheme. It manages theme attributes, local storage, and UI updates to ensure a seamless and consistent experience across user sessions.

Key Features:
  • Auto Mode: Adapts to the system's preferred color scheme, automatically switching between light and dark.
  • Persistent Theme: Remembers the user's choice by saving the theme in localStorage.
  • Interactive Toggle: Includes a toggle button to switch between themes instantly.
  • Meta Theme Update: Dynamically updates the <meta name="theme-color"> to match the applied theme.
  • Element Attribute Sync: Updates specific elements to reflect the current theme state.
Options:
  • data-theme-value – Allows buttons to explicitly set light or dark themes through data-theme-value attributes.
  • .theme-toggler – Toggles the theme between light and dark modes.
  • .theme-update – Elements that sync to the active theme for real-time adjustments.
Example Usage:
import Theme from './others/theme/theme.js';
How It Works:

Upon initialization, the theme is set based on either the stored value or the system's preference. Clicking the toggle button switches between light and dark themes, updating localStorage and applying the relevant theme attributes. Additionally, meta[name="theme-color"] is updated to reflect the background color of the active theme, enhancing the visual integration with browsers and mobile UIs.

Meta Theme Color:

The meta[name="theme-color"] tag ensures that the browser interface reflects the active theme. If the tag is missing, the class automatically creates and appends it to the <head>.

Benefits:
  • Enhances user experience by offering seamless light/dark switching.
  • Improves visual aesthetics with dynamic meta theme color updates.
  • Respects user preferences by adapting to system-level theme settings.
See example