React-Theme-Loader
React Theme Loader is a ReactJs Package that allows dynamic multiple-themes manage on a React Page for themes written in Less Stylesheets.
Using React Theme Loader allows you switching directly between theme files that are separate stylesheets
Requirements
- Node 6.9.1+
Node Packages:
- less
- less loader
- css loader
- style loader
This Readme file assumes that you already installed all of the packages above, please see https://github.com/webpack-contrib/less-loader for more details.
Installation
npm install react-theme-loader --save
Setting up react-theme-loader
package.json
"react-theme-loader" should have been added to the depencies upon installation
... "dependencies": ... "react-theme-loader": "version-name" ... ...
.jsx
In your top-level React components where you want the theme styles to take effect, import the package:
var ThemeLoader = ;
After importing the package as ThemeLoader, render ThemeLoader as a React Component
{ return ... <ThemeLoader ref='themeLoader' supportedThemes=supportedThemes themeDirectory='./../../style/themes/' fonts='./../../style/fonts.less' defaultTheme='dark' themeCookie='CURRENT_THEME' /> ... ;}
When rendering the ThemeLoader, there are certain properties we need to attach to the element; the above is just an example, please read the instructions below on filling in the props and do NOT copy the above exactly.
Required
"ref": pass in "themeLoader" exactly so that you have access to the functions provided by the component.
"supportedThemes": pass in an array of strings that represent the names of the theme files (without ".less").
Example:
var supportedThemes = 'dark' 'light' 'green' 'blue' 'mocha';
"themeDirectory": pass in the relative path of the directory of the theme files in "supportedThemes"
Optional
"fonts": pass in the relative path of the fonts file. This file should contain ALL fonts used in the themes, and do NOT import any fonts in the theme files since they mess up the indeces of loaded stylesheets. If "fonts" is not given, no fonts file will be loaded.
"defaultTheme": pass in the name(string) of the default theme, which will be loaded initially when no theme cookie is stored. The first theme in "supportedThemes" will be the default if not specified.
"themeCookie": pass in the name(string) of the cookie where you wish to store the current theme name, so that the browser will remember the selected theme. "CURRENT_THEME" will be used if not specified.
Using react-theme-loader
Switching Themes
In the React component where ThemeLoader is rendered, simply use
thisrefsthemeLoader
to switch themes, where theme is the name(string) of the theme you wish to switch to.
When a theme is loaded, the ThemeLoader will render the following to HTML: