KargWare/index.html

## index.html
<!doctype html>
<html lang="de">
<head>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
    <META HTTP-EQUIV="Language" CONTENT="de">
    <meta charset="utf-8">

    <title>KargWare - Theme Selector (Example)</title>

    <link rel="stylesheet" href="style.css">
    <script src="themeToggle.js"></script>
</head>
<body>
<div id="ThemedBlock" class="dark">
    <form>
        <button class="btn" onclick="toLight()">Change to Light Theme</button>
        <button class="btn" onclick="toDark()">Change to Dark Theme</button>
    </form>

    <h1>Headline</h1>
    <p>
        blabla foo bar, blabla foo bar, blabla foo bar, blabla foo bar, 123456789<br>
        blabla foo bar, blabla foo bar, blabla foo bar, blabla foo bar, 123456789<br>
        blabla foo bar, blabla foo bar, blabla foo bar, 123456789<br>
        blabla foo bar, blabla foo bar, blabla foo bar, blabla foo bar, 123456789<br>
        blabla foo bar, blabla foo bar, blabla foo bar, blabla foo bar, 123456789<br>
        blabla foo bar, blabla foo bar, blabla foo bar, 123456789<br>
        blabla foo bar, blabla foo bar, blabla foo bar, blabla foo bar, 123456789<br>
    </p>
</div>
</body>

## index_emb.html
<!doctype html>
<html lang="de">
<head>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
    <META HTTP-EQUIV="Language" CONTENT="de">
    <meta charset="utf-8">

    <title>KargWare - Theme Selector (Example)</title>

    <style>
        .light {
            color: green;
            background-color: rgb(226, 199, 199);
        }

        .dark {
            color:blue;
            background-color: rgb(61, 48, 48);
        }

        .btn {
            display: inline-block;
            border: solid 3px #f00;
            text-align: center;
            vertical-align: middle;
            width: 80%;
            margin-left: 10%;
            margin-right: 10%;
            margin-top: 5px;
            margin-bottom: 5px;
            padding: 15px;
        }

        .light h1 {
            color: gray;
        }

        .dark h1 {
            color: yellow;
        }

        .light .btn {
            color: #000;
            background: #fff;
        }

        .dark .btn {
            color: #fff;
            background: #000;
        }
    </style>

    <script type="text/javascript">
        function toLight() {
			document.getElementById("ThemedBlock").classList.add('light');
            document.getElementById("ThemedBlock").classList.remove('dark');
		}

		function toDark() {
			document.getElementById("ThemedBlock").classList.add('dark');
            document.getElementById("ThemedBlock").classList.remove('light');
		}
	</script>
</head>
<body>
<div id="ThemedBlock" class="dark">
    <form>
        <button class="btn" onclick="toLight()">Change to Light Theme</button>
        <button class="btn" onclick="toDark()">Change to Dark Theme</button>
    </form>

    <h1>Headline</h1>
    <p>
        blabla foo bar, blabla foo bar, blabla foo bar, blabla foo bar, 123456789<br>
        blabla foo bar, blabla foo bar, blabla foo bar, blabla foo bar, 123456789<br>
        blabla foo bar, blabla foo bar, blabla foo bar, 123456789<br>
        blabla foo bar, blabla foo bar, blabla foo bar, blabla foo bar, 123456789<br>
        blabla foo bar, blabla foo bar, blabla foo bar, blabla foo bar, 123456789<br>
        blabla foo bar, blabla foo bar, blabla foo bar, 123456789<br>
        blabla foo bar, blabla foo bar, blabla foo bar, blabla foo bar, 123456789<br>
    </p>
</div>
</body>

## style.css
.light {
    color: green;
    background-color: rgb(226, 199, 199);
}

.dark {
    color:blue;
    background-color: rgb(61, 48, 48);
}

.btn {
    display: inline-block;
    border: solid 3px #f00;
    text-align: center;
    vertical-align: middle;
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 15px;
}

.light h1 {
    color: gray;
}

.dark h1 {
    color: yellow;
}

.light .btn {
    color: #000;
    background: #fff;
}

.dark .btn {
    color: #fff;
    background: #000;
}

## themeToggle.js
function toLight() {
    document.getElementById("ThemedBlock").classList.add('light');
    document.getElementById("ThemedBlock").classList.remove('dark');
}

function toDark() {
    document.getElementById("ThemedBlock").classList.add('dark');
    document.getElementById("ThemedBlock").classList.remove('light');
}
	<!doctype html>
	<html lang="de">
	<head>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META HTTP-EQUIV="Language" CONTENT="de">
	<meta charset="utf-8">

	<title>KargWare - Theme Selector (Example)</title>

	<link rel="stylesheet" href="style.css">
	<script src="themeToggle.js"></script>
	</head>
	<body>
	<div id="ThemedBlock" class="dark">
	<form>
	<button class="btn" onclick="toLight()">Change to Light Theme</button>
	<button class="btn" onclick="toDark()">Change to Dark Theme</button>
	</form>

	<h1>Headline</h1>
	<p>
	blabla foo bar, blabla foo bar, blabla foo bar, blabla foo bar, 123456789<br>
	blabla foo bar, blabla foo bar, blabla foo bar, blabla foo bar, 123456789<br>
	blabla foo bar, blabla foo bar, blabla foo bar, 123456789<br>
	blabla foo bar, blabla foo bar, blabla foo bar, blabla foo bar, 123456789<br>
	blabla foo bar, blabla foo bar, blabla foo bar, blabla foo bar, 123456789<br>
	blabla foo bar, blabla foo bar, blabla foo bar, 123456789<br>
	blabla foo bar, blabla foo bar, blabla foo bar, blabla foo bar, 123456789<br>
	</p>
	</div>
	</body>
	.light {
	color: green;
	background-color: rgb(226, 199, 199);
	}

	.dark {
	color:blue;
	background-color: rgb(61, 48, 48);
	}

	.btn {
	display: inline-block;
	border: solid 3px #f00;
	text-align: center;
	vertical-align: middle;
	width: 80%;
	margin-left: 10%;
	margin-right: 10%;
	margin-top: 5px;
	margin-bottom: 5px;
	padding: 15px;
	}

	.light h1 {
	color: gray;
	}

	.dark h1 {
	color: yellow;
	}

	.light .btn {
	color: #000;
	background: #fff;
	}

	.dark .btn {
	color: #fff;
	background: #000;
	}
	function toLight() {
	document.getElementById("ThemedBlock").classList.add('light');
	document.getElementById("ThemedBlock").classList.remove('dark');
	}

	function toDark() {
	document.getElementById("ThemedBlock").classList.add('dark');
	document.getElementById("ThemedBlock").classList.remove('light');
	}