Canvas Theme + Python: Remember Dark Mode

StuJan 5, 2022

I'm currently having an issue where I am trying to have the page remember that the site is in dark mode when it is toggled. I do not want to set the entire site to dark mode, but rather it be selected from the user. So if they want to opt for light or dark mode, it is available.

Whenever I toggle dark mode and refresh the page or go to a different part of the site, like the Post Page, it reverts back to light mode.

My site is currently in development, but here is the code.

custom.js

// Current Date
var weekday = ["Sun","Mon","Tues","Wed","Thurs","Fri","Sat"],
	month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
	a = new Date();

jQuery('.divider-text').html( weekday[a.getDay()] + ', ' + month[a.getMonth()] + ' ' + a.getDate() );

jQuery('.dark-mode').on( 'click', function() {
    jQuery("body").toggleClass('dark');
    SEMICOLON.header.logo();
    Cookies.set('canvas-color-scheme', 'dark');
    return false;
});

if( Cookies.get('canvas-color-scheme') == 'dark' ) {
	jQuery('body').addClass( 'dark' );
	SEMICOLON.header.logo();
}

base.html

{% load static wagtailimages_tags wagtailcore_tags wagtailuserbar %}

<!DOCTYPE html>
<html class="no-js" lang="en-US">
    <head>
        <meta charset="utf-8" />

        <!-- Document Title
	    ============================================= -->
        <title>
            {% block title %}
                {% if self.seo_title %}{{ self.seo_title }}{% else %}{{ self.title }}{% endif %}
            {% endblock %}
            {% block title_suffix %}
                {% with self.get_site.site_name as site_name %}
                    {% if site_name %}- {{ site_name }}{% endif %}
                {% endwith %} 
            {% endblock %}
        </title>

        <meta name="description" content="" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        {# Canonical URL #}
        {% if page.canonical_url %}
            <link rel="canonical" href="{{ page.canonical_url }}"/>
        {% endif %}

        <!-- Stylesheets
	    ============================================= -->
        {# Global stylesheets #}
        <link rel="stylesheet" type="text/css" href="{% static 'css/vendor/bootstrap.css' %}">
        <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
        <link rel="stylesheet" type="text/css" href="{% static 'css/dark.css' %}">

        {% image settings.site_settings.GeneralSettings.site_icon original as site_icon %}
        {% if settings.site_settings.GeneralSettings.site_icon %}
            <link rel="icon" type="image/png" href="{{ site_icon.url }}">
        {% endif %}

        {# Canvas stylesheet #}
        <link href="https://fonts.googleapis.com/css2?family=Domine:wght@400;500;700&family=Roboto:wght@400;500&display=swap" rel="stylesheet">

        <link rel="stylesheet" type="text/css" href="{% static 'css/vendor/font-icons.css' %}">
        <link rel="stylesheet" type="text/css" href="{% static 'css/vendor/animate.css' %}">
        <link rel="stylesheet" type="text/css" href="{% static 'css/vendor/magnific-popup.css' %}">

        <!-- Blog Page Specific Stylesheet -->
        <link rel="stylesheet" type="text/css" href="{% static 'css/blog/fonts.css' %}">
        <link rel="stylesheet" type="text/css" href="{% static 'css/blog/blog.css' %}">

        <link rel="stylesheet" type="text/css" href="{% static 'css/vendor/colorsf210.css?color=F39887' %}" />

        {% block extra_css %}
            {# Override this in templates to add extra stylesheets #}
        {% endblock %}
    </head>

    <!-- BODY
	============================================= -->
    <body class="stretched search-overlay">
        
        <!-- Document Wrapper
        ============================================= -->
        <div id="wrapper" class="clearfix">

            {% wagtailuserbar %}

            {% include 'components/navbar.html' %}

            {% block content %}{% endblock %}

            {% include 'components/footer.html' %}

        </div><!-- #wrapper end -->

        <!-- Go To Top
        ============================================= -->
        <div id="gotoTop" class="icon-angle-up rounded-circle" style="left: 30px; right: auto;"></div>

        <!-- JavaScripts
	    ============================================= -->
        {# Global javascript #}
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
        
        {# Canvas javascript #}
        <script src="https://code.jquery.com/jquery-3.6.0.js" crossorigin="anonymous"></script>
        <script type="text/javascript" src="{% static 'js/plugins.min.js' %}"></script>

        <!-- Footer Scripts
        ============================================= -->
        <script type="text/javascript" src="{% static 'js/functions.js' %}"></script>
        <script type="text/javascript" src="{% static 'js/custom.js' %}"></script>
            
        <!-- ADD-ONS JS FILES -->
        {% block extra_js %}
            
            {# Override this in templates to add extra javascript #}

        {% endblock %}
    </body>
</html>

blog_page.html

{% extends "base.html" %}

{% load wagtailcore_tags wagtailimages_tags blogapp_tags %}

{% block content %}

<!-- Page Title
============================================= -->
{% image page.banner_image original as banner_image %}
<section id="page-title" class="page-title-center" style="background-image: url('{{ banner_image.url }}');">

	<div class="container" id="blog-title">
		<h1>{{ page.title }}</h1>
		<span>{{ page.description }}</span>
	</div>

</section><!-- #page-title end -->

{% include 'blog/components/search_results.html' %}

<!-- Content
============================================= -->
<section id="content">

	<div class="content-wrap pt-0 pt-sm-6">
		
		<div class="container">

			{% include "blog/components/blog_sidebar.html" %}

				<div class="col-lg-9 mt-5 mt-lg-0">
					<div class="d-flex">
						<div class="flex-grow-1">
							<h3>All {{ page.title }} Posts</h3>
						</div>

						<div>
							Example single danger button 
							<div class="btn-group">
								<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Most Popular</button>
								<div class="dropdown-menu">
									<a class="dropdown-item" href="#">Latest Posts</a>
									<a class="dropdown-item" href="#">Most Comments</a>
								</div>
							</div>
						</div>
					</div>
					
					{% for post in posts %} 
					<!-- Post List -->
					<div class="row col-mb-50 posts-md">
						<div class="col-md-9"> <!-- This will change the size -->
							<article class="entry">

								<!-- Image -->
								<div class="entry-image mb-3">
									{% if post.header_image %}
										{% image post.header_image original as header_image %}
										<a href="{% post_page_date_slug_url post blog_page %}">
											<img src="{{ header_image.url }}" alt="">
										</a>
									{% endif %}
								</div>
								<!-- Image End -->

								<!-- Title -->
								<div class="entry-title title-sm">
									<div class="entry-categories"><a href="demo-blog-categories.html">Arts & Culture</a></div>
									<h3><a href="{% post_page_date_slug_url post blog_page %}" class="color-underline stretched-link">{{ post.title }}</a></h3>
								</div>
								<!-- Title End -->
								
								<!-- Published Date -->
								<div class="entry-meta">
									<ul>
										<li>{{ post.post_date }}</li>
									</ul>
								</div>
								<!-- Published Date End -->

								<!-- Description & Read More -->
								<div class="entry-content mt-3">
									<p>{{ post.description|truncatewords:25 }}</p>
									<a href="{% post_page_date_slug_url post blog_page %}" class="more-link" style="margin-bottom:2em;" >Read More &rarr;</a>
								</div>
								<!-- Description & Read End -->

							</article>
							
						</div> <!-- Post List End -->
						
					</div>{% endfor %}
					

					
					{# Pagination #}
					{# https://docs.djangoproject.com/en/3.1/topics/pagination/#paginating-a-listview #} 

					<!-- PREVIOUS -->
					<div>
						<ul class="pagination" style="margin-left:0em;">
							{% if posts.has_previous %} 
								<li class="page-item">
									<a href="{% url_replace request page=posts.previous_page_number %}" class="page-link"> 
										Previous
									</a> 
								</li>
							{% else %}
								<li class="page-item disabled">
									<a href="#" class="page-link">
										Previous
									</a> 
								</li>
							{% endif %}

					<!-- PAGE NUMBER -->
							{% for page_num in posts.paginator.page_range %}
							<li class="page-item {% if page_num == posts.number %} active{% endif %}">
								<a href="?page={{ page_num }}" class="page-link">
								{{ page_num }}
								</a>
							</li>
							{% endfor %}

						<!-- NEXT -->
							{% if posts.has_next %} 
								<li class="page-item">
									<a href="{% url_replace request page=posts.next_page_number %}" class="page-link"> 
										Next
									</a> 
								</li>
							{% else %}
								<li class="page-item disabled">
									<a href="#" class="page-link">
										Next
									</a> 
								</li>
							{% endif %} 
						</ul>

				</div>
			</div>
			<!-- Single Page Categories End -->

		</div>
	</div>
</section><!-- #content end -->

{% endblock %}

SemiColonWebSTAFFJan 6, 2022

Hello,

Based on the Codes posted here, this should work fine. However, it's hard to tell what is going wrong without actually checking it online. Can you please provide us with a Live URL so that we can check out the exact issue and provide you with more assistance on this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.