Add a light theme

オープン
#266 コメント 1 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
45/100
issue の種類
機能追加
明瞭さ
おおむね明確
活発さ
活発
技術スタック
css, nextjs, react, typescript

調査の方向性

Start in src/app/globals.css and list the tokens of the single dark palette; the prefers-reduced-motion rule around line 415 is the pattern to copy for a prefers-color-scheme block. Then grep for hard-coded colors, first at src/lib/public-metrics/card-image.tsx:20-29. Done means both themes pass axe on every screen, no hard-coded dark color remains, and each token pair's 4.5:1 contrast is recorded; the manual-switch question in the issue is still undecided, so confirm it before building one.

索引モデルが issue の本文から書いたものです。

説明

accessibility area: web blocked enhancement impact: low priority: P3 size: M

Summary

DevMacro has only a dark theme, so people who set their system to light mode, or who read better on a light background, get the dark palette everywhere. The app should offer a light palette that follows the system setting, with every token pair readable at 4.5 to 1 for body text.

Found in the UX review of integration/demo-2026-11 (pull request #205) at ce44e95, on the seeded demo workspace with simulated data.

Evidence

  • src/app/globals.css defines one dark palette and has no prefers-color-scheme rule. The only media query on a user preference is prefers-reduced-motion at src/app/globals.css:415.
  • The share cards hard-code the same dark colors (src/lib/public-metrics/card-image.tsx:20-29).

The dashboard in its only theme, dark

Scope

  • A light palette that follows the system setting, with every token pair at 4.5 to 1 for body text.

Acceptance criteria

  • Light and dark both pass axe on every app screen.
  • No hard-coded dark color left in components.
  • A contrast check for each token pair recorded on the pull request.

Decisions needed

  • Whether a manual theme switch is wanted as well as following the system.

Model: anthropic/claude-opus-5-5 | Reasoning effort: unknown

主要言語
TypeScript
スター
1
フォーク
1
平均マージ
6時間 56分
マージ済み PR(30日)
136

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

eddiejaoude/StackDash のほかの issue

eddiejaoude/StackDash の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。