feat(gnoweb): dark theme support by alexiscolin · Pull Request #5145 · gnolang/gno

alexiscolin · 2026-02-13T08:43:56Z

This PR adds dark mode to gnoweb.

Theming infrastructure:

Semantic CSS tokens (--s-color-*) defined in :root for light mode and overridden in [data-theme="dark"] for dark mode. Components use tokens instead of raw colors, so theme changes are centralized.
A small inline script in <head> reads localStorage AND prefers-color-scheme, sets data-theme on <html> before first paint, avoiding a visible flash of the wrong theme.

3-way theme toggle

The toggle cycles through System → Light → Dark (instead of a binary light/dark switch).
System mode (the default) follows the OS prefers-color-scheme and reacts to changes in real time via a matchMedia listener.
Three footer icons reflect the active mode: sun (light), moon (dark), contrast circle (system).
The chosen preference is persisted in localStorage.

Syntax highlighting

Dual chroma stylesheet: friendly theme for light mode, nord for dark mode.
Dark chroma CSS is scoped under [data-theme="dark"] { ... } using CSS nesting, generated at runtime by WriteChromaCSS.
RenderConfig now supports a ChromaDarkStyle field; when nil, only light CSS is emitted.

Logo & gnome dark mode

The gnome icon (header, user profile, status page) is now an inline SVG template (ui/gnome) instead of an external <img>, enabling CSS variable–driven color switching.
The footer logo (ui/logo) uses the same CSS variables for its gnome paths.
Semantic tokens --s-logo-hat and --s-logo-beard are overridden in [data-theme="dark"] to match the official dark branding.

Gno2D2 · 2026-02-13T08:44:29Z

🛠 PR Checks Summary

🔴 Changes related to gnoweb must be reviewed by its codeowners

Manual Checks (for Reviewers):

IGNORE the bot requirements for this PR (force green CI check)

✅ Automated Checks (for Contributors):

🟢 Maintainers must be able to edit this pull request (more info)
🔴 Changes related to gnoweb must be reviewed by its codeowners

☑️ Contributor Actions:

Fix any issues flagged by automated checks.
Follow the Contributor Checklist to ensure your PR is ready for review.
- Add new tests, or document why they are unnecessary.
- Provide clear examples/screenshots, if necessary.
- Update documentation, if required.
- Ensure no breaking changes, or include BREAKING CHANGE notes.
- Link related issues/PRs, where applicable.

☑️ Reviewer Actions:

Complete manual checks for the PR, including the guidelines and additional checks if applicable.

📚 Resources:

Debug

Automated Checks

Maintainers must be able to edit this pull request (more info)

If

🟢 Condition met
└── 🟢 And
    ├── 🟢 The base branch matches this pattern: ^master$
    └── 🟢 The pull request was created from a fork (head branch repo: alexiscolin/gno)

Then

🟢 Requirement satisfied
└── 🟢 Maintainer can modify this pull request

Changes related to gnoweb must be reviewed by its codeowners

If

🟢 Condition met
└── 🟢 And
    ├── 🟢 The base branch matches this pattern: ^master$
    └── 🟢 A changed file matches this pattern: ^gno.land/pkg/gnoweb/ (filename: gno.land/pkg/gnoweb/components/layouts/footer.html)

Then

🔴 Requirement not satisfied
└── 🔴 Or
    ├── 🔴 Or
    │   ├── 🔴 And
    │   │   ├── 🟢 Pull request author is user: alexiscolin
    │   │   └── 🔴 This user reviewed pull request: gfanton (with state "APPROVED")
    │   └── 🔴 And
    │       ├── 🔴 Pull request author is user: gfanton
    │       └── 🔴 This user reviewed pull request: alexiscolin (with state "APPROVED")
    └── 🔴 And
        ├── 🔴 Not (🟢 Pull request author is user: alexiscolin)
        ├── 🟢 Not (🔴 Pull request author is user: gfanton)
        └── 🔴 Or
            ├── 🔴 This user reviewed pull request: alexiscolin (with state "APPROVED")
            └── 🔴 This user reviewed pull request: gfanton (with state "APPROVED")

Manual Checks

**IGNORE** the bot requirements for this PR (force green CI check)
If
🟢 Condition met
└── 🟢 On every pull request
Can be checked by

Any user with comment edit permission

codecov · 2026-02-13T08:47:30Z

Codecov Report

❌ Patch coverage is 83.33333% with 2 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
gno.land/pkg/gnoweb/render.go	81.81%	1 Missing and 1 partial ⚠️

📢 Thoughts on this report? Let us know!

thehowl

A few graphical nits:

The icon is quite small on some screen sizes, too small sometimes:

It doesn't update the icon when clicked

Screencast.From.2026-02-17.18-25-11.mp4

(only updates when refreshed).

Love this <3

gno.land/pkg/gnoweb/components/layouts/footer.html

thehowl · 2026-02-17T17:28:43Z

