0Pricing
Browser Extensions Development (Chrome & Edge) · บทเรียน

การกำหนดธีมด้วย CSS และการรองรับโหมดมืด

จัดรูปแบบหน้าป๊อปอัปและหน้าตัวเลือกให้สอดคล้องกัน รองรับธีมสว่างและธีมมืด และเคารพการตั้งค่าของผู้ใช้

การกำหนดธีมด้วย CSS และการรองรับโหมดมืด เป็นบทเรียน Browser Extensions Development (Chrome & Edge) ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน 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 และการรองรับโหมดมืด” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Browser Extensions Development (Chrome & Edge) ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Browser Extensions Development (Chrome & Edge) มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การกำหนดธีมด้วย CSS และการรองรับโหมดมืด”

จัดรูปแบบหน้าป๊อปอัปและหน้าตัวเลือกให้สอดคล้องกัน รองรับธีมสว่างและธีมมืด และเคารพการตั้งค่าของผู้ใช้ คุณปฏิบัติ Browser Extensions Development (Chrome & Edge) ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Browser Extensions Development (Chrome & Edge) หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Browser Extensions Development (Chrome & Edge) บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “การกำหนดธีมด้วย CSS และการรองรับโหมดมืด” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Browser Extensions Development (Chrome & Edge) นี้ได้ไหม

ได้ บทเรียน Browser Extensions Development (Chrome & Edge) ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. การสร้างส่วนติดต่อผู้ใช้ป๊อปอัปแบบโต้ตอบ
  2. การสร้างหน้าตัวเลือก
  3. การสื่อสารระหว่างองค์ประกอบส่วนติดต่อผู้ใช้
  4. การกำหนดธีมด้วย CSS และการรองรับโหมดมืด
← กลับไปที่ Browser Extensions Development (Chrome & Edge)