openvibers/openvibe.games Commits

The game shell's Frame wears the dark theme's ink (#294)

OP OpenVibers committed 7 days ago · 56506df2dc · 2 files, +40 −0

The play and casual shells paint a permanently dark stage (#0b0e11, #0b0820), but the shared
navbar and footer take their ink from the visitor's theme. On a light theme the Frame's near-black
page ink landed on that dark canvas: the menu burger at 1.13:1 and the search orb at 2.28:1 at
390 px, signed out, on openvibe.games/play and /play/vibe-heroes — below the 3:1 a UI icon needs.

The mounts now carry the dark palette, so the Frame reads the same whatever theme is picked and
the theme's accent (Sign In, hovers, chips) is left alone. Dark themes are unchanged. Pinned on
#navbar-mount / #ov-footer rather than <html>, where the theme loader writes its own tokens inline.

Changes

ddiff --git a/apps/client/casual.html b/apps/client/casual.html
iindex 69276f1..c93eba8 100644
---- a/apps/client/casual.html
++++ b/apps/client/casual.html
@@@ -25,6 +25,22 @@
        #navbar-mount {
          min-height: 56px;
        }
++      /* The game is a dark surface, so the Frame drawn into it wears the dark theme's ink whatever theme
++         the visitor picked (a light theme's page ink on #0b0820 is unreadable). Same block as
++         src/ui/styles.css on the play shell: this page links no stylesheet of its own. */
++      #navbar-mount,
++      #ov-footer {
++        --bg-primary: #0a0f1c;
++        --bg-secondary: #101828;
++        --bg-tertiary: #172238;
++        --bg-card: #131c2e;
++        --text-primary: #e6edf7;
++        --text-secondary: #96a7c2;
++        --text-muted: #7386a3;
++        --border: #1f2d47;
++        --border-light: #2c3d5c;
++        color-scheme: dark;
++      }
        .cg {
          max-width: 480px;
          margin: 0 auto;
ddiff --git a/apps/client/src/ui/styles.css b/apps/client/src/ui/styles.css
iindex bfdb215..3d7ce78 100644
---- a/apps/client/src/ui/styles.css
++++ b/apps/client/src/ui/styles.css
@@@ -58,6 +58,30 @@ body {
    z-index: 30;
  }
  
++/* ── The Frame inside the shell ────────────────────────────────────
++   The stage is a permanently dark surface (html, body above), so the
++   Frame drawn into it wears the dark theme's ink whatever theme the
++   visitor picked. Without this a light theme hands the navbar its
++   page ink — daylight's #1a1a2e — which sits on #0b0e11 at 1.15:1
++   (the burger) and 2.32:1 (the search orb) at 390 px on
++   openvibe.games/play, below even the 3:1 a UI icon needs. The bars
++   are transparent until the page scrolls, so the canvas is what they
++   read against. Pinned on the mounts, not on <html>: the theme-loader
++   writes its own tokens inline there. */
++#navbar-mount,
++#ov-footer {
++  --bg-primary: #0a0f1c;
++  --bg-secondary: #101828;
++  --bg-tertiary: #172238;
++  --bg-card: #131c2e;
++  --text-primary: #e6edf7;
++  --text-secondary: #96a7c2;
++  --text-muted: #7386a3;
++  --border: #1f2d47;
++  --border-light: #2c3d5c;
++  color-scheme: dark;
++}
++
  #stage {
    position: relative;
    flex: 1 1 auto;