--- title: "You're writing twice as much CSS as you need to" url: https://daily.dev/posts/you-re-writing-twice-as-much-css-as-you-need-to-ccayxsc89 source_url: https://www.youtube.com/watch?v=NNjbOBGG_6g type: video:youtube source: "Kevin Powell" published: 2026-05-21T13:15:45.069Z updated: 2026-05-21T13:16:01.529Z tags: ["css"] reading_time: 2 upvotes: 3 comments: 0 language: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # You're writing twice as much CSS as you need to **[Kevin Powell](https://daily.dev/sources/kevinpowell)** · 2 min read · 3 upvotes · 0 comments ## Summary Modern CSS offers two approaches for dynamic color manipulation: relative colors and color-mix(). While relative colors let you modify a color's lightness channel, they can break in dark/light mode scenarios — darkening an already-dark button produces no visible hover effect. color-mix() solves this by blending a button's background color toward a neutral that flips between light and dark schemes, automatically producing the correct contrast direction. By mixing in just 20% of the neutral color, you get a subtle, scheme-aware hover effect without writing separate CSS for light and dark modes. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Similar posts on daily.dev - [contrast-color\(\) beyond black & white](https://daily.dev/posts/contrast-color-beyond-black-white-ohb43x9xc) · Una Kravets · 0 upvotes · 0 comments - [A few ways of specifying per-theme colours in only CSS — Chris Morgan](https://daily.dev/posts/a-few-ways-of-specifying-per-theme-colours-in-only-css-chris-morgan-yeihwzack) · Lobsters · 0 upvotes · 0 comments --- Tags: [#css](https://daily.dev/tags/css) [View this post on daily.dev](https://daily.dev/posts/you-re-writing-twice-as-much-css-as-you-need-to-ccayxsc89)