Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

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 :

and here in dark mode (unfortunatly white) :

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