CSSによるテーマ設定とダークモード対応
ポップアップとオプションページを一貫したスタイルに整え、ライトテーマとダークテーマに対応し、ユーザーの設定を尊重します。
「CSSによるテーマ設定とダークモード対応」はCoddyKit上の無料Browser Extensions Development (Chrome & Edge)レッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはBrowser Extensions Development (Chrome & Edge)学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Browser Extensions Development (Chrome & Edge)コースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
Why Theming Matters
Your popup and options pages are small windows into your extension. Consistent, polished styling builds trust and makes the extension feel native to the browser.
Supporting dark mode respects users who set their system to a dark appearance.
Linking a Stylesheet
Keep styles in a separate CSS file and link it from your popup HTML for clean separation.
<head>
<link rel="stylesheet" href="popup.css">
</head>CSS Custom Properties
Define your color palette once with CSS variables. Then every component references the variable instead of a hard-coded color.
:root {
--bg: #ffffff;
--text: #1a1a1a;
--accent: #3367d6;
}Applying the Variables
Use the variables across your layout so a single change updates the whole theme.
body {
background: var(--bg);
color: var(--text);
}
button {
background: var(--accent);
}Detecting System Dark Mode
The prefers-color-scheme media query tells you the user's system theme. Override your variables inside it.
@media (prefers-color-scheme: dark) {
:root {
--bg: #1e1e1e;
--text: #f5f5f5;
}
}Sizing the Popup
Popups size themselves to their content. Set an explicit width so the layout is predictable and not too cramped.
body {
width: 320px;
margin: 0;
font-family: system-ui, sans-serif;
}A Manual Theme Toggle
Let users override the system theme by adding a class to the root element from JavaScript.
document.documentElement.classList.toggle('dark', isDark)Styling the Manual Theme
Pair the toggle class with its own variable overrides, mirroring the media query.
.dark {
--bg: #1e1e1e;
--text: #f5f5f5;
}Persisting the Choice
Save the user's theme preference with the storage API so it survives popup reopens and browser restarts.
chrome.storage.sync.set({ theme: 'dark' })Reusing Styles Across Pages
Share one CSS file between your popup and options page to keep them visually consistent and avoid duplicating colors and spacing rules.
<link rel="stylesheet" href="../shared/theme.css">Accessibility Considerations
Ensure enough contrast between text and background in both themes, and never rely on color alone to convey meaning. Test with browser dev tools' contrast checker.
Quick Check
Check your theming knowledge.
Recap
You learned to theme extension UI:
- Centralize colors in CSS custom properties
- Detect dark mode with
prefers-color-scheme - Offer a manual toggle and persist it in storage
- Share styles across popup and options pages
- Keep contrast accessible
A polished, theme-aware UI makes your extension feel professional.
よくある質問
「CSSによるテーマ設定とダークモード対応」レッスンは無料ですか？
はい。「CSSによるテーマ設定とダークモード対応」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Browser Extensions Development (Chrome & Edge)コースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Browser Extensions Development (Chrome & Edge)コースには全4レッスンが含まれています。
「CSSによるテーマ設定とダークモード対応」で何を学びますか？
ポップアップとオプションページを一貫したスタイルに整え、ライトテーマとダークテーマに対応し、ユーザーの設定を尊重します。 ブラウザで直接実行するハンズオンコードでBrowser Extensions Development (Chrome & Edge)を演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Browser Extensions Development (Chrome & Edge)を始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのBrowser Extensions Development (Chrome & Edge)は初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「CSSによるテーマ設定とダークモード対応」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このBrowser Extensions Development (Chrome & Edge)レッスンでコードを書いて実行できますか？
はい。すべてのBrowser Extensions Development (Chrome & Edge)レッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- インタラクティブなポップアップUIの作成
- オプションページの構築
- UIコンポーネント間の通信
- CSSによるテーマ設定とダークモード対応