193 dépôts
Systems that map design tokens to native CSS variables for dynamic styling.
Distinguishing note: Focuses on the implementation of theming via CSS variables, distinct from static style objects.
Explore 193 awesome GitHub repositories matching user interface & experience · CSS Variable Theming. Refine with filters or upvote what's useful.
This project is a component-based UI framework and a React Material Design library. It provides a comprehensive set of reusable interface elements that implement Google Material Design specifications to ensure consistent visual styles and behaviors across web applications. The framework enables the construction of professional layouts for enterprise web interfaces and the rapid prototyping of frontend designs. It uses a collection of pre-designed React components to standardize layouts and accelerate the overall development process. The system integrates a styling engine and theme-based inje
Implements a system that maps internal theme values to native CSS variables for dynamic styling.
Element is a Vue.js UI component library and web UI toolkit. It provides a collection of pre-styled user interface components and modular building blocks used to build web applications. The project includes a customizable CSS theme framework, allowing for the modification of visual styles and brand requirements through theme tools and generators. The toolkit covers frontend component management, custom web theming, and a workflow for rapid prototyping.
Provides a theming system that utilizes global CSS custom properties for dynamic updates to colors and fonts.
Ionic Framework is a cross-platform UI toolkit and hybrid app framework used to build native-quality mobile and progressive web applications using HTML, CSS, and JavaScript. It functions as a web component library that enables the deployment of a single codebase across iOS, Android, and the web. The framework features a platform-adaptive design system that automatically switches the visual style of components to match the design patterns of the host operating system. It utilizes a web-component-based architecture with CSS custom properties for global theming and specialized bindings to synchr
Implements a design system using global CSS custom properties for real-time visual and color modifications.
Ionic is a cross-platform mobile UI toolkit and hybrid app development framework. It provides a library of web components for building native-quality iOS, Android, and Progressive Web Apps using HTML, CSS, and JavaScript from a single codebase. The project utilizes a web component UI library to ensure consistent mobile interface behaviors. It employs a framework-agnostic wrapper to integrate these custom elements with JavaScript libraries such as React, Vue, and Angular. The toolkit covers hybrid mobile UI design and cross-platform app development. It includes an adaptive styling system that
Implements a theming system that maps design tokens to native CSS variables for real-time visual updates.
Chakra UI is a design system component library and styling framework that provides a foundation for building consistent, accessible web interfaces. It functions as a centralized theme configuration engine, using a design-token-driven architecture to manage visual properties like color palettes and spacing rules as a single source of truth across an entire application. The framework distinguishes itself through a type-safe styling utility that automatically generates TypeScript definitions from theme configurations, ensuring accurate property referencing and editor autocompletion. It employs a
Maps design tokens to native CSS variables to allow dynamic theme switching and consistent styling across the component tree.
ink-kit is a React-based component library and UI kit designed specifically for building the frontends of onchain applications. It provides a set of themed layouts and reusable UI elements tailored for decentralized application user experiences. The project includes a standardized blockchain wallet connector to manage identities and allow users to link cryptocurrency wallets to a web application. It combines these identity tools with pre-styled components to facilitate the development of web3 user interfaces.
Employs a design token system mapped to native CSS variables for consistent visual theming across the library.
This project is a comprehensive administrative dashboard framework built for the Vue ecosystem. It serves as a modular starter kit designed to accelerate the development of large-scale, enterprise-grade web applications by providing a pre-configured foundation of reusable components and standardized layout patterns. The framework distinguishes itself through a configuration-driven approach to interface development, allowing developers to generate complex forms and tables from schema definitions rather than manual coding. It integrates dynamic route generation and role-based access control, en
Uses CSS variables to dynamically propagate theme and color scheme changes across the entire component tree.
Element Plus is a Vue.js UI component library and enterprise web design system used for building professional web applications with Vue.js 3. It provides a comprehensive set of pre-styled interactive components and tools designed for creating responsive user interfaces. The project includes a customizable component theme system for managing global CSS variables and dark mode palettes. It also features a Vue.js migration toolkit with automated transpilation tools to convert legacy UI code to current component standards. The library covers a wide range of capability areas, including high-perfo
Uses a system that maps design tokens to native CSS variables to control global styles and dark mode.
This project is a Material Design UI library and Angular component framework. It provides a collection of reusable UI building blocks and development tools for creating consistent web applications that follow Material Design specifications. The framework includes an accessible web component library that uses headless directives and WAI-ARIA patterns to ensure user interface elements meet web accessibility standards. It also provides specialized integration wrappers for embedding and managing interactive Google Maps and YouTube video playback. The project supports custom UI component developm
Utilizes native CSS variables and Sass mixins for dynamic runtime theming and styling.
Vant is a mobile UI library and component framework for Vue, providing a collection of lightweight, reusable interface elements optimized for small screens and touch interactions. It serves as a mobile component library and accessible web UI kit designed to integrate with Vue's reactivity and state management. The framework functions as a themable design system, allowing for visual branding and dark mode support through customizable theme variables. It includes built-in tools for internationalization to localize user interfaces across different geographic regions. The library covers a broad
Implements dynamic styling across components using global CSS custom properties.
The mdb-ui-kit is a frontend component library and visual extension that combines the Bootstrap 5 framework with Material Design principles. It provides a collection of pre-styled interface elements and responsive web templates to facilitate the development of consistent web applications. The toolkit extends the Bootstrap ecosystem by adding Material Design aesthetics and advanced styling options. It enables rapid prototyping through the use of pre-configured design blocks and provides mechanisms for deep visual customization via SCSS variables and native CSS custom properties, including supp
Supports real-time switching between light and dark visual modes using native CSS custom properties.
Blueprint is a React UI component library and web design system focused on accessibility and the creation of data-dense interfaces. It provides a standardized framework of visual styles and reusable interface elements for building professional desktop applications. The toolkit is specifically optimized for displaying complex information and large datasets, featuring high-performance interactive data grids for rendering and manipulating data. The library covers a broad range of capability areas, including the construction of form inputs, navigation systems, and content layout management. It a
Implements a theming system that maps design tokens to native CSS variables for dynamic visual updates.
NES.css is an 8-bit CSS framework and styling system that transforms standard HTML elements into pixelated interfaces inspired by classic gaming consoles. It serves as a retro UI component library and toolkit for rendering text, borders, and icons with a blocky aesthetic. The framework uses pure CSS to emulate 8-bit graphics without relying on external images or JavaScript rendering. It implements pixel-art border simulations and integrates pixel-style web fonts to maintain a consistent gaming aesthetic across different browsers. The system provides a suite of game-themed interface elements,
Provides a theme system using CSS custom properties to switch between light and dark retro modes.
Gentelella is a collection of pre-configured interface templates and a component library designed for building administration panels, data dashboards, and internal management consoles. It provides a Bootstrap 5 based framework that includes accessible web interface templates and PWA-ready dashboard shells. The project features specialized templates for data visualization, utilizing modular chart factories to render line, bar, radar, and heatmap visualizations. It includes a set of ready-to-use interface elements for enterprise prototyping, such as kanban boards, file managers, and interactive
Implements dynamic styling and theme switching using native CSS variables.
Magic UI is a copy-paste UI framework and React animated library providing a collection of interactive, visually dynamic interface components. It serves as a design engineering toolkit that bridges high-fidelity design and production code by offering ready-made components for direct integration into web applications. The library focuses on animated UI development and the implementation of interactive components, utilizing a copy-paste distribution model. This approach allows for rapid prototyping and full local customization without the need to install heavy dependencies. The components are
Implements a theming system that maps design tokens to native CSS variables for dynamic styling.
Monkeytype is a browser-based typing trainer that captures keystrokes through low-level events to provide real-time feedback on speed and accuracy. The application maintains user progress and state entirely within browser memory, ensuring instantaneous interaction during typing sessions. The platform distinguishes itself through a comprehensive analytics and community system. Users can track their historical performance and typing metrics through detailed profiles, while a global leaderboard system allows for the comparison of experience levels and rankings against the broader community. The
Implements dynamic theme switching using native CSS variables for seamless visual updates.
Vue Manage System is a type-safe administrative dashboard framework built with Vue 3 and Element Plus. It serves as a management template for backend systems, integrating role-based access control to restrict pages and actions based on assigned user permissions. The project distinguishes itself through a comprehensive set of administrative tools, including a data visualization dashboard with interactive charts and a content management system featuring rich text editing and image cropping utilities. It utilizes TypeScript for static typing and Pinia for centralized state management. The syste
Employs CSS variables to implement dynamic styling and a customizable theme system.
UnoCSS is an atomic CSS engine and utility-first framework that generates styles on-demand based on the specific classes used in your source code. By scanning your project files during the build process, it produces only the CSS necessary for your application, effectively minimizing bundle size and eliminating unused styles. The engine distinguishes itself through a highly modular, configuration-driven architecture that allows for deep customization of design tokens, rules, and presets. It supports advanced styling patterns such as attribute-based styling, tag-based styling, and dynamic varia
Extracts theme configurations into CSS variables to optimize bundle size and enable dynamic styling.
Framework7 is a mobile user interface framework and single-page application system designed to build responsive web applications with native iOS and Android appearances. It provides a comprehensive library of pre-styled components and a layout engine to create native-style user interfaces across multiple platforms. The framework utilizes a platform-aware theming system that adapts visual styles and color schemes based on detected device settings. It incorporates native mobile behaviors through a dedicated UI kit, including specialized interaction patterns such as pull-to-refresh and swipeable
Implements a platform-aware theming system using CSS variables to dynamically switch styles based on device settings.
vant-weapp is a UI library for WeChat Mini Programs, providing a collection of reusable interface components to create consistent user experiences. It functions as a layout framework for structuring applications and a mobile form component library for capturing structured user data. The project includes a specialized e-commerce component set designed for retail patterns, such as product cards, area selectors, and order submission bars. The library covers a broad range of capabilities, including application navigation architecture, complex form implementation through calendars and pickers, a
Implements a theming system that leverages native CSS variables for global style customization.