Hey everyone! In this video, I’m going to show you how to add Dark Mode in Dawn Theme Shopify without APP. I hope you find this video helpful. If you do, please don’t forget to give it a thumbs up and subscribe to my channel for more videos like this.
In this video, I’m going to show you how to add dark mode to your Dawn theme Shopify store without using the APP. So if you’re someone who doesn’t want to install the APP, or you don’t have the privilege to install the APP, then this is the video for you. So let’s get started.
Add jQuery in Theme
Add following code in theme.liquid file under <head> tag
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>announcement-bar.liquid
Add the following code in line no. 10 of the announcement-bar.liquid
<a href="#" class="darkmode-button" id="dmbutton">Dark Mode</a>header.liquid
Replace following code in the header.liquid file on line no.381
class: 'header__heading-logo'With this code
class: 'header__heading-logo light-logo'Add the following code on line no. 383 after replacing the Image URL with your own logo URL
<img src="https://cdn.shopify.com/s/files/1/0601/0185/3358/files/logo-for-dark.png?v=1664022852" class="header__heading-logo dark-logo" style="display:none;">global.js
Add the following code at the bottom of global.js file
var $dark = $('.header-wrapper')
if (localStorage.getItem('darkmode') === 'true') {
//code by WebSensePro.com
$dark.addClass('dark-header');
$('.price-item--regular,p,h1,h2,h3,h4,h5,h6,ul,li,a,span,.footer__copyright.copyright__content a:hover,.footer__copyright,.header__icons.header__icon svg,.header__inline-menu.list-menu--inlineli.header__menu-item.header__active-menu-item, .header__inline-menu.list-menu--inlineli.header__menu-item,.header-wrapper.header.header__heading span,.card-wrapper.card__content.card-information.price, .card-wrapper.card__content.card__heading,.announcement-bar .announcement-bar__message, .icon-caret, .form__label, .product-form__input, .accordion .icon-accordion, .cart-notification-product__name, .cart-items').addClass('light-text');
$('.color-background-2, .video-section__media, .gradient, .product-form__submit, #cart-notification-button').addClass('dark-background');
$('.darkmode-button').addClass('darkmode-button-light');
$('.light-logo').addClass('logo-hide');
$('.dark-logo').addClass('logo-display');
}
$('.darkmode-button').click(function() {
$dark.toggleClass('dark-header');
$('.price-item--regular,p,h1,h2,h3,h4,h5,h6,ul,li,a,span,.footer__copyright.copyright__content a:hover,.footer__copyright,.header__icons.header__icon svg,.header__inline-menu.list-menu--inlineli.header__menu-item.header__active-menu-item, .header__inline-menu.list-menu--inlineli.header__menu-item,.header-wrapper.header.header__heading span,.card-wrapper.card__content.card-information.price, .card-wrapper.card__content.card__heading,.announcement-bar .announcement-bar__message, .icon-caret, .form__label, .product-form__input, .accordion .icon-accordion, .cart-notification-product__name, .cart-items').toggleClass('light-text');
$('.color-background-2, .video-section__media, .gradient, .product-form__submit, #cart-notification-button').toggleClass('dark-background');
$('.darkmode-button').toggleClass('darkmode-button-light');
$('.light-logo').toggleClass('logo-hide');
$('.dark-logo').toggleClass('logo-display');
localStorage.setItem('darkmode', $dark.hasClass('dark-header'));
});
$('#dmbutton').click(function() {
if (localStorage.getItem('darkmode') === 'true') {
$('#dmbutton').text('Light Mode');
}
else {
$('#dmbutton').text('Dark Mode');
}
});
$( document ).ready(function() {
if (localStorage.getItem('darkmode') === 'true') {
$('#dmbutton').text('Light Mode');
}
else {
$('#dmbutton').text('Dark Mode');
}
});base.css
Add the following code at the bottom of base.css file
.dark-header {
background-color: #323232 !important;
}
.dark-background {
background-color: #323232 !important;
}
.light-text {
color:#fff !important;
}
.darkmode-button{
position: fixed;
bottom: 100px;
right: 100px;
background-color: #323232;
padding: 10px;
border-radius: 10px;
color: #fff;
}
.darkmode-button-light {
background-color: #fff !important;
color: #323232 !important;
}
.logo-hide {
display:none;
}
.logo-display {
display:block !important;
}
