#51 dark theme - Githubissues

ThinaticSystem / thinaticsystem.com

「㈲しなちくシステム」の設計図

https://ThinaticSystem.com

13 stars 2 forks source link

#51 dark theme #52

Closed ThinaticSystem closed 2 years ago

ThinaticSystem commented 2 years ago

resolves #51

やることリスト（に潜む、小鳥🐤）

[x] スイッチの実装

[x] ページ読み込み時に

if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
}

をやる（謎）

[x] ダークテーマのデザインをやる
[x] スイッチのデザインと配置をなんとかする

cloudflare-pages[bot] commented 2 years ago

Deploying with Cloudflare Pages

Latest commit:	`78e4208`
Status:	✅ Deploy successful!
Preview URL:	https://fc54e6bd.thinaticsystem-com.pages.dev

View logs

ThinaticSystem commented 2 years ago

外部CSSファイルの@applyで定義されたクラスを当てた要素ではdark:variantが無視されるバグがあるっぽいそのためdark:variantを使いたい要素に@applyのクラスが当たっている場合は勿体ないけど@apply取っ払って中身をHTMLのインラインclassに直接移動させる

ThinaticSystem commented 2 years ago

それは大変なので無彩色のテキストのダークテーマ対応はtext-gray-N dark:text-gray-N指定をやめてopacity-Nに置き換える