openvibers/openvibe.games Commits
Creator worlds: the whole page follows the reader's theme (#247)
Changes
@@@ -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 lightpage read at 1.7:1; this deeper cyan reads at 5:1 (axe, 2026-10-22). */@@@ -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\);/)++ })})
@@ -24,22 +24,24 @@
@@ -24,22 +24,24 @@
<meta name="twitter:image" content="https://openvibe.games/og-image.png" />
<meta name="twitter:image" content="https://openvibe.games/og-image.png" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<style>
<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 {
:root {
- color-scheme: dark;
+ color-scheme: var(--color-scheme, dark);
--accent: #3b82f6;
--accent: #3b82f6;
--accent-light: #60a5fa;
--accent-light: #60a5fa;
--secondary: #22d3ee;
--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);
--bg-card: rgba(19, 28, 46, 0.88);
--border: #1f2d47;
--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-dim: var(--text-secondary, #96a7c2);
--text-faint: var(--text-muted, #7386a3);
--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
/* 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). */
page read at 1.7:1; this deeper cyan reads at 5:1 (axe, 2026-10-22). */
@@ -15,4 +15,15 @@ describe('the creator worlds list on a light theme', () => {
@@ -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).toMatch(/\.card \{[^}]*border: 1px solid var\(--border, #1f2d47\);/)
expect(page).not.toMatch(/\.card \{[^}]*background: var\(--bg-raised\)/)
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\);/)
+ })
})
})