Electron Desktop App Development · บทเรียน

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

เพิ่มธีมสว่างและธีมมืดแบบเนทีฟให้ส่วนติดต่อผู้ใช้ของ Electron ด้วยโมดูล nativeTheme และตัวแปร CSS เพื่อเสริมทักษะการสร้างส่วนติดต่อผู้ใช้ที่มีอยู่แล้ว

บทเรียน 4 จาก 413 ขั้นตอน

การกำหนดธีมและการรองรับโหมดมืด เป็นบทเรียน Electron Desktop App Development ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Electron Desktop App Development และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Electron Desktop App Development มีบทเรียนทั้งหมด 4 บทเรียน

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

Why Theming Matters

Desktop users expect apps to respect their system theme. A polished Electron app switches between light and dark automatically.

The nativeTheme Module

Electron exposes nativeTheme in the main process to read and control the OS appearance.

const { nativeTheme } = require('electron');
console.log(nativeTheme.shouldUseDarkColors);

Detecting Dark Mode

shouldUseDarkColors returns a boolean telling you the active appearance. Use it to pick initial styles.

function themeName(isDark) {
  return isDark ? 'dark' : 'light';
}
console.log(themeName(true));

Reacting to Changes

Listen for the updated event so your UI follows when the user switches their system theme live.

nativeTheme.on('updated', () => {
  const dark = nativeTheme.shouldUseDarkColors;
  win.webContents.send('theme-changed', dark);
});

CSS Variables for Themes

Define colors as CSS custom properties so switching themes only swaps a class on the root element.

:root {
  --bg: #ffffff;
  --fg: #111111;
}
.dark {
  --bg: #111111;
  --fg: #f5f5f5;
}

Applying the Theme Class

In the renderer, toggle a class based on the IPC message from the main process.

function applyTheme(isDark) {
  document.body.classList.toggle('dark', isDark);
}

Forcing a Theme

Let users override the system with nativeTheme.themeSource, which accepts 'system', 'light', or 'dark'.

function setSource(choice) {
  const valid = ['system', 'light', 'dark'];
  return valid.includes(choice) ? choice : 'system';
}
console.log(setSource('dark'));

Persisting User Choice

Save the user's theme preference so it survives restarts. A small config file or localStorage works well.

Theming Native Elements

The window title bar and menus can also follow the theme on platforms that support it, for a seamless look.

Avoiding Flash of Wrong Theme

Read the theme before the window shows, then reveal it on ready-to-show to avoid a jarring color flash.

Accessible Color Choices

Ensure both themes meet contrast ratios. Dark mode is not just inverted colors; test readability.

Quick Check

Test your theming knowledge.

ตอบคำถามในบทเรียนแบบโต้ตอบ

Recap

You learned to support light and dark themes using nativeTheme, CSS variables, live updates via IPC, user overrides with themeSource, and persistence of preferences.

เริ่มต้นได้ฟรี

เรียนรู้ JavaScript ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 12
บทเรียน: 47

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “การกำหนดธีมและการรองรับโหมดมืด” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การกำหนดธีมและการรองรับโหมดมืด” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Electron Desktop App Development ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Electron Desktop App Development มีบทเรียนทั้งหมด 4 บทเรียน

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

เพิ่มธีมสว่างและธีมมืดแบบเนทีฟให้ส่วนติดต่อผู้ใช้ของ Electron ด้วยโมดูล nativeTheme และตัวแปร CSS เพื่อเสริมทักษะการสร้างส่วนติดต่อผู้ใช้ที่มีอยู่แล้ว คุณปฏิบัติ Electron Desktop App Development ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Electron Desktop App Development หรือไม่

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

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

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

ฉันเขียนและรันโค้ดในบทเรียน Electron Desktop App Development นี้ได้ไหม

ได้ บทเรียน Electron Desktop App Development ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

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

← กลับไปที่ Electron Desktop App Development