Also, some colors in syntax highlighting have become harder to read:

…rt and update footer layout

…stency across components

alexiscolin · 2026-02-18T04:32:33Z

Thank you, @thehowl. I updated the PR with some of your suggestions.

I added a new chroma style for the dark theme,
I fixed the icon (TypeScript declaration issue), which now updates when clicked.
I also added a third state for the default browsing in the button; this was the case by default, but it didn't update after clicking the theme button.
Additionally, I resolved some issues with the logo image, which was a bit trickier.

~~However, I cannot reproduce the icon size issue. Could you please provide the screen size and browser you used?~~

EDIT: I assume you are using Firefox. I just made a fix for the icon size.

alexiscolin · 2026-02-18T05:30:47Z

alexiscolin added 2 commits February 13, 2026 16:26

fix: update global token to be semantics ones

178e68b

feat: datk theme tokens and switch implementation

6eabe64

github-project-automation bot added this to 🧙‍♂️Gno.land development and 💪 Bounties & Worx Feb 13, 2026

github-project-automation bot moved this to Triage in 🧙‍♂️Gno.land development Feb 13, 2026

github-actions bot assigned alexiscolin Feb 13, 2026

github-actions bot added 📦 ⛰️ gno.land Issues or PRs gno.land package related 🌍 gnoweb Issues & PRs related to gnoweb and render labels Feb 13, 2026

Gno2D2 requested a review from gfanton February 13, 2026 08:44

alexiscolin added 4 commits February 13, 2026 17:47

chore: linter

3346ee5

refactor: improve theme toggle implementation and update footer layout

75aa244

Merge branch 'master' into feat/gnoweb-darkmode

8b50cab

style: improve dark theme color harmony and contrast

0899e26

alexiscolin marked this pull request as ready for review February 17, 2026 08:30

chore: update comments

a43db64

thehowl approved these changes Feb 17, 2026

View reviewed changes

gno.land/pkg/gnoweb/components/layouts/footer.html Show resolved Hide resolved

github-project-automation bot moved this to In Progress in 💪 Bounties & Worx Feb 17, 2026

alexiscolin added 4 commits February 18, 2026 11:31

feat: enhance theme toggle functionality with system preference suppo…

8304a1d

…rt and update footer layout

chore: lint

5cc6dfb

feat: add support for dark theme in syntax highlighting

be88fe2

refactor: replace static logo images with template for improved consi…

f03b22f

…stency across components

alexiscolin added 2 commits February 18, 2026 14:19

Merge branch 'master' into feat/gnoweb-darkmode

77e813f

chore: add test

dcd6dfb

alexiscolin added 2 commits February 18, 2026 14:50

fix: test and icon size on Firefox

530265b

fix: hover effect to text color on footer logo

112eff3

alexiscolin added 4 commits February 18, 2026 18:18

Merge branch 'master' into feat/gnoweb-darkmode

b22f859

Merge branch 'master' into feat/gnoweb-darkmode

f410c18

Merge branch 'master' into feat/gnoweb-darkmode

d8d3afd

Merge branch 'master' into feat/gnoweb-darkmode

272e4d5

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(gnoweb): dark theme support#5145

feat(gnoweb): dark theme support#5145
alexiscolin wants to merge 19 commits intognolang:masterfrom
alexiscolin:feat/gnoweb-darkmode

alexiscolin commented Feb 13, 2026 •

edited

Loading

Uh oh!

Gno2D2 commented Feb 13, 2026 •

edited

Loading

✅ Automated Checks (for Contributors):

☑️ Contributor Actions:

☑️ Reviewer Actions:

📚 Resources:

If

Then

If

Then

If

Can be checked by

Uh oh!

codecov bot commented Feb 13, 2026 •

edited

Loading

Uh oh!

thehowl left a comment

Uh oh!

Uh oh!

thehowl commented Feb 17, 2026

Uh oh!

alexiscolin commented Feb 18, 2026 •

edited

Loading

Uh oh!

alexiscolin commented Feb 18, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Comments

Conversation

alexiscolin commented Feb 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Gno2D2 commented Feb 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🛠 PR Checks Summary

Manual Checks (for Reviewers):

✅ Automated Checks (for Contributors):

☑️ Contributor Actions:

☑️ Reviewer Actions:

📚 Resources:

If

Then

If

Then

If

Can be checked by

Uh oh!

codecov bot commented Feb 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

thehowl left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

thehowl commented Feb 17, 2026

Uh oh!

alexiscolin commented Feb 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

alexiscolin commented Feb 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Comments

alexiscolin commented Feb 13, 2026 •

edited

Loading

Gno2D2 commented Feb 13, 2026 •

edited

Loading

codecov bot commented Feb 13, 2026 •

edited

Loading

alexiscolin commented Feb 18, 2026 •

edited

Loading

alexiscolin commented Feb 18, 2026 •

edited

Loading