Canvas Theme + Python: Remember Dark Mode

1 reply · opened Jan 5, 2022

SStuJan 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 %}

    
        

        
        
            {% 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 %}
        

        
        

        {# Canonical URL #}
        {% if page.canonical_url %}
            
- 
        {% endif %}

        
        {# Global stylesheets #}
        
- 
        
- 
        
- 

        {% image settings.site_settings.GeneralSettings.site_icon original as site_icon %}
        {% if settings.site_settings.GeneralSettings.site_icon %}
            
- 
        {% endif %}

        {# Canvas stylesheet #}
        
- 

        
- 
        
- 
        
- 

        
        
- 
        
- 

        
- 

        {% block extra_css %}
            {# Override this in templates to add extra stylesheets #}
        {% endblock %}
    

    
    
        
        
        

            {% wagtailuserbar %}

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

            {% block content %}{% endblock %}

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

        

        
        

        
        {# Global javascript #}
        
        
        {# Canvas javascript #}
        
        

        
        
        
            
        
        {% block extra_js %}
            
            {# Override this in templates to add extra javascript #}

        {% endblock %}
    

blog_page.html

{% extends "base.html" %}

{% load wagtailcore_tags wagtailimages_tags blogapp_tags %}

{% block content %}

{% image page.banner_image original as banner_image %}

	
		{{ page.title }}
		{{ page.description }}
	

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

	
		
		

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

				
					
						
							All {{ page.title }} Posts
						

						
							Example single danger button 
							
								Most Popular
								
									[Latest Posts](#)
									[Most Comments](#)
								
							
						
					
					
					{% for post in posts %} 
					
					
						 
							

								
								
									{% if post.header_image %}
										{% image post.header_image original as header_image %}
										[
											
![attachment]({{ header_image.url }})

										]({% post_page_date_slug_url post blog_page %})
									{% endif %}
								
								

								
								
									[Arts & Culture](demo-blog-categories.html)
									[{{ post.title }}]({% post_page_date_slug_url post blog_page %})
								
								
								
								
								
									
										
- {{ post.post_date }}
									
								
								

								
								
									
{{ post.description|truncatewords:25 }}

									[Read More →]({% post_page_date_slug_url post blog_page %})
								
								

							
							
						 
						
					{% endfor %}
					

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

					
					
						
							{% if posts.has_previous %} 
								
- 
									[ 
										Previous
									]({% url_replace request page=posts.previous_page_number %}) 
								
							{% else %}
								
- 
									[
										Previous
									](#) 
								
							{% endif %}

					
							{% for page_num in posts.paginator.page_range %}
							
- 
								[
								{{ page_num }}
								](?page={{ page_num }})
							
							{% endfor %}

						
							{% if posts.has_next %} 
								
- 
									[ 
										Next
									]({% url_replace request page=posts.next_page_number %}) 
								
							{% else %}
								
- 
									[
										Next
									](#) 
								
							{% endif %} 
						

				
			
			

		
	

{% endblock %}
SSemicolon WebSTAFFJan 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.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard