Browser Extensions Development (Chrome & Edge) · 강의

CSS를 활용한 테마와 다크 모드 지원

팝업과 옵션 페이지의 스타일을 일관되게 지정하고, 라이트 테마와 다크 테마를 지원하며 사용자 환경설정을 존중합니다.

CSS를 활용한 테마와 다크 모드 지원은(는) CoddyKit의 무료 Browser Extensions Development (Chrome & Edge) 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 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/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Browser Extensions Development (Chrome & Edge) 강의 전체를 잠금 해제할 수 있습니다. Browser Extensions Development (Chrome & Edge) 강의에는 총 4개의 강의가 포함되어 있습니다.

“CSS를 활용한 테마와 다크 모드 지원”에서 뭘 배우나요?

팝업과 옵션 페이지의 스타일을 일관되게 지정하고, 라이트 테마와 다크 테마를 지원하며 사용자 환경설정을 존중합니다. 브라우저에서 직접 실행하는 실습 코드로 Browser Extensions Development (Chrome & Edge)을(를) 배우며, 24/7 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 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Browser Extensions Development (Chrome & Edge)(으)로 돌아가기