awesome-repositories.com
Blog
MCP
awesome-repositories.com

Entdecke die besten Open-Source-Repositories mit KI-gestützter Suche.

EntdeckenKuratierte SuchenOpen-Source-AlternativenSelf-hosted SoftwareBlogSitemap
ProjektMCP-ServerÜber unsRanking-MethodikPresse
RechtlichesDatenschutzAGB
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
·

221 Repos

Awesome GitHub RepositoriesCSS Variable Theming

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 221 awesome GitHub repositories matching user interface & experience · CSS Variable Theming. Refine with filters or upvote what's useful.

Awesome CSS Variable Theming GitHub Repositories

Finde die besten Repos mit KI.Wir suchen mit KI nach den am besten passenden Repositories.
  • callemall/material-uiAvatar von callemall

    callemall/material-ui

    98,475Auf GitHub ansehen↗

    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.

    JavaScript
    Auf GitHub ansehen↗98,475
  • elemefe/elementAvatar von ElemeFE

    ElemeFE/element

    54,116Auf GitHub ansehen↗

    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.

    Vuecomponentselement-uijavascript
    Auf GitHub ansehen↗54,116
  • ionic-team/ionic-frameworkAvatar von ionic-team

    ionic-team/ionic-framework

    52,539Auf GitHub ansehen↗

    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.

    TypeScriptangularcapacitorframework
    Auf GitHub ansehen↗52,539
  • driftyco/ionicAvatar von driftyco

    driftyco/ionic

    52,514Auf GitHub ansehen↗

    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.

    TypeScript
    Auf GitHub ansehen↗52,514
  • chakra-ui/chakra-uiAvatar von chakra-ui

    chakra-ui/chakra-ui

    40,438Auf GitHub ansehen↗

    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.

    TypeScripta11yaccessibleark-ui
    Auf GitHub ansehen↗40,438
  • inkonchain/ink-kitAvatar von inkonchain

    inkonchain/ink-kit

    36,479Auf GitHub ansehen↗

    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.

    TypeScript
    Auf GitHub ansehen↗36,479
  • vbenjs/vue-vben-adminAvatar von vbenjs

    vbenjs/vue-vben-admin

    32,666Auf GitHub ansehen↗

    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.

    Vueadmin-templateant-designelement-plus
    Auf GitHub ansehen↗32,666
  • element-plus/element-plusAvatar von element-plus

    element-plus/element-plus

    27,531Auf GitHub ansehen↗

    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.

    TypeScriptcomponent-libraryelement-pluselement-ui
    Auf GitHub ansehen↗27,531
  • angular/material2Avatar von angular

    angular/material2

    25,033Auf GitHub ansehen↗

    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.

    TypeScript
    Auf GitHub ansehen↗25,033
  • youzan/vantAvatar von youzan

    youzan/vant

    24,323Auf GitHub ansehen↗

    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.

    TypeScript
    Auf GitHub ansehen↗24,323
  • mdbootstrap/mdb-ui-kitAvatar von mdbootstrap

    mdbootstrap/mdb-ui-kit

    24,256Auf GitHub ansehen↗

    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.

    SCSSbootstrapbootstrap-materialbootstrap-template
    Auf GitHub ansehen↗24,256
  • palantir/blueprintAvatar von palantir

    palantir/blueprint

    21,836Auf GitHub ansehen↗

    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.

    TypeScriptblueprintcomponentsdesign
    Auf GitHub ansehen↗21,836
  • nostalgic-css/nes.cssAvatar von nostalgic-css

    nostalgic-css/NES.css

    21,773Auf GitHub ansehen↗

    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.

    SCSS8bitcsscss-framework
    Auf GitHub ansehen↗21,773
  • colorlibhq/gentelellaAvatar von ColorlibHQ

    ColorlibHQ/gentelella

    21,373Auf GitHub ansehen↗

    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.

    HTMLadminadmin-dashboardadmin-dashboard-template
    Auf GitHub ansehen↗21,373
  • magicuidesign/magicuiAvatar von magicuidesign

    magicuidesign/magicui

    21,278Auf GitHub ansehen↗

    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.

    MDXcomponentsframer-motionnextjs
    Auf GitHub ansehen↗21,278
  • monkeytypegame/monkeytypeAvatar von monkeytypegame

    monkeytypegame/monkeytype

    20,248Auf GitHub ansehen↗

    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.

    TypeScriptmonkeytypetypingtest
    Auf GitHub ansehen↗20,248
  • lin-xin/vue-manage-systemAvatar von lin-xin

    lin-xin/vue-manage-system

    19,639Auf GitHub ansehen↗

    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.

    Vueelement-pluspiniatypescript
    Auf GitHub ansehen↗19,639
  • unocss/unocssAvatar von unocss

    unocss/unocss

    18,854Auf GitHub ansehen↗

    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.

    TypeScriptatomic-cssengineunocss
    Auf GitHub ansehen↗18,854
  • framework7io/framework7Avatar von framework7io

    framework7io/framework7

    18,673Auf GitHub ansehen↗

    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.

    JavaScriptandroidcomponentscordova
    Auf GitHub ansehen↗18,673
  • youzan/vant-weappAvatar von youzan

    youzan/vant-weapp

    18,398Auf GitHub ansehen↗

    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.

    JavaScriptminiprogramuivant
    Auf GitHub ansehen↗18,398
Vorherige123456…12Nächste
  1. Home
  2. User Interface & Experience
  3. CSS Variable Theming

Unter-Tags erkunden

  • Data-to-Visual MappingsMechanisms for mapping numeric data values to visual dimensions via CSS variables. **Distinct from CSS Variable Theming:** Distinct from CSS Variable Theming: maps dynamic data values to dimensions rather than mapping design tokens to static themes.
  • Layered CSS EnginesSystems that use CSS layers and overrides to manage complex runtime visual styling. **Distinct from CSS Variable Theming:** Distinct from CSS Variable Theming by focusing on the layered override architecture rather than just variable mapping.
  • Light and Dark Theme Implementations4 Sub-TagsSystems that implement light and dark color schemes entirely through CSS custom properties without JavaScript runtime switching. **Distinct from CSS Variable Theming:** Distinct from CSS Variable Theming: focuses specifically on implementing light/dark theme switching via CSS custom properties, not general design token mapping.
  • Light and Dark Theme Systems7 Sub-TagsImplements light and dark color schemes entirely through CSS custom properties with no JavaScript runtime switching. **Distinct from CSS Variable Theming:** Distinct from CSS Variable Theming: focuses specifically on implementing light/dark mode toggles via CSS custom properties, not general design token mapping.
  • SCSS Variable OverridesDefines color schemes and layout styles through cascading SCSS variables that override theme defaults before CSS compilation. **Distinct from CSS Variable Theming:** Distinct from CSS Variable Theming: uses SCSS variables compiled at build time, not native CSS custom properties for runtime theming.
  • System Theme AdaptationAutomatic adjustment of styles based on the operating system's light or dark mode settings. **Distinct from CSS Variable Theming:** Focuses on reacting to system-level theme queries rather than managing a set of design tokens via CSS variables.