Kevin Powell - CommunityKP-C
Kevin Powell - Community•14mo ago•
55 replies
MC23

Best strategy for light/dark theme using light-dark() function

I'm experimenting with the new light-dark() function and I was looking for ideas on how to better implement the various colours. This is my current implementation: 
:root {
  /* text */
  --l-text-color: #1a1c20;
  --d-text-color: #e2e1e1;
  /* background */
  --l-bg-color: #eeeff1;
  --d-bg-color: #1f2023;
  /* button border */
  --l-btn-border: #0e0f10;
  --d-btn-border: #eeecec;

  color-scheme: light dark;

  --text-color: light-dark(var(--l-text-color), var(--d-text-color));
  --bg-color: light-dark(var(--l-bg-color), var(--d-bg-color));
  --btn-border-color: light-dark(var(--l-btn-border), var(--d-btn-border));
}
My final idea would be, using CSS only, to start from #fff and #000 colors and for the various elements (background, text, borders etc) use a variation of this base color. Is it wrong?
Was this page helpful?