add pantry theme; default to guac (or pantry if os prefers dark mode)
Hunter
Wednesday, July 29th, 2026 at 1:02 AM
1 <!DOCTYPE html>
-<html lang="en" data-theme="sky">
2 +<html lang="en" data-theme="guac">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="theme-color" content="#a3d5ff">
6 + <meta name="theme-color" content="#7a8520">
7 <title>memori</title>
8 <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>✂️</text></svg>">
9 <link rel="stylesheet" href="resources/style.css">
41 - ```shift + click``` an image to delete it<br>
42 <img src="readme_images/delete.gif">
43
-- press ```F2``` to select from one of six user interface themes (you may also have to hold ```Fn```)<br>
44 +- press ```F2``` to select from one of seven user interface themes (you may also have to hold ```Fn```)<br>
45 <img src="readme_images/select_theme.gif">
46
47 Once you've filled out the page, press ```⌘ + P``` to print using your system's default print dialog (in Safari, this will open a formatted PDF in a new tab).
41 --horizon: #85c0f5;
42 --lagoon: #2196f3;
43
44 + /* pantry theme colors */
45 + --cocoa: #1b1313;
46 + --nori: #003731;
47 + --pesto: #226f33;
48 + --beet: #950641;
49 +
50 --grid-cols: 49;
51 --grid-rows: 66;
52 --cell-size-mm: 4mm;
57 --grid-width-percent: 90.78%;
58 --grid-height-percent: 94.48%;
59
- /* Default theme (sea-breeze) */
- --desk: var(--cerulean);
- --page: var(--mist);
- --grid-line: var(--horizon);
60 + /* Default theme (guac) */
61 + --desk: var(--avocado);
62 + --page: var(--garlic);
63 + --grid-line: var(--lime);
64 --grid-line-light: color-mix(in srgb, var(--grid-line) 65%, transparent);
- --accent: var(--lagoon);
65 + --accent: var(--onion);
66
67 /* Set text color for all themes */
68 color: var(--white);
114 --accent: var(--lagoon);
115 }
116
117 +:root[data-theme="pantry"] {
118 + --desk: var(--cocoa);
119 + --page: var(--nori);
120 + --grid-line: var(--pesto);
121 + --accent: var(--beet);
122 +
123 + & .add-images-btn,
124 + & .popup-notification {
125 + color: var(--white);
126 + }
127 +}
128 +
129 * {
130 margin: 0;
131 padding: 0;
1 // Theme system
2 let currentThemeIndex = 0;
3 let isF2Pressed = false;
-const themes = ['sea-breeze', 'grape-soda', 'grapefruit', 'guac', 'mojito', 'banana'];
4 +const themes = ['sea-breeze', 'grape-soda', 'grapefruit', 'guac', 'mojito', 'banana', 'pantry'];
5 +const DEFAULT_THEME = 'guac';
6 +const DEFAULT_DARK_THEME = 'pantry';
7
8 function setTheme(theme) {
9 document.documentElement.setAttribute('data-theme', theme);
28 currentThemeIndex = themes.indexOf(savedTheme);
29 setTheme(savedTheme);
30 } else {
- // Use default theme
- setTheme(themes[0]);
31 + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
32 + const theme = prefersDark ? DEFAULT_DARK_THEME : DEFAULT_THEME;
33 + currentThemeIndex = themes.indexOf(theme);
34 + setTheme(theme);
35 }
36 }
37