Light
Dark
System
Ask  Question

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.
S
Sean Author3 months ago
Bootstrap Design Metronic
2 Answers
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)

user
Nick Foster 2 months ago

bookmarking


user
Nick Foster 2 months ago

Also, I want to add my two cents: https://webcapitan.com/blog/wordpress-vs-custom-cms/. It gave me a basic understanding of what web development is. I would say this is a solid foundation for your future self-development.


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  :(

Metronic

Go to MetronicDownloadsPurchase MetronicRefunds

React Dev Vacancy

KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply
keenthemes mega bundle