feat: start dark mode toggle support
This commit is contained in:
parent
834807a3ad
commit
fbbb6f8a28
@ -1,3 +1,5 @@
|
||||
@import "../node_modules/bulma/sass/utilities/functions.sass";
|
||||
|
||||
//brand colors
|
||||
$nexi-white: #f8fafb; // Made up
|
||||
$nexi-lighter-black: #353535; // Made up
|
||||
@ -14,11 +16,10 @@ $nexi-orange: #F17C25;
|
||||
$nexi-darker-orange: #F44336;
|
||||
$nexi-yellow: #FFC107;
|
||||
|
||||
$custom-colors:
|
||||
(
|
||||
"nexi-white": ($nexi-white, findColorInvert($nexi-white)),
|
||||
$custom-colors: (
|
||||
"nexi-white": ($nexi-white, $nexi-black),
|
||||
"nexi-lighter-black": ($nexi-lighter-black, findColorInvert($nexi-lighter-black)),
|
||||
"nexi-black": ($nexi-black, findColorInvert($nexi-black)),
|
||||
"nexi-black": ($nexi-black, $nexi-white),
|
||||
"nexi-lighter-red": ($nexi-lighter-red, findColorInvert($nexi-lighter-red)),
|
||||
"nexi-red": ($nexi-red, findColorInvert($nexi-red)),
|
||||
"nexi-darker-red": ($nexi-darker-red, findColorInvert($nexi-darker-red)),
|
||||
@ -30,7 +31,7 @@ $custom-colors:
|
||||
"nexi-orange": ($nexi-orange, findColorInvert($nexi-orange)),
|
||||
"nexi-darker-orange": ($nexi-darker-orange, findColorInvert($nexi-darker-orange)),
|
||||
"nexi-yellow": ($nexi-yellow, findColorInvert($nexi-yellow)),
|
||||
);
|
||||
);
|
||||
|
||||
// Used for texts etc.
|
||||
$grey: $nexi-lighter-black;
|
||||
@ -47,7 +48,8 @@ $purple: $nexi-purple;
|
||||
$red: $nexi-red;
|
||||
|
||||
// https://github.com/jgthms/bulma/blob/master/sass/utilities/derived-variables.sass
|
||||
$primary: $nexi-white;
|
||||
$primary: $nexi-black;
|
||||
$primary-invert: $nexi-white;
|
||||
|
||||
//$info: $cyan;
|
||||
//$success: $green;
|
||||
|
||||
35
priceybot2/sass/dark-mode.scss
Normal file
35
priceybot2/sass/dark-mode.scss
Normal file
@ -0,0 +1,35 @@
|
||||
.dark-toggle {
|
||||
--size: 2rem;
|
||||
|
||||
appearance: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
box-shadow: inset calc(var(--size) * 0.33) calc(var(--size) * -0.25) 0;
|
||||
border-radius: 999px;
|
||||
color: hsl(240, 100%, 95%);
|
||||
|
||||
transition: all 500ms;
|
||||
|
||||
&:checked {
|
||||
--ray-size: calc(var(--size) * -0.4);
|
||||
--offset-orthogonal: calc(var(--size) * 0.65);
|
||||
--offset-diagonal: calc(var(--size) * 0.45);
|
||||
|
||||
transform: scale(0.75);
|
||||
color: hsl(40, 100%, 50%);
|
||||
box-shadow:
|
||||
inset 0 0 0 var(--size),
|
||||
calc(var(--offset-orthogonal) * -1) 0 0 var(--ray-size),
|
||||
var(--offset-orthogonal) 0 0 var(--ray-size),
|
||||
0 calc(var(--offset-orthogonal) * -1) 0 var(--ray-size),
|
||||
0 var(--offset-orthogonal) 0 var(--ray-size),
|
||||
calc(var(--offset-diagonal) * -1) calc(var(--offset-diagonal) * -1) 0 var(--ray-size),
|
||||
var(--offset-diagonal) var(--offset-diagonal) 0 var(--ray-size),
|
||||
calc(var(--offset-diagonal) * -1) var(--offset-diagonal) 0 var(--ray-size),
|
||||
var(--offset-diagonal) calc(var(--offset-diagonal) * -1) 0 var(--ray-size),
|
||||
;
|
||||
}
|
||||
}
|
||||
@ -2,6 +2,7 @@
|
||||
|
||||
// Our scss files
|
||||
@import "branding";
|
||||
@import "dark-mode";
|
||||
|
||||
// Import after our branding so colors work.
|
||||
@import "../node_modules/bulma/bulma.sass";
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,17 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="is-clipped" xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
||||
|
||||
<head>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Flask Auth Example</title>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css', version='0.3') }}">
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body data-theme="dark" onload="init()">
|
||||
<section class="hero is-primary is-fullheight">
|
||||
|
||||
<div class="hero-head">
|
||||
<nav class="navbar">
|
||||
<div class="container">
|
||||
@ -50,7 +49,59 @@
|
||||
{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
|
||||
<div class="hero-foot">
|
||||
<label class="is-right">
|
||||
<input name="dark-mode-toggle" class="dark-toggle" onclick="darkLight()" type="checkbox">
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
function init() {
|
||||
let theme = localStorage.getItem("theme") ?? "dark";
|
||||
document.body.dataset.theme = theme;
|
||||
|
||||
applyTheme(theme);
|
||||
}
|
||||
|
||||
function darkLight() {
|
||||
let element = document.body;
|
||||
switch (element.dataset.theme) {
|
||||
case "light":
|
||||
element.dataset.theme = "dark";
|
||||
break;
|
||||
case "dark":
|
||||
element.dataset.theme = "light";
|
||||
break;
|
||||
}
|
||||
localStorage.setItem("theme", element.dataset.theme);
|
||||
|
||||
applyTheme(element.dataset.theme);
|
||||
}
|
||||
|
||||
function applyTheme(theme) {
|
||||
console.log(theme)
|
||||
let primaryElements
|
||||
switch (theme) {
|
||||
case 'dark':
|
||||
primaryElements = Array.from(document.querySelectorAll('.is-primary-invert'));
|
||||
console.log(primaryElements)
|
||||
primaryElements.forEach((element) => {
|
||||
element.classList.remove('is-primary-invert');
|
||||
element.classList.add('is-primary');
|
||||
});
|
||||
break;
|
||||
case 'light':
|
||||
primaryElements = Array.from(document.querySelectorAll('.is-primary'));
|
||||
console.log(primaryElements)
|
||||
primaryElements.forEach((element) => {
|
||||
element.classList.remove('is-primary');
|
||||
element.classList.add('is-primary-invert');
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user