From 43ca857727d4ee3d26d5e04767300424839699f4 Mon Sep 17 00:00:00 2001 From: Ariz Faiyaz Date: Sat, 18 Oct 2025 04:26:59 +0530 Subject: [PATCH] feat(curriculum): Add interactive examples for dark mode lesson (#62883) --- .../672bafe4ef812b78696b0e27.md | 209 +++++++++++++++++- 1 file changed, 208 insertions(+), 1 deletion(-) diff --git a/curriculum/challenges/english/blocks/lecture-user-centered-design/672bafe4ef812b78696b0e27.md b/curriculum/challenges/english/blocks/lecture-user-centered-design/672bafe4ef812b78696b0e27.md index 1fa8dc87720..62c0a000746 100644 --- a/curriculum/challenges/english/blocks/lecture-user-centered-design/672bafe4ef812b78696b0e27.md +++ b/curriculum/challenges/english/blocks/lecture-user-centered-design/672bafe4ef812b78696b0e27.md @@ -5,14 +5,221 @@ challengeType: 19 dashedName: what-are-best-practices-for-designing-a-dark-mode-feature --- -# --description-- +# --interactive-- + +**NOTE**: Some of the interactive examples might use CSS that you haven't learned yet. Don't worry about trying to understand all of the code. The goal of the examples is to show you previews for these design concepts so you better understand how things work. Dark mode is a special feature on web applications where you can change the default light color scheme to a dark color scheme. This helps reduce eye strain and improve readability in low-light conditions. When designing your dark mode features, it is important to understand best practices to ensure that your dark mode feature is effective and user-friendly. +Click on the `Toggle Dark Mode` button in the example below to see how dark mode works. + +:::interactive_editor + +```html + + + + +
+

This is a simple dark mode example.

+
+ + +``` + +```css +body { + background: #f5f5f5; + color: #222; + font-family: sans-serif; + transition: background 0.3s, color 0.3s; +} + +button { + margin: 1rem; + padding: 0.5rem 1rem; + cursor: pointer; +} + +body.dark { + background: #121212; + color: #e0e0e0; +} +``` + +```js +document.getElementById('theme-toggle').addEventListener('click', () => { + document.body.classList.toggle('dark'); +}); +``` + +::: + The first consideration is the avoidance of saturated colors in dark mode. Saturated colors are colors that are bright and intense. For example, a bright magenta button against a dark gray background can be too intense and cause eye strain. Instead, you should use desaturated colors in dark mode. Desaturated colors are colors that are less intense, have a lower saturation level, and more comfortable to look at in dark mode. +:::interactive_editor + +```html + + + + +
+

Color Saturation in Dark Mode

+

Compare the two buttons below. The first uses a saturated color, the second is desaturated for better accessibility in dark mode.

+ +
+ + +
+
+ + +``` + +```css +body { + background-color: #f0f0f0; + color: #111; + font-family: sans-serif; + transition: background 0.3s, color 0.3s; + padding: 1rem; +} + +button { + padding: 0.6rem 1.2rem; + font-size: 1rem; + border-radius: 5px; + cursor: pointer; + margin-right: 1rem; + transition: background 0.3s, color 0.3s; +} + +.buttons button { + border: none; +} + +.saturated { + background-color: #ff00ff; + color: white; +} + +.desaturated { + background-color: #c472b5; + color: white; +} + +body.dark { + background-color: #121212; + color: #e0e0e0; +} + +body.dark .saturated { + background-color: #ff00ff; + color: black; +} + +body.dark .desaturated { + background-color: #925f88; + color: white; +} +``` + +```js +document.getElementById('theme-toggle').addEventListener('click', () => { + document.body.classList.toggle('dark'); +}); +``` + +::: + Another consideration with dark mode is the use of pure black backgrounds with white text. While this high contrast can be effective, it can also be too harsh on the eyes. Instead, consider using a dark gray background with light gray text for a softer contrast. Text will be easier on the eyes and more comfortable to read in dark mode. +:::interactive_editor + +```html + + + + +
+

Dark Mode Contrast Comparison

+

Compare the two sections below. One uses pure black and white, the other uses dark gray and light gray for better readability.

+ +
+
+

High Contrast

+

Pure black background with white text. While readable, it can be harsh on the eyes.

+
+ +
+

Soft Contrast

+

Dark gray background with light gray text. Easier to read and more comfortable for long periods.

+
+
+
+ + +``` + +```css +body { + background-color: #f0f0f0; + color: #111; + font-family: sans-serif; + padding: 1rem; + transition: background 0.3s, color 0.3s; +} + +button { + padding: 0.5rem 1rem; + margin-bottom: 1rem; + cursor: pointer; +} + +.dark-mode-examples { + display: flex; + gap: 2rem; + flex-wrap: wrap; +} + +.box { + padding: 1rem; + border-radius: 8px; + width: 300px; + transition: background 0.3s, color 0.3s; +} + +.box { + background-color: #ffffff; + color: #111; + box-shadow: 0 2px 4px rgba(0,0,0,0.1); +} + +body.dark .box.harsh-dark { + background-color: #000000; + color: #ffffff; +} + +body.dark .box.soft-dark { + background-color: #1e1e1e; + color: #cccccc; +} + +body.dark { + background-color: #121212; + color: #e0e0e0; +} +``` + +```js +document.getElementById('theme-toggle').addEventListener('click', () => { + document.body.classList.toggle('dark'); +}); +``` + +::: + Another consideration is the use of dark mode with the site's brand identity. A brand identity is a set of visual elements that represent a brand, such as the logo, colors, and typography. When implementing dark mode, you should consider how the dark mode feature is consistent with your brand's colors and style. It is fine to have the brand icon and buttons at full saturation, while the surrounding elements are desaturated. In general, when it comes to design, you always want to be mindful of the user experience and contrast levels. Dark mode is no exception, and by following these best practices, you can create a dark mode feature that is effective and user-friendly.