add goblin theme
Hunter
Thursday, June 4th, 2026 at 12:23 PM
13 --pollen: #f4a127;
14 --loam: #5a352b;
15 --chlorophyll: #5aa83b;
- --terracotta: #b15c2e;
16
17 --wheat: #d2c3a3;
18 --earth: #4a3c31;
37 --muscat: #663399;
38 --cask: #722f37;
39 --bloom: #f8f6ff;
40 +
41 + --lipstick: #da0531;
42 + --bakelite: #221917;
43 + --mothball: #f1e7c9;
44 }
45
46 /* custom fonts */
70 --background: var(--pollen);
71 --text: var(--loam);
72 --highlight: var(--chlorophyll);
- --accent: var(--terracotta);
73 + --accent: var(--loam);
74 --icon: '🌻';
75 }
76
194 scrollbar-color: color-mix(in srgb, var(--muscat) 75%, transparent) color-mix(in srgb, var(--bloom) 75%, transparent);
195 }
196
197 +:root[data-theme="goblin"] {
198 + --background: var(--lipstick);
199 + --text: var(--bakelite);
200 + --highlight: var(--bakelite);
201 + --accent: var(--mothball);
202 + --icon: '👺';
203 + & input[type="text"] {
204 + font-family: BasteleurMoonlight, Arial, sans-serif;
205 + }
206 + .active input[type="text"] {
207 + color: var(--mothball);
208 + text-shadow: 1px 1px 1px var(--bakelite);
209 + }
210 + .parent-task {
211 + --text: var(--mothball)
212 + }
213 + .parent-task input[type="text"] {
214 + text-shadow: 1px 1px 1px var(--bakelite);
215 + }
216 + .checkbox-label {
217 + border-color: var(--bakelite);
218 + }
219 + .custom-checkbox:checked + .checkbox-label {
220 + background-color: var(--bakelite);
221 + }
222 + .custom-checkbox:checked + .checkbox-label::before {
223 + border-color: var(--lipstick);
224 + }
225 + .custom-checkbox:indeterminate + .checkbox-label::before {
226 + background-color: var(--bakelite);
227 + }
228 + .active .checkbox-label {
229 + border-color: var(--mothball);
230 + background-color: var(--bakelite);
231 + }
232 + .active .custom-checkbox:checked + .checkbox-label {
233 + background-color: var(--mothball);
234 + }
235 + .active .custom-checkbox:checked + .checkbox-label::before {
236 + border-color: var(--bakelite);
237 + }
238 + .active .custom-checkbox:indeterminate + .checkbox-label::before {
239 + background-color: var(--mothball);
240 + }
241 + input[type="text"]::selection {
242 + background-color: var(--lipstick);
243 + color: var(--mothball);
244 + }
245 +}
246 +
247 /* interface styling */
248 @keyframes shake {
249 0% { transform: translateX(0); }
10 saveTimer: null,
11 currentThemeIndex: 0,
12 isF2Pressed: false,
- themes: ['gak', 'swamp', 'sunflower', 'harvest', 'medieval', 'woodstove', 'sugar', 'vineyard'],
13 + themes: ['gak', 'swamp', 'sunflower', 'harvest', 'sugar', 'vineyard', 'woodstove', 'medieval', 'goblin'],
14 isInWheelEvent: false,
15
16 // Multi-select state