antd-live-theme - Customize Ant Design specific colors dynamically on runtime

  •        172

This project is a guide to achieve live/dynamic theming related to colors. You can change theme in browser. This is basically for React app generated with create-react-app. You can use https://github.com/mzohaibqc/antd-theme-webpack-plugin to acheive this in any project using webpack. Use antd-theme-webpack-plugin in config-overrides.js file if you have webpack config file in any kind of project with similar structure or you have ejected your create-react-app app.

https://antd-live-theme.firebaseapp.com
https://github.com/mzohaibqc/antd-live-theme

Dependencies:

antd : ^3.5.2
antd-theme-webpack-plugin : 1.1.6
babel-plugin-import : ^1.7.0
less : 2.7.2
less-loader : ^4.1.0
react : ^16.3.1
react-app-rewire-antd-theme : 1.1.3
react-app-rewired : ^1.5.0
react-color : ^2.14.1
react-dom : ^16.3.1
react-scripts : ^1.1.4

Tags
Implementation
License
Platform

   




Related Projects

roadiz - Roadiz is a polymorphic CMS based on a node system which can handle many types of services.

  •    PHP

Roadiz is a modern CMS based on a polymorphic node system which can handle many types of services and contents. Its back-office has been developed with a high sense of design and user experience. Its theming system is built to live independently from back-office allowing easy switching and multiple themes for one content basis. For example, it allows you to create one theme for your desktop website and another one for your mobile, using the same node hierarchy. Roadiz is released under MIT license, so you can reuse and distribute its code for personal and commercial projects. This is Roadiz Source repository. To create a new project, use Roadiz Standard Edition.

babel-plugin-import - Modularly import plugin for babel.

  •    Javascript

Modular import plugin for babel, compatible with antd, antd-mobile, lodash, material-ui, and so on. Note : with style: true css source files are imported and optimizations can be done during compilation time. With style: "css", pre bundled css files are imported as they are.

react-antd-demo - 基于react及antd的demo

  •    Javascript

基于react及antd的demo


ant-design-vue - An enterprise-class UI components based on Ant Design and Vue. 🐜

  •    Vue

An enterprise-class UI components based on Ant Design and Vue. We recommend using npm or yarn to install,it not only makes development easier,but also allow you to take advantage of the rich ecosystem of Javascript packages and tooling.

ionic-theme-editor - A theme editor for Ionic Framework

  •    CSS

The Ionic Theme Editor is a simple live-editor for the Ionic Framework. You can visually customize the primary Ionic variables, view your live changes immediately in several previews, and download a compiled css file with your edits. Ionic Theme Editor is licensed under the MIT Open Source license. For more information, see the LICENSE file in this repository.

ThemeKit - macOS theming library

  •    Swift

ThemeKit is a lightweight theming library completely written in Swift that provides theming capabilities to both Swift and Objective-C macOS applications. ThemeKit is brought to you with ❤️ by Nuno Grilo and the Paw team.

bootstrap-fileinput - An enhanced HTML 5 file input for Bootstrap 3

  •    Javascript

An enhanced HTML 5 file input for Bootstrap 3.x and 4.x with file preview for various files, offers multiple selection, and more. The plugin allows you a simple way to setup an advanced file picker/upload control built to work specially with Bootstrap CSS3 styles. It enhances the file input functionality further, by offering support to preview a wide variety of files i.e. images, text, html, video, audio, flash, and objects. In addition, it includes AJAX based uploads, dragging & dropping files, viewing upload progress, and selectively previewing, adding, or deleting files. NOTE: An alternative new Krajee Explorer Theme (preview shown below) for bootstrap-fileinput has been released and available since v4.3.7. For more theming options and suggestions refer the theming demos.

a-wp-react-redux-theme - WordPress theme built with ReactJS and Redux calling WP-REST-API for content

  •    Javascript

WordPress theme built with react calling WP-API for content. It's now the live theme on my personal site.

online-cv - A minimal Jekyll Theme to host your resume (CV)

  •    CSS

This theme is designed by Xiaoying Riley at 3rd Wave Media. Visit her website for more themes. I have made this into a Jekyll Theme. Checkout the live demo here.

seti-ui - A subtle dark colored UI theme for Atom.

  •    CSS

This is the latest version of the Seti UI theme. It's a dark interface theme crafted especially for Atom, with subtle colors that are meant to be easy on the eyes. It includes custom file icons, and new user configurable settings. Seti Syntax is also available for all your codez. This is for the interface of the Atom editor. I also have Seti Syntax for theming the code view in Atom. In addition, there is a new Seti theme for Hyper.

styled-components-theme - Defines themes via flexible color selectors for use with styled-components

  •    Javascript

styled-components-theme generates selectors for colors in your styled-components theme that allows color manipulation, using the color library via calls on the selectors themselves. A selector, in this context, is defined as a function that looks like (props) => props.theme.myColor that the styled-components library accepts as a template variable.

hyde-x - Enhanced port of the Jekyll "Hyde" theme to Hugo

  •    CSS

Enhanced port of the Jekyll "Hyde" theme to the Hugo site generator. Check below for a list of enhancements. You can find a live site using this theme here and the corresponding source code here.