Themes & Font
Our templates use fonts loaded from Google Fonts. You can change it in the index.html file.
<link href="//fonts.googleapis.com/css?family=Mukta:400,700,800&display=swap" rel="stylesheet">
We used CSS variables to set primary color & font family globally. This variable can be set in the components/kit/core/css/core.scss file.
:root {--kit-color-primary: #4b7cf3;--kit-font-family: 'Mukta', sans-serif;}
Some third-party plugins also used this variable. See the components/kit/vendors folder.
On color change event in Color Picker component next code will be added to the end of the document, which will set --kit-color-primary variable to a new statement:
<style id="primaryColor">:root { --kit-color-primary: #f35847;}</style>
Basically switching light theme to dark theme will change data-kit-theme on html tag.
Light theme:
<html data-kit-theme="default">Dark theme:
<html data-kit-theme="dark">
All affected files have dark styles section in the end of file:
// dark theme[data-kit-theme='dark'] { ... }
You can use this approach to use dark components inside light (pay attention to the order in which the styles are loaded!):
<div data-kit-theme="default"><div class="card">...</div> // this card inherit light styles<div data-kit-theme="dark"><div class="card">...</div> // this card inherit dark styles</div></div>
Switching the Ant Design theme in a live application is more complex than just adding variables. To do this, we created a LESS plugin (components/kit/vendors/antd/themes/AntdThemeLoader.js).
To use LESS variables, the less plugin was added to the application configuration, check the vue.config.js file.
Ant Design styles loaded in src/main.js :
import 'antd/lib/style/index.less' // antd core stylesimport './components/kit/vendors/antd/themes/default.less' // default theme antd componentsimport './components/kit/vendors/antd/themes/dark.less' // dark theme antd components
