Get 2024 Templates Mega Bundle!19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets
Get for 99$ 
How to Make Your Metronic based Web App Themeable with CSS Variables ?
Hi,
Nowadays more apps allow users to change or apply custom themes. Some reasons to add support for theming are:
- Make users feel more comfortable with a customized user experience. Users may feel more comfortable with the colors they chose themselves.
- Many companies tend to utilize their own branding, such as using a color from their logo in the header, sidebar, and footer navigations.
- For SaaS services, allowing theming can be a premium feature you can charge extra for.
To implement the user-opted theming you can use the CSS variables to set a custom primary theme color and its relevant variants in the HTML tag through style attribute as shown below:
style="
--bs-primary: #3E97FF;
--bs-primary-active: #0095e8;
--bs-primary-light: #f1faff;
--bs-primary-inverse: #ffffff;
--bs-primary-rgb: 62, 151, 255;
--bs-text-primary: #3E97FF;
--bs-component-active-color: #ffffff;
--bs-component-active-bg: #3E97FF;
--bs-component-hover-color: #3E97FF;
--bs-component-hover-bg: #F9F9F9;
--bs-component-checked-color: #ffffff;
--bs-component-checked-bg: #3E97FF;
--bs-menu-link-color-hover: #3E97FF;
--bs-menu-link-color-show: #3E97FF;
--bs-menu-link-color-here: #3E97FF;
--bs-menu-link-color-active: #3E97FF"Happy coding with Metronic!
Regards.
Replies (1)
I have always had problems with writing written works. Therefore, when the need for writing in college came, I looked at professional essay writers review and turned to real professionals in their field. They make learning easy and simple.
