colors.css (4433B)
1 :root { 2 /* Defualt Theme */ 3 --red :#cc241d; 4 --green :#98971a; 5 --yellow :#d79921; 6 --blue :#458588; 7 --purple :#b16286; 8 --aqua :#689d6a; 9 --orange :#d65d0e; 10 --gray :#928374; 11 12 /* Light Theme */ 13 --light_switch_shadow: #373d4e; 14 --light_switch_icon: "🌑"; 15 --light_switch_text: "dark mode?"; 16 17 --light0_hard :#f9f5d7; 18 --light0 :#fbf1c7; 19 --light0_soft :#f2e5bc; 20 --light1 :#ebdbb2; 21 --light2 :#d5c4a1; 22 --light3 :#bdae93; 23 --light4 :#a89984; 24 25 --light_red :#9d0006; 26 --light_green :#79740e; 27 --light_yellow :#b57614; 28 --light_blue :#076678; 29 --light_purple :#8f3f71; 30 --light_aqua :#427b58; 31 --light_gray :#7c6f64; 32 --light_orange :#af3a03; 33 34 --light_invert :0%; 35 36 /* Dark Theme */ 37 --dark_switch_shadow: #fce477; 38 --dark_switch_icon: "🌕"; 39 --dark_switch_text: "light mode?"; 40 41 --dark0_hard :#1d2021; 42 --dark0 :#282828; 43 --dark0_soft :#32302f; 44 --dark1 :#3c3836; 45 --dark2 :#504945; 46 --dark3 :#665c54; 47 --dark4 :#7c6f64; 48 49 --dark_red :#fb4934; 50 --dark_green :#b8bb26; 51 --dark_yellow :#fabd2f; 52 --dark_blue :#83a598; 53 --dark_purple :#d3869b; 54 --dark_aqua :#8ec07c; 55 --dark_orange :#fe8019; 56 --dark_gray :#a89984; 57 58 --dark_invert :100%; 59 60 /* Default Mode */ 61 --switch_shadow_color: var(--light0); 62 --switch_icon: var(--dark_switch_icon); 63 --switch_text: var(--dark_switch_text); 64 65 --theme_red :var(--dark_red); 66 --theme_green :var(--dark_green); 67 --theme_yellow :var(--dark_yellow); 68 --theme_blue :var(--dark_blue); 69 --theme_purple :var(--dark_purple); 70 --theme_aqua :var(--dark_aqua); 71 --theme_gray :var(--dark_gray); 72 --theme_orange :var(--dark_orange); 73 74 --theme_bg0_hard :var(--dark0_hard); 75 --theme_bg0 :var(--dark0); 76 --theme_bg0_soft :var(--dark0_soft); 77 --theme_bg1 :var(--dark1); 78 --theme_bg2 :var(--dark2); 79 --theme_bg3 :var(--dark3); 80 --theme_bg4 :var(--dark4); 81 82 --theme_fg0_hard :var(--light0_hard); 83 --theme_fg0 :var(--light0); 84 --theme_fg0_soft :var(--light0_soft); 85 --theme_fg1 :var(--light1); 86 --theme_fg2 :var(--light2); 87 --theme_fg3 :var(--light3); 88 --theme_fg4 :var(--light4); 89 90 --theme_invert :var(--dark_invert); 91 } 92 93 /* Switched mode */ 94 #theme_switch:checked ~ #content { 95 --switch_icon: var(--light_switch_icon); 96 --switch_text: var(--light_switch_text); 97 98 --theme_red :var(--light_red); 99 --theme_green :var(--light_green); 100 --theme_yellow :var(--light_yellow); 101 --theme_blue :var(--light_blue); 102 --theme_purple :var(--light_purple); 103 --theme_aqua :var(--light_aqua); 104 --theme_gray :var(--light_gray); 105 --theme_orange :var(--light_orange); 106 107 --theme_bg0_hard :var(--light0_hard); 108 --theme_bg0 :var(--light0); 109 --theme_bg0_soft :var(--light0_soft); 110 --theme_bg1 :var(--light1); 111 --theme_bg2 :var(--light2); 112 --theme_bg3 :var(--light3); 113 --theme_bg4 :var(--light4); 114 115 --theme_fg0_hard :var(--dark0_hard); 116 --theme_fg0 :var(--dark0); 117 --theme_fg0_soft :var(--dark0_soft); 118 --theme_fg1 :var(--dark1); 119 --theme_fg2 :var(--dark2); 120 --theme_fg3 :var(--dark3); 121 --theme_fg4 :var(--dark4); 122 123 --theme_invert :var(--light_invert); 124 } 125 126 .theme_switch { /* Hides the checkbox */ 127 display: none; 128 position: absolute !important; 129 height: 1px; 130 width: 1px; 131 overflow: hidden; 132 /* clip: rect(1px, 1px, 1px, 1px); */ 133 } 134 135 .switch_label { 136 cursor: pointer; 137 display: flex; 138 139 position: absolute; 140 right: 3em; 141 top: 4em; 142 z-index: 1; 143 144 width: 1em; 145 height: 1em; 146 } 147 148 .switch_label::before { 149 content: var(--switch_icon); 150 font-size: 30px; 151 transition: text-shadow .2s; 152 } 153 154 .switch_label::after { 155 align-self: center; 156 color: var(--theme_fg0); 157 font-size: 28px; 158 line-height: 40px; 159 opacity: 0; 160 padding-left: 15px; 161 transition: opacity .2s; 162 } 163 164 .theme_switch:focus ~ #content .switch_label::before, 165 .switch_label:hover::before { 166 text-shadow: 0 0 15px var(--theme_fg0); 167 } 168 169 .theme_switch:focus ~ #content .switch_label::after, 170 .switch_label:hover::after { 171 opacity: 1; 172 }