The New Way to Build with AI! Introducing ReUI — the developer platform for agentic UI with shadcn/ui
Browse ReUI Pro
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.
user
Sean Author 3 years ago
Bootstrap Metronic Design
0 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (0)

 
Deleted comment
 
Deleted comment
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Metronic

Go to Metronic Downloads License Guide & FAQ Purchase Metronic Refunds
buy metronic keenthemes mega bundle

ReUI

Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.

ReUI by Keenthemes React Components UI Blocks React Templates ReUI Documentation