Switch $this theme

November 13th, 2012

Just a quick way to change the theme of my page if you fucking hate it. And I bet you do!

How to change?

You can use the button in the top right corner to switch the theme.

HTML


<button role="switch" data-theme="black-white">FUCK¥πΨ</button>

This will add the class black-white to the body (#wtf-dude) which overwrites the default theme.

CSS


#wtf-dude.black-white {
    background-image:none;
}

#wtf-dude.black-white * {
    transition:none;
    animation:none;
    transform:none;
    box-shadow:none;
    border-color:rgba(255, 255, 255, .55);
    opacity:1;
}

localStorage

The selected theme is saved on the client-side by using the HTML5 localStorage API!

JavaScript


if (localStorage != undefined) {
  localStorage.setItem('theme', document.body.className);
}

developer.mozilla.org/en-US/docs/DOM/Storage#localStorage

What will change?

All of the following CSS stuff will be removed in the black-white theme:

  • animation
  • transition
  • transform
  • box-shadow
  • background-color

Why are you doing this?

I got some critique saying that my page is overloaded with shit and colors.

dsieg1: This site makes want to vomit up my intestines.

reddit.com/r/webdev/comments/134ckj/the_checkbox_hack_is_not_working_on_older_ios_and/c70psl5

Anon: How about something not designed for 2-5 year olds? I feel like I'm learning about shapes and colors here.

timpietrusky.com/advanced-checkbox-hack#comment-70973525

So?

I think the black-white theme is ok for now. You can use my page and read the articles without colorfull animations. No stuff flying around and no flashing.

So what do you think?