深色模式实现
✏️ Editable
Loading...
Live Preview
⌘+Enter Run⌘+R Reset
About This Exercise
深色模式已成为现代应用的标配功能。
通过本 Lab，你将学会：
- 使用 CSS 变量管理颜色
- 使用 prefers-color-scheme 媒体查询
- 实现完整的深色主题
- 确保对比度和可读性
Intermediate⏱ 25-30 min
Learning Objectives
- 掌握 CSS 变量的使用
- 理解 prefers-color-scheme 媒体查询
- 学会设计深色模式颜色方案
- 确保文字和背景的对比度
Scenario
你正在为一个文章页面添加深色模式支持，需要确保在深色模式下内容依然清晰可读。
Why Do This
- CSS is fundamentally about constraining layout and visual hierarchy, not memorizing properties.
- Clarify the box model and layout rules first, then add visual polish — less rework that way.
- Writing styles as reusable patterns is more valuable than tweaking a single page.
Hands-on Practice
- Write the layout skeleton first (display/gap/align), then add colors and shadows.
- Extract repeated styles into reusable classes.
- Use validation rules to reverse-engineer the design intent of your current styles.
Common Mistakes
- Adding margin after margin to fix positioning while ignoring layout containers.
- Selectors nested too deep, causing style coupling.
- Only caring about how it looks without considering maintainability.
Deliverable
A reusable component style template (layout rules + visual rules + naming conventions).
My Progress
Completed Steps0 / 4
Total Attempts0
Best Score0%
Completion Criteria (Checkable)
Confirm before completing this Lab
Reflection Questions (Recommended)
What was your main layout decision? Why did you choose it?
What change did you make specifically for maintainability?
What would you prioritize improving next time?
Tags
CSS深色模式主题CSS变量