aidenybai / aidenybai/react-grab

feat: dark mode / color scheme support in Theme config

オープン
#256 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る
主要言語
TypeScript
スター
7.6k
フォーク
340
平均マージ
5時間 12分
マージ済み PR(30日)
6

説明

## Summary

React Grab's overlay UI (toolbar, element labels, selection box, etc.) is currently hardcoded to a light color scheme (`bg-white`, `text-black`, `border-#D9D9D9`, etc.). This makes it visually jarring when used in apps that run in dark mode.

## Proposal

Add a `colorScheme` option to the `Theme` interface that supports multiple integration strategies, similar to how libraries like Mantine, Radix, and shadcn/ui handle it:

```ts
interface Theme {
// ...existing options

/**
* Controls the color scheme of the React Grab overlay UI.
*
* - 'light' | 'dark': Force a specific scheme
* - 'auto': Follow `prefers-color-scheme` media query
* - 'class': Read from a `.dark` class on or (Tailwind convention)
* - 'attribute': Read from `data-theme` or `data-color-scheme` attribute on
* - (element: HTMLElement) => 'light' | 'dark': Custom resolver for any other setup
*
* @default 'auto'
*/
colorScheme?:
| 'light'
| 'dark'
| 'auto'
| 'class'
| 'attribute'
| ((root: HTMLElement) => 'light' | 'dark');
}
```

### Why multiple strategies?

Different ecosystems set dark mode differently:

| Strategy | Used by |
|---|---|
| `prefers-color-scheme` media query | OS-level / browser default |
| `.dark` class on `` | Tailwind CSS, most utility-first setups |
| `data-mantine-color-scheme` attribute | Mantine |
| `data-theme` / `data-color-scheme` attribute | Radix, daisyUI, many component libraries |
| Custom JS toggle | App-specific state (React context, localStorage, etc.) |

A single `'dark'` boolean won't cover these. The function escape hatch (`(root) => 'light' | 'dark'`) ensures any setup not covered by the built-in strategies can still integrate.

### Minimal CSS impact

Since the overlay already uses Tailwind internally, adding dark variants for the existing utility classes should be straightforward. The shadow DOM host just needs to resolve which scheme is active and apply a `dark` class (or CSS custom properties) to its internal root.

## Alternatives considered

- **CSS custom properties only** — Exposing `--rg-bg`, `--rg-text`, etc. would work but puts the burden on every consumer to define a full palette. A `colorScheme` option with sensible dark defaults is more ergonomic.
- **`hue` rotation** — The existing `hue` option shifts colors but doesn't invert lightness, so it can't achieve a dark theme.

## Context

React Grab renders inside a Shadow DOM host with `all: initial`, so it can't inherit the page's dark mode styles automatically. This makes explicit color scheme support necessary rather than optional.

コントリビューションガイド

コントリビューションガイドを開く

評価

この issue はまだ評価されていません。

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

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