Get 2024 Templates Mega Bundle!14 Bootstrap, 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)
You can hire argumentative essay writer service www.masterpapers.com. This will give you the opportunity to forget about the difficulties related to the academic process forever. Just trust the experienced writers, they know exactly how to help you and will provide you with the perfect result. Relying on them, you will forget about all the difficulties of academic assignments very soon. So post the site for more information.
