Add a better theme toggle
This commit is contained in:
Wasi Master
+101
-16
@@ -162,35 +162,103 @@ html = """
|
|||||||
right: 10px;
|
right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark-mode-toggle input { display: none; }
|
.dark-mode-toggle input {
|
||||||
|
position: absolute;
|
||||||
|
width: 1px;
|
||||||
|
height: 1px;
|
||||||
|
padding: 0;
|
||||||
|
margin: -1px;
|
||||||
|
overflow: hidden;
|
||||||
|
clip: rect(0, 0, 0, 0);
|
||||||
|
white-space: nowrap;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.dark-mode-toggle label {
|
.dark-mode-toggle label {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-indent: -9999px;
|
width: 54px;
|
||||||
width: 52px;
|
height: 28px;
|
||||||
height: 27px;
|
background: #cbd5e1;
|
||||||
background: grey;
|
|
||||||
display: block;
|
display: block;
|
||||||
border-radius: 100px;
|
border-radius: 100px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
transition: background-color 0.3s, border-color 0.3s;
|
||||||
|
border: 1px solid #b8c2cc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark-mode-toggle label:after {
|
.dark-mode-toggle label:hover {
|
||||||
content: '';
|
background: #b8c2cc;
|
||||||
|
border-color: #a1b0be;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-mode-toggle input:focus-visible + label {
|
||||||
|
outline: 2px solid #a327f0;
|
||||||
|
outline-offset: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .dark-mode-toggle input:focus-visible + label {
|
||||||
|
outline-color: #7359f8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-mode-toggle .thumb {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 2px;
|
top: 2px;
|
||||||
left: 2px;
|
left: 2px;
|
||||||
width: 23px;
|
width: 22px;
|
||||||
height: 23px;
|
height: 22px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 90px;
|
border-radius: 50%;
|
||||||
transition: 0.3s;
|
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s, box-shadow 0.3s;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark-mode-toggle input:checked+label { background: #7359f8; }
|
.dark-mode-toggle input:checked+label {
|
||||||
.dark-mode-toggle input:checked+label:after {
|
background: #312e81;
|
||||||
left: calc(100% - 2px);
|
border-color: #4338ca;
|
||||||
transform: translateX(-100%);
|
}
|
||||||
|
|
||||||
|
.dark-mode-toggle input:checked+label:hover {
|
||||||
|
background: #2e2a78;
|
||||||
|
border-color: #3b379d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-mode-toggle input:checked+label .thumb {
|
||||||
|
transform: translateX(26px);
|
||||||
|
background: #1e1b4b;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 8px rgba(99, 102, 241, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-mode-toggle .icon {
|
||||||
|
position: absolute;
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-mode-toggle .icon.sun {
|
||||||
|
color: #ea580c;
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1) rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-mode-toggle .icon.moon {
|
||||||
|
color: #4f46e5;
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0) rotate(-90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-mode-toggle input:checked+label .icon.sun {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0) rotate(90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-mode-toggle input:checked+label .icon.moon {
|
||||||
|
color: #c7d2fe;
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1) rotate(0deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 600px) {
|
@media only screen and (max-width: 600px) {
|
||||||
@@ -324,7 +392,24 @@ html = """
|
|||||||
<body>
|
<body>
|
||||||
<div class="dark-mode-toggle">
|
<div class="dark-mode-toggle">
|
||||||
<input type="checkbox" id="dark-mode-toggle">
|
<input type="checkbox" id="dark-mode-toggle">
|
||||||
<label for="dark-mode-toggle" title="{{ toggle_dark_mode }}"></label>
|
<label for="dark-mode-toggle" title="{{ toggle_dark_mode }}">
|
||||||
|
<span class="thumb">
|
||||||
|
<svg class="icon sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<circle cx="12" cy="12" r="5"></circle>
|
||||||
|
<line x1="12" y1="1" x2="12" y2="3"></line>
|
||||||
|
<line x1="12" y1="21" x2="12" y2="23"></line>
|
||||||
|
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
|
||||||
|
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
|
||||||
|
<line x1="1" y1="12" x2="3" y2="12"></line>
|
||||||
|
<line x1="21" y1="12" x2="23" y2="12"></line>
|
||||||
|
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
|
||||||
|
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
|
||||||
|
</svg>
|
||||||
|
<svg class="icon moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="form-view">
|
<div id="form-view">
|
||||||
|
|||||||
Reference in New Issue
Block a user