Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

[BUG]: Loading skeletons use hardcoded dark colors and appear as dark blocks in light mode on every page

オープン 初心者向け
  • 何か問題がありますか？
#326 コメント 1 件 リアクション 0 件 担当者 0 名 GitHub で見る

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

@g-k-s-03 がすでに取り組んでいます。

2026年10月9日 から。

  • #327 @g-k-s-03 による — オープン

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
78/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
javascript, react, tailwindcss
領域
frontend

調査の方向性

src/components/Orgexplorerskeletons.jsx から始めてください。このファイルでは Bar、Box、Circle、Pill のヘルパーが bg-neutral-800、bg-neutral-900、bg-neutral-950、border-neutral-800/divide-neutral-800 をハードコードしています。src/styles/global.css で対応するテーマ変数を探し、クラスをそれらに置き換えてください。ライトモードでは6つのスケルトンページすべてに明るいプレースホルダーが表示され、ダークモードの見た目は変わらないことを目視で確認したら完了です。

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

説明

bug
Summary

The loading skeletons shown while a page is fetching data don't follow the active theme. In light mode, every page that uses a skeleton displays solid black / dark grey blocks on a white background, which looks broken and inconsistent with the rest of the light theme.

Root cause

All skeletons are defined in src/components/Orgexplorerskeletons.jsx and are built from four shared helper components (Bar, Box, Circle, Pill). These helpers use fixed dark-theme Tailwind classes instead of the theme variables used everywhere else in the app:

Class used Where
bg-neutral-800 Bar, Circle, Pill (the pulsing placeholder bars)
bg-neutral-900, border-neutral-800 Box (card containers)
divide-neutral-800 Row dividers in the Repository and Contributor skeleton tables
bg-neutral-950, border-neutral-800 Network graph placeholder canvas
border-neutral-800 Tab underline row in the Governance skeleton

Because these colors are hardcoded, they stay dark regardless of whether light or dark mode is active. The skeletons were introduced in #117.

Affected pages

I verified this on all six pages that render a skeleton, and all of them are affected:

Page Skeleton component Affected in light mode
Overview OverviewSkeleton Yes
Repositories RepositorySkeleton Yes
Contributors ContributorSkeleton Yes
Network NetworkSkeleton Yes
Analytics AnalyticsSkeleton Yes
Governance GovernanceSkeleton

Yes |

Impact
  • Every light-mode user sees dark blocks each time a page loads, for example when re-running an analysis with a PAT.
  • It makes light mode look unfinished, even though the rest of the UI themes correctly.
  • Dark mode is not affected.
Proposed fix

Replace the hardcoded classes in Orgexplorerskeletons.jsx with the existing theme variables, using the same Tailwind CSS-variable syntax already used elsewhere in the codebase (e.g. hover:bg-(--bg), text-(--text2)):

  • placeholder bars: bg-neutral-800 → bg-(--surface2)
  • card containers: bg-neutral-900 → bg-(--surface)
  • borders and dividers: border-neutral-800 / divide-neutral-800 → border-(--border) / divide-(--border)
  • network canvas: bg-neutral-950 → bg-(--bg)

The exact variables can be matched against src/styles/global.css, so dark mode keeps its current look while light mode gets matching light placeholders.

Scope
  • One file only: src/components/Orgexplorerskeletons.jsx
  • No layout, logic or behavior changes, only color classes
  • I'll verify the result visually in both light and dark mode on all six pages

I'd be happy to work on this if that's okay.

Steps to Reproduce:
  1. Run the app locally (npm run dev) and explore any organization (e.g. AOSSIE-Org).
  2. Switch to light mode using the theme toggle in the navbar.
  3. Trigger a page's loading state:
    • Naturally: add a PAT in Settings, go to Overview, enable network throttling (DevTools → Network → Slow 4G) and click "Connect PAT & Run". The skeleton appears while the analysis reloads.
    • Or, to keep it on screen for inspection: temporarily change if (loading) to if (true) on the skeleton line of the page component (e.g. OverviewPage.jsx, line ~41), which is how I captured the screenshots.
  4. Observe that the skeleton is made of dark blocks on a white background.
  5. Repeat on Repositories, Contributors, Network, Analytics and Governance: same result.

Expected: Skeleton placeholders should use light colors in light mode and dark colors in dark mode, matching the active theme.

Actual: Skeleton placeholders are always dark, regardless of theme.

###Screenshots:

Overview skeleton (light mode): dark blocks on a white page
Overview skeleton in light mode showing dark blocks
Repositories skeleton in light mode showing dark blocks
Skeleton in light mode showing dark blocks
Skeleton in light mode showing dark blocks

主要言語
JavaScript
スター
42
フォーク
124
平均マージ
2日 22時間
マージ済み PR（30日）
10

環境構築

はじめの一歩

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

AOSSIE-Org/OrgExplorer のほかの issue

AOSSIE-Org/OrgExplorer の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

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

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