Tim Pietrusky

Switch $this theme

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?

November 14, 2012

Comments