commit 99e5b8c2f8a5108168996d15ae4c348ee990bc31
parent a5f80166b5208b9d3396dba78ae7247c7c926048
Author: Hunter
Date: Sun, 2 Aug 2026 20:14:59 -0400
fix ios toolbar tint not following theme changes; round pantry corners on mobile too
Diffstat:
2 files changed, 31 insertions(+), 39 deletions(-)
diff --git a/resources/style.css b/resources/style.css
@@ -1,11 +1,3 @@
-/* Registered so theme swaps can be transitioned — plain custom properties don't animate.
- Everything downstream (borders, color-mix, scrollbars) follows for free. */
-@property --desk {
- syntax: '<color>';
- inherits: true;
- initial-value: #7a8520;
-}
-
@property --page {
syntax: '<color>';
inherits: true;
@@ -100,17 +92,14 @@
--marquee-fade: 75ms;
--page-radius: 0px;
transition:
- --desk var(--theme-transition),
--page var(--theme-transition),
--grid-line var(--theme-transition),
--accent var(--theme-transition);
}
-@media (prefers-reduced-motion: reduce) {
- :root,
- .page.theming {
- transition: none;
- }
+:root.no-theme-transition,
+:root.no-theme-transition body {
+ transition: none;
}
/* Theme definitions */
@@ -179,13 +168,14 @@
}
body {
- background: var(--desk);
+ background-color: var(--desk);
display: flex;
justify-content: center;
align-items: flex-start;
align-items: safe center;
min-height: 100vh;
padding: 20px;
+ transition: background-color var(--theme-transition);
}
.page {
@@ -204,6 +194,14 @@ body {
transition: border-radius var(--theme-transition);
}
+@media (prefers-reduced-motion: reduce) {
+ :root,
+ :root body,
+ .page.theming {
+ transition: none;
+ }
+}
+
.grid {
/* Grid dimensions as percentage of page to scale responsively */
width: var(--grid-width-percent);
@@ -266,7 +264,6 @@ body {
.page {
box-shadow: none;
- border-radius: 0;
}
.grid-cell {
@@ -512,12 +509,11 @@ body.selecting .image-container {
overscroll-behavior: none;
}
- /* Only fix position in portrait mode to prevent scroll issues in landscape */
@media (orientation: portrait) {
html, body {
height: 100%;
- position: fixed;
width: 100%;
+ overflow: hidden;
}
}
diff --git a/resources/theme.js b/resources/theme.js
@@ -5,7 +5,7 @@ const themes = ['sea-breeze', 'grape-soda', 'grapefruit', 'guac', 'mojito', 'ban
const DEFAULT_THEME = 'guac';
const DEFAULT_DARK_THEME = 'pantry';
const THEME_TRANSITION_MS = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--theme-transition'));
-let pageTransitionTimer = null;
+let themeTransitionTimer = null;
function syncThemeColorMeta() {
const backgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--desk').trim();
@@ -17,26 +17,19 @@ function setTheme(theme) {
syncThemeColorMeta();
}
-document.documentElement.addEventListener('transitionend', (e) => {
- if (e.propertyName === '--desk') {
- syncThemeColorMeta();
- }
-});
-
-// Only do border-radius transition on page when changing themes
-function withPageTransition() {
+function armPageRadiusTransition() {
const page = document.querySelector('.page');
if (!page) return;
page.classList.add('theming');
- clearTimeout(pageTransitionTimer);
- pageTransitionTimer = setTimeout(() => page.classList.remove('theming'), THEME_TRANSITION_MS + 50);
+ clearTimeout(themeTransitionTimer);
+ themeTransitionTimer = setTimeout(() => page.classList.remove('theming'), THEME_TRANSITION_MS + 50);
}
function cycleTheme(step = 1) {
currentThemeIndex = (currentThemeIndex + step + themes.length) % themes.length;
const newTheme = themes[currentThemeIndex];
- withPageTransition();
+ armPageRadiusTransition();
setTheme(newTheme);
saveThemeToLocalStorage(newTheme);
}
@@ -47,15 +40,18 @@ function saveThemeToLocalStorage(theme) {
function loadThemeFromLocalStorage() {
const savedTheme = localStorage.getItem('memori-theme');
- if (savedTheme && themes.includes(savedTheme)) {
- currentThemeIndex = themes.indexOf(savedTheme);
- setTheme(savedTheme);
- } else {
- const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
- const theme = prefersDark ? DEFAULT_DARK_THEME : DEFAULT_THEME;
- currentThemeIndex = themes.indexOf(theme);
- setTheme(theme);
- }
+ const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const theme = (savedTheme && themes.includes(savedTheme))
+ ? savedTheme
+ : (prefersDark ? DEFAULT_DARK_THEME : DEFAULT_THEME);
+
+ currentThemeIndex = themes.indexOf(theme);
+
+ // the document opens on the default theme, so the first swap needs to land unanimated
+ document.documentElement.classList.add('no-theme-transition');
+ setTheme(theme);
+ document.documentElement.offsetWidth; // flush the change before transitions come back
+ document.documentElement.classList.remove('no-theme-transition');
}
// F2 cycles themes, shift+F2 cycles backwards