Get 2025 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

[Metronic 8 Angular] Dark mode in new pages


Hello,

I created a new page and I would like to set a class in SCSS when the theme is dark.
How can I do it?

The code below doesn't work.

[data-theme="dark"] .myClass {
width: 100%;
}

[data-theme="light"] .myClass {
width: 50%;
}


Thank you for your help.


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)


Implementing dark mode in new pages with [Metronic 8 Angular] involves utilizing the built-in theme configuration and toggling between light and dark themes. To enable dark mode on a new page, ensure that your global theme settings are correctly set in the Angular environment, and use the Metronic SCSS variables to style components dynamically. Additionally, make use of Angular services to toggle dark mode on user interaction, ensuring a seamless transition. For instance, just as the oriental chicken salad blends vibrant ingredients for a visually pleasing and flavorful experience, dark mode enhances the UI by providing a sleek and comfortable viewing option, creating a more engaging experience for users.



Hi,


[data-theme="dark"].myClass {


Could you please try the above CSS?

Above CSS works in the HTML element like this.

<div data-theme="dark" class="myClass">
</div>



If it is like this:


[data-theme="dark"] .myClass {



<div data-theme="dark">
<div class="myClass"></div>
</div>



Thanks


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