Adding Dark Mode in Dawn Theme Shopify – Without APP

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;
}
3.5/5 - (21 votes)

About

Leave a Comment

Your email address will not be published. Required fields are marked *