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 (2)
Greetings everyone. I recently decided to try Townsville Casino and have not regretted it. The site is perfectly optimized for Australian players, which makes the experience even more enjoyable. The large selection of games, including slots and table games, allows everyone to find something to their liking. I was also impressed with how quickly payouts are processed - no delays! If you want to find a safe and fun casino that caters to Australians, Townsville Casino is a great option.
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.
