0

I am trying to implement a Dark/Light theme switcher in my code. I have got the switcher working but now need a cookie to be set/swapped when the user sets the theme.

Here is my code

$(document).ready(function()
{
    $(".light-theme").click(function()
    {
        $("body").removeClass();
        $(this).addClass("current");
        $(".dark-theme").removeClass("current");
        $(".light-theme a i").removeClass("icon-circle").addClass("icon-circle-ticked");
        $(".dark-theme a i").removeClass("icon-circle-ticked").addClass("icon-circle");
        $.removeCookie('dark-theme'), { path: '/' };
        $.cookie('theme', 'light-theme', { expires: 365, path: '/' });
    })
});
$(document).ready(function()
{
    $(".dark-theme").click(function()
    {
        $("body").removeClass().addClass('dark');
        $(this).addClass("current");
        $(".light-theme").removeClass("current");
        $(".dark-theme a i").removeClass("icon-circle").addClass("icon-circle-ticked");
        $(".light-theme a i").removeClass("icon-circle-ticked").addClass("icon-circle");
        $.removeCookie('light-theme', { path: '/' });
        $.cookie('theme', 'dark-theme', { expires: 365, path: '/' });
    })
});
$(document).ready(function()
{
if ($.cookie('theme')=='dark-theme') {
    $('body').removeClass().addClass('dark');
    $(".light-theme").removeClass("current");
        $(".dark-theme a i").removeClass("icon-circle").addClass("icon-circle-ticked");
        $(".light-theme a i").removeClass("icon-circle-ticked").addClass("icon-circle");
}

if ($.cookie('theme')=='light-theme') {
    $('body').removeClass().addClass('light');
    $(".dark-theme").removeClass("current");
        $(".light-theme a i").removeClass("icon-circle").addClass("icon-circle-ticked");
        $(".dark-theme a i").removeClass("icon-circle-ticked").addClass("icon-circle");
}
    });

It works fine on desktop but not on mobile. If I select the dark theme, it doesn't stick at all and resets back to the default on refresh.

Joseph
  • 73
  • 6
  • I have now got it working somewhat. It appears to work on desktop browsers. But it's not working on my iPhone. Could someone please offer some guidance, I would be most appreciative. I have edited the post above. – Joseph May 04 '16 at 11:11
  • Possible duplicate of [iPhone/iPad WebApps don't allow cookies?](http://stackoverflow.com/questions/4904334/iphone-ipad-webapps-dont-allow-cookies) – Marcos Pérez Gude May 04 '16 at 11:28
  • And: https://www.google.es/search?q=jquery+cookie+ios+problem&ie=utf-8&oe=utf-8&gws_rd=cr&ei=sdwpV_jfBeaegAaL_7DIDA – Marcos Pérez Gude May 04 '16 at 11:28
  • I have looked at every page on that Google search result, and also followed the recommended thoughts in about UIWebviews. It is not a web app but a normal website (not using apple-mobile-web-app-capable). I can't believe it's so hard to implement a cookie for a theme switcher, or a solution to this issue online, despite my limited javascript knowledge. – Joseph May 04 '16 at 12:31
  • Manage cookies with js can cause unexpected results. Better if you use localstorage interface. That's easy to use and ready to use, no plugins needed, and compatible with all browsers (mobile and desktop). Just use `window.localStorage.getItem("item")` and `window.localStorage.setItem("item", "value");` – Marcos Pérez Gude May 04 '16 at 13:21
  • Thank you very much. Would you mind helping me with this, in terms of incorporating it into the code I posted above? Trying to find a tutorial which suits this particular implementation is tricky. – Joseph May 04 '16 at 13:42
  • You only need to change the `$.cookie` statements with the `window.localStorage` statements. It only has `setItem(item, value)` and `getItem(item)` and `removeItem(item)` methods, as well `clear()` to remove all items. – Marcos Pérez Gude May 04 '16 at 13:54
  • Thanks so much, I have managed to get it to work! :-) – Joseph May 04 '16 at 14:29
  • If you have a specific problem ask it and we try to solve as soon as possible ! Good luck! – Marcos Pérez Gude May 04 '16 at 14:32

0 Answers0