How to enable dark mode in shopify admin even before they release that feature in 2022

Step 1 : Download Chrome Addon User JavaScript and CSS

Step 2 : Open your shopify admin

Step 3: Click Addon icon,

Step 4: Add the following JavaScript into JS Editor.

[...document.querySelectorAll("*[p-color-scheme]")].forEach(function(obj){
    obj.setAttribute('p-color-scheme', 'dark');
});

Step 5: Add these two lines in CSS Editor.

#AppFrameMain [data-polaris-layer='true'] section{background-color:var(--p-background)}
#AppFrameMain [data-polaris-layer='true'] button{background-color:var(--p-background)}

Step 6: Reload your Shopify Admin

So, what does this javascript do?

  • document.querySelectorAll(“*[p-color-scheme]”) look into all DOM elements with attribute p-color-scheme.
  • So, we get all DOM Elements NodeList returned by querySelectorAll.
  • To iterate all elements, we need to convert NodeList to Array by ES6, spread operator. […Variable].
  • Once NodeList becomes an array we can use JavaScript ForEach method to loop through all objects.
  • Finally set dom element attribute p-color-scheme = ‘dark’ with code obj.setAttribute(‘p-color-scheme’, ‘dark’);

So, what does this css do?

  • We found certain DOM nodes like <section> and <button> which hardcoded white background.
  • Replace those HTML elements CSS background with shopify background color for dark scheme var(–p-background).
Total
0
Shares
Leave a Reply

Your email address will not be published.

 
Previous Post

jQuery live() shim for jquery-migrate 3+

Next Post

JavaScript Interview Question : Explain JavaScript Currying with Example

Related Posts