round corners on pantry theme; shift+F2 to cycle themes in reverse
Hunter
Friday, July 31st, 2026 at 12:14 PM
98
99 --theme-transition: 250ms ease;
100 --marquee-fade: 75ms;
101 + --page-radius: 0px;
102 transition:
103 --desk var(--theme-transition),
104 --page var(--theme-transition),
107 }
108
109 @media (prefers-reduced-motion: reduce) {
- :root {
110 + :root,
111 + .page.theming {
112 transition: none;
113 }
114 }
161 --page: var(--nori);
162 --grid-line: var(--pesto);
163 --accent: var(--beet);
164 + --page-radius: 2.45% / 1.89%;
165
166 & .add-images-btn,
167 & .popup-notification {
193 aspect-ratio: 8.5 / 11;
194 background: var(--page);
195 position: relative;
196 + border-radius: var(--page-radius);
197 box-shadow: 0 8px 24px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08);
198 display: flex;
199 align-items: center;
200 justify-content: center;
201 }
202
203 +.page.theming {
204 + transition: border-radius var(--theme-transition);
205 +}
206 +
207 .grid {
208 /* Grid dimensions as percentage of page to scale responsively */
209 width: var(--grid-width-percent);
266
267 .page {
268 box-shadow: none;
269 + border-radius: 0;
270 }
271
272 .grid-cell {
571 width: auto !important;
572 height: auto !important;
573 max-width: none !important;
574 + border-radius: 0 !important;
575 box-shadow: none;
576 margin: 0;
577 padding: 0;
4 const themes = ['sea-breeze', 'grape-soda', 'grapefruit', 'guac', 'mojito', 'banana', 'pantry'];
5 const DEFAULT_THEME = 'guac';
6 const DEFAULT_DARK_THEME = 'pantry';
7 +const THEME_TRANSITION_MS = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--theme-transition'));
8 +let pageTransitionTimer = null;
9
10 function syncThemeColorMeta() {
11 const backgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--desk').trim();
23 }
24 });
25
-function cycleTheme() {
- currentThemeIndex = (currentThemeIndex + 1) % themes.length;
26 +// Only do border-radius transition on page when changing themes
27 +function withPageTransition() {
28 + const page = document.querySelector('.page');
29 + if (!page) return;
30 +
31 + page.classList.add('theming');
32 + clearTimeout(pageTransitionTimer);
33 + pageTransitionTimer = setTimeout(() => page.classList.remove('theming'), THEME_TRANSITION_MS + 50);
34 +}
35 +
36 +function cycleTheme(step = 1) {
37 + currentThemeIndex = (currentThemeIndex + step + themes.length) % themes.length;
38 const newTheme = themes[currentThemeIndex];
39 + withPageTransition();
40 setTheme(newTheme);
41 saveThemeToLocalStorage(newTheme);
42 }
58 }
59 }
60
-// F2 key handler for theme cycling
61 +// F2 cycles themes, shift+F2 cycles backwards
62 document.addEventListener('keydown', (e) => {
63 if (e.key === 'F2' && !isF2Pressed) {
64 e.preventDefault();
65 isF2Pressed = true;
- cycleTheme();
66 + cycleTheme(e.shiftKey ? -1 : 1);
67 }
68 });
69