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

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