Day/Night switch css solution

Kirby 2 Solved ✅
1

Hi

I’m looking for a good solution to switch day/night css class with Kirby. The problem is to save the user setting without Database or JS. I already tried a Javascript way but the css is loaded after the dom is ready.

So do you have any advices to achieve this?

<div class="day_night">🔌</div>

2

You could store it in a cookie.

3

Yes but I don’t have any knowledge about how cookies are working. After searching in the forum, I tried to start by a php else/if statement I found here.

 <body class="<?php if(!cookie::exists('accepted')): ?>
                 day
                 <?php else(cookie::set('accepted', 'true', 1440*365)): ?>
                 night
                 <?php endif ?>
                 ">

But I don’t know how to activate it (by JS I suppose) by clicking <button class="daynight" onclick="daynight()">🔌</button>

4

Yes, your script has to set the set the cookie when the button is clicked.

Here is some years’ old example code, maybe it helps you getting started:

Button:

<button type="button" class="changeview"><?php echo l::get('view'); ?></button>

Template:

if(cookie::get('view') == 'carousel') { 
  snippet('concept-carousel');
}
else {
  snippet('concept-list');
} ?>

Script:

    $('.changeview').click(function(){
       
        if($.cookie("view") == 'carousel') {
            $.cookie('view', 'list', {path: '/'});

             $('.carousel-caption').each(function() {
                    $(this).insertBefore( $(this).prev('.screenshot') );
                    });        
        }else{
            $('.screenshot').each(function() {
                    $(this).insertBefore( $(this).prev('.carousel-caption') );
                    }); 
            $.cookie('view', 'carousel', {path: '/'});
        }
    });
5

Thank you very much for this, I could start something, including the cookie.js plugin, the switch function is running, but when the page is refreshed, the style is “blinking” as if it comes after the dom

EDIT (after research on Stackoverflow)

The button

<button type="button" id="switch">🔌</button>

The body class

<body class="<?php if(cookie::get('highcontrast') == 'yes') { echo 'highcontrast';} ?>">

The JS :

$(function() {
   // Check (onLoad) if the cookie is there and set the class if it is
    if ($.cookie('highcontrast') == "yes") {
        $("body").addClass("highcontrast");
    }

    // When the span is clicked
    $("#switch").click(function () {
        // Check the current cookie value
        // If the cookie is empty or set to no, then add highcontrast
        if ($.cookie('highcontrast') == "undefined" || $.cookie('highcontrast') == "no") {
            // Set cookie value to yes
            $.cookie('highcontrast','yes', {expires: 7, path: '/'});
            // Add the class to the body
            $("body").addClass("highcontrast");
        }
        // If the cookie was already set to yes then remove it
        else {
            $.cookie('highcontrast','no',  {expires: 7, path: '/'});
            $("body").removeClass("highcontrast");
        }
    }); 
 });

Now, the toggleClass is working, the cookie is saved, but the style is “blinking” on page load, as if it comes after (btw if I remove the <?php if(cookie::get('highcontrast') == 'yes') { echo 'highcontrast';} ?> line it is the same thing).

6

Ok, I simply changed the template into <body class="<?php if(a::get($_COOKIE, 'highcontrast') == 'yes') { echo 'highcontrast';} ?>"> and removed these lines :

 // Check (onLoad) if the cookie is there and set the class if it is
    if ($.cookie('highcontrast') == "yes") {
        $("body").addClass("highcontrast");
    }

And this is working very fine. If anyone finds a better way, don’t hesitate !