Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

[Feature]: Apply the saved UI theme before the WASM bundle boots

Open Beginner friendly
  • Is something wrong?
#40 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
83/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Active
Tech stack
javascript, rust, wasm
Domain
frontend

Research direction

The issue points to index.html, crates/app/src/main.rs:36-44, vercel.json, and SECURITY.md. Read the current theme effect and CSP exception discussion, then check how the codeframe-ui-theme value is stored and what theme values it accepts. Done means the saved theme sets data-theme on html before first paint, the CSP discussion documents the inline script, and the post-boot effect remains the source of truth.

Written by the indexing model from the issue text.

Description

enhancement good first issue
Problem

The saved UI theme is applied by a Leptos Effect that runs after the WASM bundle boots (crates/app/src/main.rs:36-44). Users who selected dark or sepia see a flash of the light theme on every page load, which is most noticeable on slow connections and on the installed PWA.

Proposed solution

Apply the persisted theme before the first paint. The simplest approach is a tiny inline script in index.html that reads the codeframe-ui-theme key from localStorage and sets data-theme on <html>. The CSP in vercel.json already allows script-src 'unsafe-inline' (documented in SECURITY.md as a Trunk bootstrap requirement), so no CSP change is needed, but the script must be added to the same exception discussion to stay auditable.

The Leptos effect can stay as the source of truth after boot; the inline script only prevents the first-paint flash.

Alternatives considered
  • CSS-only solution with prefers-color-scheme: only covers light/dark system preference, not the app's three-way theme or the user's explicit choice.
  • Accept the flash: it is small but visible on every load and works against the "quiet, instant" positioning.
Project constraints
  • This keeps everything client-side (no backend, no server-side processing; code never leaves the browser).
  • This does not introduce a DOM-screenshot library (html2canvas, dom-to-image); rendering stays on Canvas2D/SVG.
  • This respects resolution honesty: the export canvas is drawn at true scale and never upscaled after the fact.
Dominant language
Rust
Stars
1
Forks
0
Avg merge
1d 7h
Merged PRs (30d)
5

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from suradet-ps/codeframe

All issues in suradet-ps/codeframe

Similar issues

More Rust issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.