1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
$font-path: "../fonts/"
$prev-icon-path: "../images/icons/previous.svg"
$next-icon-path: "../images/icons/double-arrow.svg"
$never-icon-path: "../images/sitting.svg"
// orange [rgb(255,149,0), rgb( 255,159,10)]
// purple [rgb(175,82,222), rgb(191,90,242)]
// indigo [rgb(88,86,214),rgb(94,92,230)]
html
--color-mode: "lit"
--light: #fff
--dark: rgb(18,20,24)
--gray: #f5f5f5
--bubble: rgb(16,16,18)
--accent: var(--gray)
--bg: var(--light)
--bg-dark: #000
--text: var(--dark)
--font: 'Metropolis', sans-serif
--theme: rgb(52,199,89) // #04a763
--ease: cubic-bezier(.19,1,.22,1)
@mixin darkmode
--light: #eee
--color-mode: 'dim'
--bg: var(--bg-dark)
--text: var(--light)
--accent: var(--bubble)
--theme: rgb(48,209,88)//rgb(24,175,119)
*
box-shadow: none !important
main p
opacity: 0.9
&[data-mode="dim"]
@include darkmode
.color
&_choice
&::after
transform: translateX(1.75rem) scale(1.67)
@media (prefers-color-scheme: dark)
&:not(.nodarkmode):not([data-mode="lit"])
@include darkmode
|
