openvibers/openvibe.games Commits

Creator worlds: the whole page follows the reader's theme (#247)

OP OpenVibers committed 12 days ago · 2ebf1e44a6 · 2 files, +21 −8

Changes

ddiff --git a/apps/client/worlds.html b/apps/client/worlds.html
iindex ed62304..c5997d1 100644
---- a/apps/client/worlds.html
++++ b/apps/client/worlds.html
@@@ -24,22 +24,24 @@
<meta name="twitter:image" content="https://openvibe.games/og-image.png" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<style>
++ /* The whole page follows the reader's theme (theme-loader.js sets --bg-primary, --text-primary, … on <html>); the dark
++ values are only the fallback. Before 2026-11-01 the page and its text stayed dark while the dim text and the cards
++ took a light theme's colours: dark grey on navy, and white cards on a dark page. */
:root {
-- color-scheme: dark;
++ color-scheme: var(--color-scheme, dark);
--accent: #3b82f6;
--accent-light: #60a5fa;
--secondary: #22d3ee;
-- --bg: #0a0f1c;
-- --bg-raised: #101828;
++ --bg: var(--bg-primary, #0a0f1c);
++ --bg-raised: var(--bg-secondary, #101828);
--bg-card: rgba(19, 28, 46, 0.88);
--border: #1f2d47;
-- --text: #e6edf7;
-- /* The reader's theme (theme-loader.js), as the leaderboard page does: fixed greys faded on light themes (2.4:1). */
++ --text: var(--text-primary, #e6edf7);
--text-dim: var(--text-secondary, #96a7c2);
--text-faint: var(--text-muted, #7386a3);
-- --good: #34d399;
-- --warn: #fbbf24;
-- --bad: #f87171;
++ --good: var(--success-text, #34d399);
++ --warn: var(--warning-text, #fbbf24);
++ --bad: var(--danger-text, #f87171);
}
/* Light themes (theme-loader sets data-theme-mode): the cyan is text on tags and achievements, and #22d3ee on a light
page read at 1.7:1; this deeper cyan reads at 5:1 (axe, 2026-10-22). */
ddiff --git a/apps/server/src/net/worldsPage.test.ts b/apps/server/src/net/worldsPage.test.ts
iindex c0f737a..c79aae1 100644
---- a/apps/server/src/net/worldsPage.test.ts
++++ b/apps/server/src/net/worldsPage.test.ts
@@@ -15,4 +15,15 @@ describe('the creator worlds list on a light theme', () => {
expect(page).toMatch(/\.card \{[^}]*border: 1px solid var\(--border, #1f2d47\);/)
expect(page).not.toMatch(/\.card \{[^}]*background: var\(--bg-raised\)/)
})
++
++ it('takes its page and text colours from the theme too, so a light theme never leaves a dark page behind', () => {
++ const root = /:root \{([^}]*)\}/.exec(page)?.[1] ?? ''
++ expect(root).toMatch(/--bg: var\(--bg-primary, #0a0f1c\);/)
++ expect(root).toMatch(/--bg-raised: var\(--bg-secondary, #101828\);/)
++ expect(root).toMatch(/--text: var\(--text-primary, #e6edf7\);/)
++ expect(root).toMatch(/--good: var\(--success-text, #34d399\);/)
++ expect(root).toMatch(/--warn: var\(--warning-text, #fbbf24\);/)
++ expect(root).toMatch(/--bad: var\(--danger-text, #f87171\);/)
++ expect(root).toMatch(/color-scheme: var\(--color-scheme, dark\);/)
++ })
})