Le mode sombre est optimal lorsque l'environnement est faiblement éclairé, l'écran de type OLED économise de l'énergie et pourrait aider à maintenir la productivité sous stress.

Le Dark Mode est perçu comme moderne, sophistiqué, high-tech et mystérieux.

Le light mode inspire confiance et professionnalisme.

Comment créer un bon dark mode:

• les teintes noires et blanches magiques pour le dark mode:

  background-color: #181818;
  color: #fafafa;

• augmenter la taille du texte (1.2rem / 20% plus grand pour le texte courant)
• utiliser des polices grasses, jamais de light, mais des graisses regular ou medium
• laisser le choix du dark ou light mode

The website design changes every time it loads.

See https://codeberg.org/vasilis/the-web-you-want

The breakpoint is used for mobile, but appears inconvenient for tablet or half-screen windows.

Solutions:

• having more breakpoints in between
• design with container queries in mind
• make the design dynamic at its core, meaning that it can change based on the number of items
• leverage well supported features like Grid and Flex

The same content can create clarity for one person and confusion, stress, or exclusion for another, without changing a single word.

Accessibility is a must. Here are some examples

1. When color disappears completely

• Buttons that look clickable even without color
• Links that are underlined or styled consistently
• Hierarchy created through spacing, borders, size, and structure

2. When nice colors choices stop working

• Contrast that survives more than one type of vision
• Less reliance on subtle color differences
• Clear affordances that don’t depend on perfect perception

3. The most color blindness is ignored

• Meaning that survives without red or green
• Icons, labels, or position reinforcing importance
• Safer decisions and faster understanding

4. When text becomes slightly blurry

• Text that stays readable when slightly blurred
• Comfortable line height and spacing
• Zoom that doesn’t punish the layout

5. When you can only see a small part of the screen

• Clear headings that anchor the page#
• Logical reading order
• Visible focus states that guide navigation

7. When letters won't stay still (dyslexia)

• predictable layouts
• plain, calm language
• no uneccessary visual tricks

8. When language stops making sense

• plain language
• clear labels
• information that unfolds gradually, not all at once

A dialog transition. It can be definitely useful instead of heavy implementations. Here is a lightweight implementation without JS.

Emergence is a creative platform exploring the boundaries between art, design, and craftsmanship. Our name is inspired by the concept of emergence—the idea that individual elements, when combined, create something greater than the sum of their parts. We believe that collaboration between artists and makers, across disciplines like glasswork, furniture, lighting, textiles, and jewelry, transforms art into a collective experience.

a thing you absolutely cannot do is nest one interactive control inside another

it has few examples.

Upload the JSON output of the stats and visualize it

Done subtly and in moderation scroll fade can look fine†. Alas and to my dismay, subtlety is not a virtue of scroll fade proponents. Nor is timing. I’ve built too many websites that got almost to the finish line before I was hit with a generic scroll fade request. Fade what? Everything! Make everything fade into view! It’s too static, you know? Make it pop!

Winning arguments against: accessibility, impact on core web vitals

It's very chromium dependent though

Oh ok: the new UA styles will have uniform headings and not :is(article, aside, nav, section)

The use of a lot of icons in menus is a bad pattern.
12px icons are also too small for details.

A 3D engine relying on HTML and CSS.

A list of demos built with GSAP

TL;DR; use a negative GRAD value

GRAD stands for "grade", and it's a variable font axis that allows us to adjust the perceived weight of a font without changing the glyph size.

GRAD stands for "grade", and it's a variable font axis that allows us to adjust the perceived weight of a font without changing the glyph size.

body {
  --GRAD: 0;
  font-variation-settings: "GRAD" var(--GRAD);
}

@media (prefers-contrast: more) { body { --GRAD: 700 } }
@media (prefers-contrast: less) { body { --GRAD: -50 } }

@media (prefers-color-scheme: dark)                              { body { --GRAD: -50 } }
@media (prefers-color-scheme: dark) and (prefers-contrast: more) { body { --GRAD: 150 } }
@media (prefers-color-scheme: dark) and (prefers-contrast: less) { body { --GRAD: -150 } }

A cross platform UI library to build to apple, android, web.

The project is available under https://github.com/water-rs/waterui