tp-20,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
:root {
--red-hue: 360;
--blue-hue: 240;
--green-hue: 120;
--main-hue: var(--red-hue);
--theme-darkness: 1;
--nav-bg-color: hsl(var(--main-hue), 50%, 50%);
--nav-text-color: hsl(var(--main-hue), 50%, 10%);
--container-bg-color: hsl(var(--main-hue), 50%, 95%);
--content-text-color: hsl(var(--main-hue), 50%, 50%);
--title-color: hsl(--main-hue, 50%, 20%);
--footer-bg-color: hsl(var(--main-hue), 93%, 88%);
--button-text-color: hsl(var(--main-hue), 50%, 20%);
filter: brightness(var(--theme-darkness));
}
:root[theme='dark'] {
--red-hue: 360;
--blue-hue: 240;
--green-hue: 120;
--main-hue: var(--blue-hue);
--theme-darkness: 1;
--nav-bg-color: hsl(var(--main-hue), 50%, 90%);
--nav-text-color: hsl(var(--main-hue), 50%, 10%);
--container-bg-color: hsl(var(--main-hue), 50%, 95%);
--content-text-color: hsl(var(--main-hue), 50%, 50%);
--title-color: hsl(--main-hue, 50%, 20%);
--footer-bg-color: hsl(var(--main-hue), 93%, 88%);
--button-text-color: hsl(var(--main-hue), 50%, 20%);
filter: invert(1) brightness(var(--theme-darkness));
}
body {
height: 100%;
display: flex;
flex-direction: column;
}
nav {
background: var(--nav-bg-color);
color: var(--nav-text-color)
}
.container {
flex: 1;
background: var(--container-bg-color);
}
p.content {
color: var(--content-text-color)
}
.container h2.title {
color: var(--title-color)
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
$("#toggle-theme").on("click", function() {
$("html").is("[theme]") ? $("html").removeAttr("theme") : $("html").attr("theme", "dark")
})
});
</script>
</head>
<body>
<nav class="navbar">Title</nav>
<div class="container">
<div>
<input type="button" value="Light/Dark" id="toggle-theme" />
<label for="darkness">
Darkness
</label>
</div>
<h2 class="title">What is Lorem Ipsum?</h2>
<p class="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
</p>
</div>
</body>
</html>