commit 22a64851825336c6ced213dbd22f846843d04a15
parent d1f1c51f5173dde0e5e7f54f51f5ff25e31395b8
Author: Hunter
Date: Wed, 29 Jul 2026 01:02:48 -0400
add pantry theme; default to guac (or pantry if os prefers dark mode)
Diffstat:
4 files changed, 33 insertions(+), 11 deletions(-)
diff --git a/index.html b/index.html
@@ -1,9 +1,9 @@
<!DOCTYPE html>
-<html lang="en" data-theme="sky">
+<html lang="en" data-theme="guac">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="theme-color" content="#a3d5ff">
+ <meta name="theme-color" content="#7a8520">
<title>memori</title>
<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>">
<link rel="stylesheet" href="resources/style.css">
diff --git a/readme.md b/readme.md
@@ -41,7 +41,7 @@ Different Techo types use differently-sized grid paper. Use the links below to s
- ```shift + click``` an image to delete it<br>
<img src="readme_images/delete.gif">
-- press ```F2``` to select from one of six user interface themes (you may also have to hold ```Fn```)<br>
+- press ```F2``` to select from one of seven user interface themes (you may also have to hold ```Fn```)<br>
<img src="readme_images/select_theme.gif">
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).
diff --git a/resources/style.css b/resources/style.css
@@ -41,6 +41,12 @@
--horizon: #85c0f5;
--lagoon: #2196f3;
+ /* pantry theme colors */
+ --cocoa: #1b1313;
+ --nori: #003731;
+ --pesto: #226f33;
+ --beet: #950641;
+
--grid-cols: 49;
--grid-rows: 66;
--cell-size-mm: 4mm;
@@ -51,12 +57,12 @@
--grid-width-percent: 90.78%;
--grid-height-percent: 94.48%;
- /* Default theme (sea-breeze) */
- --desk: var(--cerulean);
- --page: var(--mist);
- --grid-line: var(--horizon);
+ /* Default theme (guac) */
+ --desk: var(--avocado);
+ --page: var(--garlic);
+ --grid-line: var(--lime);
--grid-line-light: color-mix(in srgb, var(--grid-line) 65%, transparent);
- --accent: var(--lagoon);
+ --accent: var(--onion);
/* Set text color for all themes */
color: var(--white);
@@ -108,6 +114,18 @@
--accent: var(--lagoon);
}
+:root[data-theme="pantry"] {
+ --desk: var(--cocoa);
+ --page: var(--nori);
+ --grid-line: var(--pesto);
+ --accent: var(--beet);
+
+ & .add-images-btn,
+ & .popup-notification {
+ color: var(--white);
+ }
+}
+
* {
margin: 0;
padding: 0;
diff --git a/resources/theme.js b/resources/theme.js
@@ -1,7 +1,9 @@
// Theme system
let currentThemeIndex = 0;
let isF2Pressed = false;
-const themes = ['sea-breeze', 'grape-soda', 'grapefruit', 'guac', 'mojito', 'banana'];
+const themes = ['sea-breeze', 'grape-soda', 'grapefruit', 'guac', 'mojito', 'banana', 'pantry'];
+const DEFAULT_THEME = 'guac';
+const DEFAULT_DARK_THEME = 'pantry';
function setTheme(theme) {
document.documentElement.setAttribute('data-theme', theme);
@@ -26,8 +28,10 @@ function loadThemeFromLocalStorage() {
currentThemeIndex = themes.indexOf(savedTheme);
setTheme(savedTheme);
} else {
- // Use default theme
- setTheme(themes[0]);
+ const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const theme = prefersDark ? DEFAULT_DARK_THEME : DEFAULT_THEME;
+ currentThemeIndex = themes.indexOf(theme);
+ setTheme(theme);
}
}