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

Topbar dark.


Hi,
I succeed to make the top bar dark, but became white when I switched to dark mode.

IS there a way to have the topbar as dark like here : https://ibb.co/x3Nq3zR

and here in dark mode (unfortunatly white) : https://ibb.co/bPyGP19

and it stays dark even if we switch to dark mode, like in demo14


NB : I'm using demo1 with no aside (used builder to remove aside menu)

thank you


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)


Hi,

For header styling customization, you'll need to update the SCSS files located in theme/html/demo/src/sass/layout/_variable.scss, under $header-config.

For demo1, it looks something like this: bg-color: if(isDarkMode(),#1E1E2D, $white),, which has the condition to swap the color from dark to white when darkmode is activated.

For demo14, which doesn't swap the color, the code looks like this: bg-color: #1E1E2D,. As you can see, there's no "isDarkMode" condition there.

Therefore, to customise your layout to maintain the dark background color for both light and dark modes, simply remove the "isDarkMode()" condition and place the static color, then re-run your build (via Gulp or Webpack).



Thank you soooooo much Shane.

I remember in Metronic7 it was as an option in the builder page (eaaasy). but it's ok if we go down the editing file route, as long as it gets the job done.

Thank you guys(appreciate it).


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