Canvas Support

Dark theme toggle with cookie?

3 replies·opened Oct 17, 2021
R
rezn8dOct 17, 2021

Is there a way to create and recall a site preference cookie to remember a user's dark or light theme?

I am using a "Turn the Lights Off" button on the navigation bar to toggle a users dark or light theme settings and would like to set a cookie to remember:

<body class="stretched adaptive-color-scheme">

<li class="menu-item">
    <a href="#" class="icon-stacked rounded-circle text-center mb-0 btn-hover h5" title="" id="theme-setting"></a>
</li>

Here is the jQuery toggle:

// DARK & LIGHT BULB SITE SETTINGS

// GET DEFAULT THEME FROM ADAPTIVE-COLOR-SCHEME
var toggle = $('#theme-setting');
if ($('body').hasClass('dark')) {
  toggle.addClass('bg-dark text-white dark-theme').attr('title','Change to Light Theme');
  $('<i class="icon-lightbulb"></i>').appendTo(toggle);
} else {
  toggle.addClass('bg-light text-dark light-theme').attr('title','Change to Dark Theme');
  $('<i class="icon-lightbulb1"></i>').appendTo(toggle);
}

// OVERRIDE ADAPTIVE-COLOR-SCHEME ON CLICK
toggle.click(function(e) {
  e.preventDefault();
  if ($(this).hasClass('light-theme')) {
    $(this).removeClass('bg-light text-dark light-theme').addClass('bg-dark text-white dark-theme').attr('title','Change to Light Theme').html('<i class="icon-lightbulb"></i>');
    $('body').addClass('dark');
  } else {
    $(this).removeClass('bg-dark text-white dark-theme').addClass('bg-light text-dark light-theme').attr('title','Change to Dark Theme').html('<i class="icon-lightbulb1"></i>');
    $('body').removeClass('dark');
  }
});

How can I store and recall a user's theme choice and override "adaptive-color-scheme" using a cookie?

S
SemiColonWebSTAFFOct 18, 2021

Hello,

This is Definitely Possible but requires Customization. You can consider setting a Cookie for the User after he clicks the "Switch to Dark Scheme" Button, using the following JS Code:

Cookies.set('canvas-color-scheme', 'dark');

and then add the following code to check the Color Scheme and set it accordingly:

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

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

R
rezn8dOct 19, 2021

THANK YOU!

I actually added this to the GDPR lightbox instead:

<li class="menu-item">
    <a href="#gdpr-preferences" class="menu-link" data-lightbox="inline">Preferences</a>
</li>

<li class="list-group-item px-0 py-4">
	<div class="row">
		<div class="col">
			<div class="toggle mb-0">
				<div class="toggle-header">
					<div class="toggle-icon">
						<i class="toggle-closed icon-line-plus"></i>
						<i class="toggle-open icon-line-minus"></i>
					</div>
					<div class="toggle-title">
						Dark Mode <small>(Theme Setting)</small>
					</div>
				</div>
				<div class="toggle-content ps-4">
					Do you want to turn out the lights? Click the switch to permanently set the site to our dark theme! When you visit our website a cookie (called "canvas-color-scheme") may be placed in your browser. This cookie is used only to determine your theme preference.
				</div>
			</div>
		</div>
		<div class="col-auto text-end">
			<div class="switch d-inline-block">
				<input id="switch-theme" class="switch-toggle switch-toggle-flat switch-flat-mini" type="checkbox" data-cookie-name="canvas-color-scheme">
				<label class="m-0" for="switch-theme"></label>
			</div>
		</div>
	</div>
</li>

if( Cookies.get('canvas-color-scheme') == '1' ) {
  $('body').addClass( 'dark' );
}
S
SemiColonWebSTAFFOct 21, 2021

Hello,

Glad your issue was resolved.

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