Add theme toggle and update MineGeo branding

This commit is contained in:
2026-10-08 20:37:50 +05:00
parent 0b08672f4a
commit bf01d9801d
11 changed files with 574 additions and 5 deletions

32
docs/appearance.md Normal file
View File

@@ -0,0 +1,32 @@
# Theme and logo
The sun/moon buttons in the header and footer switch between dark and light mode.
Dark is the default. The choice is saved locally as `minegeo-theme-v1`, applied
before paint, and synchronized across tabs. Switching works for the current visit
even when browser storage is disabled. No account is required.
`app/appearance.css` supplies the light palette and shared logo styles. Map
artwork, parchment, terrain tiles, and panoramas retain their original colors.
The transparent source logo is `assets/branding/minegeo-mark-source.png`.
The optimized site asset is `public/images/minegeo-mark.webp`; `app/icon.png`
is the browser icon. The `Brand` component renders the mark and a live text
wordmark, keeping the site name accessible and sharp at small sizes.
Generated with the built-in imagegen tool using this prompt:
> Use case: logo-brand. Asset type: new MineGeo website logo symbol, transparent
> PNG. Primary request: create a distinctive polished compact symbol for a
> Minecraft geography guessing game, replacing a plain grass block. Subject:
> a bold angular location pin whose upper body is an isometric emerald
> grass-topped voxel cube, with a small ivory compass diamond cutout in the
> center. A unified single emblem, unmistakable silhouette, crisp deliberate
> geometric edges, contemporary gaming identity. Palette: rich forest green
> outline, vivid emerald and lime upper faces, warm ochre earth side, small
> ivory compass accent. Vector-like flat shapes with subtle face shading only,
> no photorealism, no extraneous floating elements, no words or letters, no
> landscape or map drawing. Composition: one centered emblem, fills most of
> square canvas with small uniform transparent margin, readable when shrunk
> to 40px, strong outline readable on both white and charcoal website backgrounds.
> Background genuinely transparent. Avoid mockups, glow, shadows beyond the
> emblem, fine textures, tiny detail, text, watermark.