1

I'm created two themes (light & dark) but I'm not sure how to set cookies so the theme will remain constant when the user navigates from page-to-page or comes back to the site next week. Is there a simple script I can add to my existing code?

HTML

<html>
<head>
  <link id="lightTheme" rel="stylesheet" type="text/css" href="styleSheetLightTheme.css">
  <link id="darkTheme" rel="alternate stylesheet" type="text/css" href="styleSheetDarkTheme.css">
<script>
  function darkTheme() {
    var theme = document.getElementById('lightTheme');
    theme.href = "styleSheetDarkTheme.css";
  }

  function lightTheme() {
    var theme = document.getElementById('lightTheme');
    theme.href = "styleSheetLightTheme.css";
  }
</script>
</head>

<body>
<a href="#" onClick="darkTheme(); return false;">Dark Theme</a>
|
<a href="#" onClick="lightTheme(); return false;">Light Theme</a>
</body>
</html>

styleSheetDarkTheme.css

body {background-color: #333; font-family: verdana; color: #ccc;}
a:link, a:visited, a:active {color: #fff; text-decoration: none;}
a:hover {color: #0ff;}

styleSheetLightTheme.css

body {background-color: #eee; font-family: verdana; color: #333;}
a:link, a:visited, a:active {color: #000; text-decoration: none;}
a:hover {color: #0ff;}
Improve this question
1
  • This framework is pretty handy for managing cookies: github.com/js-cookie/js-cookie also, I hope you plan to conditionally load the styles depending on which theme is in use, rather than always loading them both :) saving bandwidth is always a good idea
    – admcfajn
    Commented Aug 15, 2018 at 19:21

2 Answers 2

Reset to default
1

Solution with cookie [wordpress]

You will need jQuery cookie plugin.
Create javascript file "themechanger.js":

(function($){

    var theme = $.cookie("styles");
    var themehref = document.getElementById(theme_styles.rel_id);

    setTheme = function(mode){
        if (theme == mode)
            return;
        if (mode == 'light') {
            $.cookie('styles', mode);
            themehref.href = theme_styles.light;
        }
        else if (mode == 'dark') {
            $.cookie('styles', mode);
            themehref.href = theme_styles.dark;
        }
    }
})(jQuery);

In functions.php enqueue styles and javascript:

add_action('init', 'load_styles', 15);
function load_styles() {

    $current_style = '/styleSheetLightTheme.css';
    if ( isset($_COOKIE['styles']) && $_COOKIE['styles'] == "dark")
        $current_style = '/styleSheetDarkTheme.css';
    wp_register_style( 'stylename', get_stylesheet_directory_uri() . $current_style );
    wp_enqueue_style( 'stylename');

    wp_enqueue_script( 'jquery_cookie', get_template_directory_uri() . '/js.cookie.js', ['jquery'] );
    wp_register_script( 'theme_script', get_template_directory_uri() . '/themechanger.js', ['jquery', 'jquery_cookie'] );
    //
    // object "theme_styles" will store links to style, used in javascript
    wp_localize_script( 'theme_script', 'theme_styles', [
        'light' => get_stylesheet_directory_uri() . '/styleSheetLightTheme.css',
        'dark' => get_stylesheet_directory_uri() . '/styleSheetDarkTheme.css',
        'rel_id' => 'stylename-css',
    ]);
    wp_enqueue_script('theme_script');
}

To change theme style use javascript function setTheme()

<a href="javascript:;" onClick="setTheme('dark'); return false;">Dark Theme</a><br>
<a href="javascript:;" onClick="setTheme('light'); return false;">Light Theme</a>

Local storage [for your code]:

<html>
<head>
  <link id="my_style" rel="stylesheet" type="text/css" href="styleSheetLightTheme.css">
</head>
<body>
    <script>
        var theme = localStorage.getItem('styles');
        var themehref = document.getElementById('my_style');
        var base_url = 'styleSheet{{mode}}.css';

        // default value
        if(!theme)
            localStorage.setItem('styles','light');

        if (theme == 'dark')
            themehref.href = base_url.replace('{{mode}}', 'DarkTheme');
        else
            themehref.href = base_url.replace('{{mode}}', "LightTheme");

        function setTheme(mode){
            if ( (mode != 'light' && mode != 'dark'))
                return;

            theme = localStorage.getItem('styles');
            // don't change if it's already active
            if (mode == theme)
                return;
            if (mode == 'light') {
                localStorage.setItem('styles', 'light');
                themehref.href = base_url.replace('{{mode}}', 'LightTheme');
            }
            else if (mode == 'dark') {
                localStorage.setItem('styles', 'dark');
                themehref.href = base_url.replace('{{mode}}', 'DarkTheme');
            }
        }
    </script>

    <a href="javascript:;" onClick="setTheme('dark'); return false;">Dark Theme</a>
    |
    <a href="javascript:;" onClick="setTheme('light'); return false;">Light Theme</a>
</body>
</html>
Improve this answer
0

You can use Local Storage. It is really simple to use and also pure JavaScript. Supported by all modern browsers (according to caniuse website).

You can use this code;

<script>
var theme_var = localStorage.getItem('styles');
var themehref = document.getElementById('lightTheme');

if(!theme_var) {
    localStorage.setItem('styles','lightTheme');
    themehref.href = "styleSheet"+localStorage.getItem('styles')+".css";
} else {
    themehref.href = "styleSheet"+theme_var+".css";
}

function setThemeItem(themevar){
    themehref.href = "styleSheet"+theme_var+".css";
    localStorage.setItem('styles',themevar);
}
</script>

//Usage
<a href="javascript:;" onClick="setThemeItem('darkTheme'); return false;">Dark Theme</a>
<a href="javascript:;" onClick="setThemeItem('lightTheme'); return false;">Light Theme</a>
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.