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.
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)


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.



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.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(