{"id":623,"date":"2022-08-09T16:15:17","date_gmt":"2022-08-09T16:15:17","guid":{"rendered":"https:\/\/priyodesign.com\/docs\/nijhum\/html\/?post_type=docs&#038;p=623"},"modified":"2023-03-06T18:08:48","modified_gmt":"2023-03-06T18:08:48","slug":"change-color-mode","status":"publish","type":"docs","link":"https:\/\/priyodesign.com\/docs\/nijhum\/html\/read\/change-color-mode\/","title":{"rendered":"Change Color Mode"},"content":{"rendered":"\n<p>The <strong>Nijhum HTML5<\/strong> template&#8217;s default color mode is <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-black-color\">Dark<\/mark>. To make it in the <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-black-color\">Light<\/mark> mode you just need a single simple touch in the main stylesheet <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-primary-color\">(<\/mark><code>style.css<\/code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-primary-color\">)<\/mark> file.<\/p>\n\n\n\n<div style=\"height:15px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Just open <code>style.css<\/code> file in a code editor and find the <code>:root<\/code> selector. Find the <kbd>\/* Default Colors - Mode *\/<\/kbd> and replace those 7 lines of code with the below 7 lines of code.<\/p>\n\n\n\n<div style=\"height:15px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><em>*Make sure your website header logo is prepared for the Light &amp; Dark versions when you&#8217;re switching to color modes.<\/em><\/p>\n\n\n\n<div style=\"height:15px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre title=\"CSS\" class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">\/* Default Colors - Mode *\/\n--foreground-auto-1: var(--color-darker);\n--foreground-auto-2: var(--color-dark);\n--foreground-auto-3: var(--color-gray);\n--background-auto-1: var(--color-white);\n--background-auto-2: var(--color-lighter);\n--background-auto-3: var(--color-light);\n--swap-accent: var(--color-darker);<\/code><\/pre>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">\u2728 You&#8217;re done!<\/h3>\n","protected":false},"excerpt":{"rendered":"<p>The Nijhum HTML5 template&#8217;s default color mode is Dark. To make it in the Light mode you just need a single simple touch in the main stylesheet (style.css) file. Just open style.css file in a code editor and find the :root selector. Find the \/* Default Colors &#8211; Mode *\/ and replace those 7 lines [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[15],"doc_tag":[],"class_list":["post-623","docs","type-docs","status-publish","hentry","doc_category-customization"],"_links":{"self":[{"href":"https:\/\/priyodesign.com\/docs\/nijhum\/html\/wp-json\/wp\/v2\/docs\/623","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/priyodesign.com\/docs\/nijhum\/html\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/priyodesign.com\/docs\/nijhum\/html\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/priyodesign.com\/docs\/nijhum\/html\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/priyodesign.com\/docs\/nijhum\/html\/wp-json\/wp\/v2\/comments?post=623"}],"version-history":[{"count":12,"href":"https:\/\/priyodesign.com\/docs\/nijhum\/html\/wp-json\/wp\/v2\/docs\/623\/revisions"}],"predecessor-version":[{"id":779,"href":"https:\/\/priyodesign.com\/docs\/nijhum\/html\/wp-json\/wp\/v2\/docs\/623\/revisions\/779"}],"wp:attachment":[{"href":"https:\/\/priyodesign.com\/docs\/nijhum\/html\/wp-json\/wp\/v2\/media?parent=623"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/priyodesign.com\/docs\/nijhum\/html\/wp-json\/wp\/v2\/doc_category?post=623"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/priyodesign.com\/docs\/nijhum\/html\/wp-json\/wp\/v2\/doc_tag?post=623"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}