Added dark/light toggle button
This commit is contained in:
gpkvt
parent
34cab08d41
commit
834df78310
5 changed files with 203 additions and 34 deletions
|
|
@ -144,8 +144,8 @@ input[type="radio"] {
|
|||
float: left;
|
||||
border: 0px;
|
||||
border-radius: 10px;
|
||||
padding-top: 25px;
|
||||
padding-bottom: 25px;
|
||||
height: 56px;
|
||||
margin-top: 7px;
|
||||
background-color: var(--bg-nxt);
|
||||
color: var(--fg-nxt);
|
||||
font-weight: bold;
|
||||
|
|
@ -179,6 +179,7 @@ input[type="radio"] {
|
|||
|
||||
#next {
|
||||
min-width: 100%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#questions {
|
||||
|
|
@ -194,6 +195,14 @@ input[type="radio"] {
|
|||
.b {
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.toggle_label {
|
||||
min-width: 100%;;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
|
@ -246,3 +255,111 @@ input[type="radio"] {
|
|||
color: var(--fg-lnk) !important;
|
||||
}
|
||||
}
|
||||
|
||||
#toggle_checkbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
width: 10%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
width: 10%;
|
||||
float: left;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggle_label {
|
||||
display: block;
|
||||
position: relative;
|
||||
top: 35px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
width: 80%;
|
||||
height: 56px;
|
||||
margin: 0 auto;
|
||||
background-color: var(--bg-ab);
|
||||
border-radius: 25px;
|
||||
transform: translateY(-50%);
|
||||
cursor: pointer;
|
||||
transition: 0.3s ease background-color;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#star {
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
left: 13px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
transform: scale(1);
|
||||
border-radius: 50%;
|
||||
transition: 0.3s ease top, 0.3s ease left, 0.3s ease transform, 0.3s ease background-color;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#star-1 {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#star-2 {
|
||||
position: absolute;
|
||||
transform: rotateZ(36deg);
|
||||
}
|
||||
|
||||
.star {
|
||||
top: 0;
|
||||
left: -7px;
|
||||
font-size: 54px;
|
||||
line-height: 28px;
|
||||
color: var(--bg-a);
|
||||
transition: 0.3s ease color;
|
||||
}
|
||||
|
||||
#moon {
|
||||
position: absolute;
|
||||
bottom: -52px;
|
||||
right: 8px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: var(--bg-a);
|
||||
border-radius: 50%;
|
||||
transition: 0.3s ease bottom;
|
||||
}
|
||||
|
||||
#moon:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
left: -17px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: var(--bg-ab);
|
||||
border-radius: 50%;
|
||||
transition: 0.3s ease background-color;
|
||||
}
|
||||
|
||||
#toggle_checkbox:checked+label {
|
||||
background-color: var(--bg-b);
|
||||
}
|
||||
|
||||
#toggle_checkbox:checked+label #star {
|
||||
top: 0px;
|
||||
left: 640px;
|
||||
transform: scale(0.3);
|
||||
background-color: var(--bg);
|
||||
}
|
||||
|
||||
#toggle_checkbox:checked+label .star {
|
||||
color: var(--bg-a);
|
||||
}
|
||||
|
||||
#toggle_checkbox:checked+label #moon {
|
||||
bottom: 8px;
|
||||
}
|
||||
|
||||
#toggle_checkbox:checked+label #moon:before {
|
||||
background-color: var(--bg-b);
|
||||
}
|
||||
|
|
@ -1,4 +1,29 @@
|
|||
:root {
|
||||
--bg: #E7E5E2;
|
||||
--fg: #243233;
|
||||
--br: #243233;
|
||||
--fg-lnk: #8FA3A9;
|
||||
|
||||
--bg-header: #8FA3A9;
|
||||
--fg-header: #243233;
|
||||
--bg-ab: #89A6C0;
|
||||
|
||||
--bg-a: #F7D214;
|
||||
--fg-a: #243233;
|
||||
--bg-b: #243233;
|
||||
--fg-b: #F7D214;
|
||||
|
||||
--bg-ab-chkd: #B3472B;
|
||||
--fg-ab-chkd: #E7E5E2;
|
||||
--br-ab-chkd: #000000;
|
||||
|
||||
--fg-sep: #243233;
|
||||
--fg-que: #243233;
|
||||
--bg-nxt: #8FA3A9;
|
||||
--fg-nxt: #243233;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--bg: #243233;
|
||||
--fg: #E7E5E2;
|
||||
--br: #E7E5E2;
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
:root {
|
||||
--bg: #E7E5E2;
|
||||
--fg: #243233;
|
||||
--br: #243233;
|
||||
--fg-lnk: #8FA3A9;
|
||||
|
||||
--bg-header: #8FA3A9;
|
||||
--fg-header: #243233;
|
||||
--bg-ab: #89A6C0;
|
||||
|
||||
--bg-a: #F7D214;
|
||||
--fg-a: #243233;
|
||||
--bg-b: #243233;
|
||||
--fg-b: #F7D214;
|
||||
|
||||
--bg-ab-chkd: #B3472B;
|
||||
--fg-ab-chkd: #E7E5E2;
|
||||
--br-ab-chkd: #000000;
|
||||
|
||||
--fg-sep: #243233;
|
||||
--fg-que: #243233;
|
||||
--bg-nxt: #8FA3A9;
|
||||
--fg-nxt: #243233;
|
||||
}
|
||||
34
static/js/toggle.js
Normal file
34
static/js/toggle.js
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
function initToggle() {
|
||||
const toggleSwitch = document.querySelector('.toggle input[type="checkbox"]');
|
||||
const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
|
||||
|
||||
function switchTheme(e) {
|
||||
if (e.target.checked) {
|
||||
document.documentElement.setAttribute('data-theme', 'dark');
|
||||
localStorage.setItem('theme', 'dark'); //add this
|
||||
}
|
||||
else {
|
||||
document.documentElement.setAttribute('data-theme', 'light');
|
||||
localStorage.setItem('theme', 'light'); //add this
|
||||
}
|
||||
}
|
||||
|
||||
toggleSwitch.addEventListener('change', switchTheme, false);
|
||||
|
||||
if (currentTheme) {
|
||||
document.documentElement.setAttribute('data-theme', currentTheme);
|
||||
|
||||
if (currentTheme === 'dark') {
|
||||
toggleSwitch.checked = true;
|
||||
} else {
|
||||
toggleSwitch.checked = false;
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelectorAll('.spacer').forEach(function (el) {
|
||||
el.style.display = 'none';
|
||||
});
|
||||
document.querySelectorAll('.toggle').forEach(function (el) {
|
||||
el.style.display = 'unset';
|
||||
});
|
||||
}
|
||||
|
|
@ -1,14 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{ lang }}">
|
||||
{%- if theme == "light" %}
|
||||
<html lang="{{ lang }}" data-theme="dark">
|
||||
{%- else %}
|
||||
<html lang="{{ lang }}" data-theme="light">
|
||||
{%- endif %}
|
||||
|
||||
<head>
|
||||
<title>{{ title }}</title>
|
||||
<script src="/js/toggle.js" type="text/javascript"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/css/base.css?t={{ epoch }}">
|
||||
{%- if theme == "light" %}
|
||||
<link rel="stylesheet" type="text/css" href="/css/light.css?t={{ epoch }}">
|
||||
{%- else %}
|
||||
<link rel="stylesheet" type="text/css" href="/css/dark.css?t={{ epoch }}">
|
||||
{%- endif %}
|
||||
<link rel="stylesheet" type="text/css" href="/css/colors.css?t={{ epoch }}">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='apple-touch-icon.png') }}">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='favicon-32x32.png') }}">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='favicon-16x16.png') }}">
|
||||
|
|
@ -45,13 +46,29 @@
|
|||
<div id="footer">
|
||||
<div id="questions">{{ questions_prefix }} {{ num_lines }} {{ questions_suffix }}<br><a
|
||||
href="mailto:{{ mailto }}">Einreichen!</a></div>
|
||||
<div class="separator"> </div>
|
||||
<div class="spacer"> </div>
|
||||
<div class="toggle">
|
||||
{%- if theme == "light" %}
|
||||
<input type="checkbox" id="toggle_checkbox">
|
||||
{%- else %}
|
||||
<input type="checkbox" id="toggle_checkbox" checked="checked">
|
||||
{%- endif %}
|
||||
<label for="toggle_checkbox" class="toggle_label">
|
||||
<div id="star">
|
||||
<div class="star" id="star-1">★</div>
|
||||
<div class="star" id="star-2">★</div>
|
||||
</div>
|
||||
<div id="moon"></div>
|
||||
</label>
|
||||
</div>
|
||||
<form action="/" method="get">
|
||||
<input type="hidden" name="t" value="{{ epoch }}">
|
||||
<button id="next" type="submit">{{ more }}</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
initToggle();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Add table
Reference in a new issue