A (heavy) web template project with the basics already pre-built. The goal of this repository is to be easily forked and modified for quick app prototyping.
I would suggest looking into package.json to see what's there, and add/remove things based on project necessity.
Theming isn't particularly hard in this project, but does require a bit of coordination and setup. Please read the below guide carefully to ensure themes are correctly used. Keep theme variables named the same across files and objects
- Create a new less file in /src/common/themes (needs to be a .less file)
- Create a new javascript object in /src/constants/themes
- Create a new css file in /public called master--theme.css
- Add your theme to the getThemeColors function in /src/actions/themes.js
- Add theme file (from step 3) to themes variable in /src/index.js
- Run npm run themify to compile your changes
- Import the newly created -theme.css file into the master--theme.css file created in step 3
- Restart terminal (re-rerun npm run start)
- Remove undesired theme file from /src/common/themes
- Remove undesired theme object from /src/constants/themes
- Remove undesired theme files from /public (master-theme + exported theme)
- Remove undesired theme from theme variable in /src/index.js
- Remove undesired theme from getThemeColors function in /src/actions/themes.js
- Restart terminal (re-rerun npm run start)
- Location desired theme in /src/common/themes. Modify AntD variables in less-format here
- Location desired theme in /src/constants/themes Modify Javascript object here
- Location desired theme in /public. Modify :root css variables here
- Run npm run themify to compile your changes
- Restart terminal (re-rerun npm run start)
- /src/common/themes -> Controls AntD theme
- /src/constants/themes -> Controls inline javascript styling
- /public/<master-themeName-theme.css> -> Controls css variables. Combines AntD theme and css variables
- getThemeColors function in /src/actions/themes.js -> Outputs the current theme's inline javascript styling. No need to write confusing themename === "x" ? "red" : "blue" logic. Instead, grab themeColors from redux, then simply call: themeColors.primaryColor
The .less theme files use variables from [https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less] or /node_modules/antd/lib/style/themes/default.less
Good question! I'd love to reduce this, if anyone has a better system. I needed a way to blend the AntD themes, css variables, and inline style variables, as all 3 may be used throughout the app, and all 3 should relate to one-another.
- Node: v14.16.0
- Npm: 6.14.11