darmentrout/user-theme-example.html

## user-theme-example.html
<!DOCTYPE html>
<html lang="en" data-theme="green">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS Custom Properties Test</title>
    <!-- Assembled by Damion Armentrout, 2018. -->
    <style>
        /* HSL is cool. https://www.sarasoueidan.com/blog/hex-rgb-to-hsl/ */
        html {
            --hue: 257;
            --complimentary-hue: calc( var(--hue) - 180);
            --background: hsl(var(--hue), 26%, 50%);
            --button-background: hsla(var(--complimentary-hue), 26%, 50%, 0.99);
            /* alpha can't be 1 because chrome ::selection is fussy and semitransparent */
        }

        html[data-theme='green'] {
          --hue: 128;
          --fColor: #000;
          --bcolor: #fff;
        }

        html[data-theme='pink'] {
          --hue: 313;
          --fcolor: #fff;
          --bcolor: #000;
        }

        body {
            font-family: sans-serif;
            color: var(--fcolor);
            background-color: var(--background);
        }

        footer {
            text-align: center;
            padding: 20px;
        }

        button.theme-change {
            background: #ddd;
            border: 1px solid #999;
            padding: 10px 15px;
            border-radius: 5px;
            font-weight: bold;
            font-size: 1em;
            margin-right: 20px;
        }
        button.theme-change:focus {
            text-decoration: underline;
        }

        button span {
            border-radius: 100%;
            width: 15px;
            height: 15px;
            display: inline-block;
            position: relative;
            top: 3px;
        }
        #green span {
            background: #5ea167;
        }
        #pink span {
            background: #a05e92;
        }

        .wrapper {
            margin: 25px auto;
            width: 90%;
            padding: 10px 25px;
            font-size: 1.2em;
        }

        ::-moz-selection {
            color: var(--bcolor);
            background: var(--button-background); /* Gecko Browsers */
        }
        ::selection {
            color: var(--bcolor);
            background: var(--button-background); /* WebKit/Blink Browsers */
        }
    </style>
</head>
<body>

    <main class="wrapper">

        <h1>Header One</h1>

        <h2>Change Theme</h2>
        <p>This would be a good way to drive adoption of new sites through customization (e.g. intranet, knowledgebase). These buttons will change the theme colors and set a cookie to remember your preference.</p>
        <button id="green" class="theme-change">Green <span>&nbsp;</span></button>
        <button id="pink" class="theme-change">Pink <span>&nbsp;</span></button>
        <br>
        <br>

        <h2>Header Two A</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia quasi a molestias enim nemo magnam, soluta velit doloribus eum voluptatem, iure aliquam veniam. Repellat harum vel accusamus nemo consequatur velit iste, nihil vero sapiente ut. Quidem voluptatum iure, nemo asperiores.</p>
        <p>Obcaecati, ipsa! Accusamus tempora ipsum sapiente a, nesciunt molestias rerum, architecto, explicabo vitae aperiam accusantium delectus. Modi labore sunt rem mollitia aperiam, voluptatum at magni veritatis saepe maxime incidunt voluptates laboriosam repellat repudiandae, ducimus, nihil asperiores nostrum ut praesentium delectus.</p>
        <p>Eos voluptates cumque incidunt corporis tenetur. Ullam ipsam perferendis ratione, quas natus tenetur, molestiae, sint nostrum qui laudantium totam quae. Sint fugit fugiat tempora recusandae dolore totam. Ut ullam minima beatae qui, ratione veritatis, enim, consequatur eaque minus quasi eveniet.</p>

        <h2>Header Two B</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit fugit officiis, autem reiciendis! Incidunt molestiae reiciendis quidem neque iste laboriosam enim, dicta assumenda exercitationem at.</p>
        <ul>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt.</li>
            <li>Modi provident culpa aperiam maxime, quod delectus ut alias.</li>
            <li>Dolor enim iusto nam ipsa, ipsum magnam nisi et!</li>
            <li>Praesentium sed sint iure amet ullam sequi, veniam recusandae.</li>
            <li>Vel perspiciatis iste optio omnis asperiores! Assumenda, ex, earum!</li>
        </ul>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non earum modi cupiditate cum magnam neque voluptate dolore unde, quis? Repudiandae perspiciatis illum molestias sit provident magnam architecto ipsum, rerum. Qui!</p>

    </main>

    <footer>
        <p>Code snippets are &copy; their respective authors.</p>
    </footer>

<script>
    var list = document.querySelectorAll('.theme-change');
    for( var item of list ){
        item.onclick = function(){
            document.getElementsByTagName('html')[0].setAttribute( 'data-theme', this.id );
            setCookie('theme',this.id,7);
        }
    }

    // https://stackoverflow.com/a/24103596/9979149
    function setCookie(name,value,days) {
        var expires = "";
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days*24*60*60*1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + (value || "")  + expires + "; path=/";
    }
    function getCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for(var i=0;i < ca.length;i++) {
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1,c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
        }
        return null;
    }
    function eraseCookie(name) {
        document.cookie = name+'=; Max-Age=-99999999;';
    }

    // setCookie('theme','testcookie',7);

    var x = getCookie('theme');
    if (x) {
        document.getElementsByTagName('html')[0].setAttribute( 'data-theme', x );
    }
