Pemberian Tema dengan CSS dan Dukungan Mode Gelap
Atur gaya halaman popup dan opsi secara konsisten, dukung tema terang dan gelap, serta hormati preferensi pengguna.
Pemberian Tema dengan CSS dan Dukungan Mode Gelap adalah pelajaran Browser Extensions Development (Chrome & Edge) gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Browser Extensions Development (Chrome & Edge), dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Browser Extensions Development (Chrome & Edge) mencakup 4 pelajaran total.
Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.
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.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Pemberian Tema dengan CSS dan Dukungan Mode Gelap” gratis?
Ya — teks lengkap “Pemberian Tema dengan CSS dan Dukungan Mode Gelap” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Browser Extensions Development (Chrome & Edge), upgrade ke CoddyKit PRO. Kursus Browser Extensions Development (Chrome & Edge) mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Pemberian Tema dengan CSS dan Dukungan Mode Gelap”?
Atur gaya halaman popup dan opsi secara konsisten, dukung tema terang dan gelap, serta hormati preferensi pengguna. Kamu berlatih Browser Extensions Development (Chrome & Edge) dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Browser Extensions Development (Chrome & Edge)?
Tidak diperlukan pengalaman sebelumnya. Browser Extensions Development (Chrome & Edge) di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Pemberian Tema dengan CSS dan Dukungan Mode Gelap” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Browser Extensions Development (Chrome & Edge) ini?
Ya. Setiap pelajaran Browser Extensions Development (Chrome & Edge) menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Membuat UI Pop-up Interaktif
- Membangun Halaman Opsi
- Komunikasi Antarkomponen UI
- Pemberian Tema dengan CSS dan Dukungan Mode Gelap