Toggling between themes (light/dark stylesheets)

Mirokuwu · ‎03-01-2022

I make a new stylesheet in the Assets category:

"zz-mode-example.css"

I need to point to this stylesheet with href here:

<link id="theme" rel="stylesheet"
type="text/css" href="zz-mode-example.css" />

what do I put in href="_____________________"

-----------

<body>

<button class="mode-dark-button" onclick="toggleTheme('zz-mode-dark.css')">
Dark
</button>

<button class="mode-light-button" onclick="toggleTheme('zz-mode-light.css')">
Light
</button>

<button class="mode-brown-button" onclick="toggleTheme('zz-mode-brown.css')">
Brown
</button>

</body>

LitExtension · ‎03-02-2022

Hi @Mirokuwu,

If you want to get CSS file in Assets you can use following code:

<link id="theme" rel="stylesheet" type="text/css" href="{{ 'zz-mode-example.css' | asset_url }}" />

Hope it helps!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

AiphaTech · ‎09-30-2024

Hi Mirokuwu,

NightTheme makes it easy to add dark mode to your Shopify store, keeping customers engaged even in low light.

Why Choose NightTheme?

Boost Retention: 📈 Keep customers engaged longer.
Easy Setup: ⚙️ Quick configuration and customization.
Seamless Transitions: 💨 Enjoy smooth navigation without flickering.
Auto Theme Detection: 🖥️ Adapts to users' preferences for a perfect fit.

🚀 Don’t miss out—install NightTheme today and enhance your customers’ shopping experience! 🔗 Try it now!

Toggling between themes (light/dark stylesheets)

Toggling between themes (light/dark stylesheets)

Community Blog Articles