</script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en" data-theme="green">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>CSS Custom Properties Test</title>
	<!-- Assembled by Damion Armentrout, 2018. -->
	<style>
	/* HSL is cool. https://www.sarasoueidan.com/blog/hex-rgb-to-hsl/ */
	html {
	--hue: 257;
	--complimentary-hue: calc( var(--hue) - 180);
	--background: hsl(var(--hue), 26%, 50%);
	--button-background: hsla(var(--complimentary-hue), 26%, 50%, 0.99);
	/* alpha can't be 1 because chrome ::selection is fussy and semitransparent */
	}

	html[data-theme='green'] {
	--hue: 128;
	--fColor: #000;
	--bcolor: #fff;
	}

	html[data-theme='pink'] {
	--hue: 313;
	--fcolor: #fff;
	--bcolor: #000;
	}

	body {
	font-family: sans-serif;
	color: var(--fcolor);
	background-color: var(--background);
	}

	footer {
	text-align: center;
	padding: 20px;
	}

	button.theme-change {
	background: #ddd;
	border: 1px solid #999;
	padding: 10px 15px;
	border-radius: 5px;
	font-weight: bold;
	font-size: 1em;
	margin-right: 20px;
	}
	button.theme-change:focus {
	text-decoration: underline;
	}

	button span {
	border-radius: 100%;
	width: 15px;
	height: 15px;
	display: inline-block;
	position: relative;
	top: 3px;
	}
	#green span {
	background: #5ea167;
	}
	#pink span {
	background: #a05e92;
	}

	.wrapper {
	margin: 25px auto;
	width: 90%;
	padding: 10px 25px;
	font-size: 1.2em;
	}

	::-moz-selection {
	color: var(--bcolor);
	background: var(--button-background); /* Gecko Browsers */
	}
	::selection {
	color: var(--bcolor);
	background: var(--button-background); /* WebKit/Blink Browsers */
	}
	</style>
	</head>
	<body>

	<main class="wrapper">

	<h1>Header One</h1>

	<h2>Change Theme</h2>
	<p>This would be a good way to drive adoption of new sites through customization (e.g. intranet, knowledgebase). These buttons will change the theme colors and set a cookie to remember your preference.</p>
	<button id="green" class="theme-change">Green <span> </span></button>
	<button id="pink" class="theme-change">Pink <span> </span></button>
	<br>
	<br>

	<h2>Header Two A</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia quasi a molestias enim nemo magnam, soluta velit doloribus eum voluptatem, iure aliquam veniam. Repellat harum vel accusamus nemo consequatur velit iste, nihil vero sapiente ut. Quidem voluptatum iure, nemo asperiores.</p>
	<p>Obcaecati, ipsa! Accusamus tempora ipsum sapiente a, nesciunt molestias rerum, architecto, explicabo vitae aperiam accusantium delectus. Modi labore sunt rem mollitia aperiam, voluptatum at magni veritatis saepe maxime incidunt voluptates laboriosam repellat repudiandae, ducimus, nihil asperiores nostrum ut praesentium delectus.</p>
	<p>Eos voluptates cumque incidunt corporis tenetur. Ullam ipsam perferendis ratione, quas natus tenetur, molestiae, sint nostrum qui laudantium totam quae. Sint fugit fugiat tempora recusandae dolore totam. Ut ullam minima beatae qui, ratione veritatis, enim, consequatur eaque minus quasi eveniet.</p>

	<h2>Header Two B</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit fugit officiis, autem reiciendis! Incidunt molestiae reiciendis quidem neque iste laboriosam enim, dicta assumenda exercitationem at.</p>
	<ul>
	<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt.</li>
	<li>Modi provident culpa aperiam maxime, quod delectus ut alias.</li>
	<li>Dolor enim iusto nam ipsa, ipsum magnam nisi et!</li>
	<li>Praesentium sed sint iure amet ullam sequi, veniam recusandae.</li>
	<li>Vel perspiciatis iste optio omnis asperiores! Assumenda, ex, earum!</li>
	</ul>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non earum modi cupiditate cum magnam neque voluptate dolore unde, quis? Repudiandae perspiciatis illum molestias sit provident magnam architecto ipsum, rerum. Qui!</p>

	</main>

	<footer>
	<p>Code snippets are © their respective authors.</p>
	</footer>

	<script>
	var list = document.querySelectorAll('.theme-change');
	for( var item of list ){
	item.onclick = function(){
	document.getElementsByTagName('html')[0].setAttribute( 'data-theme', this.id );
	setCookie('theme',this.id,7);
	}
	}

	// https://stackoverflow.com/a/24103596/9979149
	function setCookie(name,value,days) {
	var expires = "";
	if (days) {
	var date = new Date();
	date.setTime(date.getTime() + (days2460601000));
	expires = "; expires=" + date.toUTCString();
	}
	document.cookie = name + "=" + (value \|\| "") + expires + "; path=/";
	}
	function getCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
	var c = ca[i];
	while (c.charAt(0)==' ') c = c.substring(1,c.length);
	if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
	}
	function eraseCookie(name) {
	document.cookie = name+'=; Max-Age=-99999999;';
	}

	// setCookie('theme','testcookie',7);

	var x = getCookie('theme');
	if (x) {
	document.getElementsByTagName('html')[0].setAttribute( 'data-theme', x );
	}
	</script>

	</body>
	</html>