Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!


CSS Style Switcher + Poll
New on LowEndTalk? Please Register and read our Community Rules.

All new Registrations are manually reviewed and approved, so a short delay after registration may occur before your account becomes active.

CSS Style Switcher + Poll

RaymiiRaymii Member
edited July 2014 in General

I've been working on a Solarized Dark version of my website, demo here: http://vps3.sparklingclouds.nl/s/index.html vs https://raymii.org.

I'm now looking for a simple way to let a visitor select the style for the website. Since I have a static website it should work with CSS/Javascript only.

I've tried multiple tutorials, about.com, paul's something and another one, but all of them don't work...

Any tips?

Also, please let me know which theme you like better.

Dark or Light
  1. Which theme do you like more24 votes
    1. Dark
      45.83%
    2. Light
      54.17%

Comments

  • cassacassa Member

    You could try looking at http://github.com/botox/serverstatus, he has an switcher in his script. I like the current one

  • Surely you could just use javascript to dynamically load the CSS style sheet? Using a switcher you could use the localStorage feature to save their selection and then remember that when the sites loaded?

  • InfinityInfinity Member, Host Rep

    The way that I've done it in the past is if one is selected store in a cookie and just have a simple little PHP script with switch case based on what is stored in the cookie and that edits the string on which stylesheet is selected. Shouldn't be hard, something dynamic not requiring a page refresh will be a bit harder.

  • [stackoverflow.com/questions/3498647/jquery-loading-css-on-demand-callback-if-done/17858428#17858428](jQuery will do it pretty easily (but not in a nice way to read)).

    Here it is in CoffeeScript because I can't sleep.

    $.extend {
      getManyCss: (urls, callback, nocache) ->
        if typeof nocache == 'undefined' then nocache = false
        $.when(
          $.each urls, (i, url) ->
            if nocache then url += "?ts=#{new Date.getTime()}"
            $.get url, ->
              $('link', { rel: 'stylesheet', type: 'text/css', href: url}).appendTo 'head'
          ).then ->
          if typeof callback == 'function' then callback()
    }
    
    #usage
    $.getManyCss cssfiles, -> console.log 'all css loaded', true

    the logic isn't too bad. you could also do it without jQuery but it's not worth making it all cross browser compatible.

  • RaymiiRaymii Member

    Well, after a bit of work I've rolled out the dark style, plus a style chooser:

    image

    https://raymii.org

Sign In or Register to comment.