Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

Metronic 8.1.0 HTML: How to start in dark mode by default


Hi!

How can I start Metronic 8.1.0 in dark mode by default (plain HTML)?

Best regards!


F
Freelancer Freelancer 3 years ago
HTML
2 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 (2)

user
Ahmad Aminudin 3 years ago

i want to change my color default to light mode, but not working still change to system default setting (dark), how can i change that ?


user
Sean Author 3 years ago

Hi,

Please set defaultThemeMode="dark"; in the theme mode main initialization code:


<!--begin::Theme mode setup on page load-->

<script>

if ( document.documentElement ) {

const defaultThemeMode = "system";



const name = document.body.getAttribute("data-kt-name");

let themeMode = localStorage.getItem("kt_" + ( name !== null ? name + "_" : "" ) + "theme_mode_value");



if ( themeMode === null ) {

if ( defaultThemeMode === "system" ) {

themeMode = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";

} else {

themeMode = defaultThemeMode;

}

} 



document.documentElement.setAttribute("data-theme", themeMode);

} 

</script>

<!--end::Theme mode setup on page load-->


Regards.


Your Support Matters!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.
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  :(