Browser Extensions Development (Chrome & Edge) · درس

التنسيق باستخدام CSS ودعم الوضع الداكن

نسّق صفحات النافذة المنبثقة والخيارات باستمرار، وادعم السمات الفاتحة والداكنة، واحترم تفضيلات المستخدمين.

التنسيق باستخدام CSS ودعم الوضع الداكن درس مجاني في Browser Extensions Development (Chrome & Edge) على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 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 ودعم الوضع الداكن» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Browser Extensions Development (Chrome & Edge)، انتقل إلى CoddyKit PRO. تتضمن دورة Browser Extensions Development (Chrome & Edge) 4 دروس في المجموع.

ماذا ستتعلم في «التنسيق باستخدام CSS ودعم الوضع الداكن»؟

نسّق صفحات النافذة المنبثقة والخيارات باستمرار، وادعم السمات الفاتحة والداكنة، واحترم تفضيلات المستخدمين. تتمرن على Browser Extensions Development (Chrome & Edge) مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 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) يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Browser Extensions Development (Chrome & Edge)