`light-dark()` CSS function for dual themes

[what1s1ove]

Clear and concise description of the problem

Not long ago, the CSS light-dark() function started being supported in all browsers.

This made it possible to eliminate the duplication of variable declarations for the dark theme if the project uses a dark theme both through media queries and classes.

It used to be like this:

/* src/css/variables.css */

:root {
  --text-color: #000;
   /* a lot of other variables here */

  @media (prefers-color-scheme: dark) {
    --text-color: #fff;
     /* a lot of other variables here */

    .shiki,
    .shiki span {
      color: var(--shiki-dark) !important;;
    }
  }

  html.dark {
    --text-color: #fff;
     /* a lot of other variables here */

    .shiki,
    .shiki span {
      color: var(--shiki-dark) !important;
    }
  }
}

Now it can be done like this:

/* src/css/variables.css */

:root {
  color-scheme: light dark;

  --text-color: light-dark(#000, #fff);
   /* a lot of other variables here */

  @media (prefers-color-scheme: dark) {
    color-scheme: dark;

    .shiki,
    .shiki span {
      color: var(--shiki-dark) !important;
    }
  }

  html.dark {
    color-scheme: dark;

    .shiki,
    .shiki span {
      color: var(--shiki-dark) !important;
    }
  }
}

The problem is that duplication for Shiki cannot be eliminated, as there is nothing to write as the first value for the light-dark() function.

Suggested solution

As an option, add the use of the light theme to the variable, just as it is currently done for the dark theme.

    .shiki,
    .shiki span {
      color: light-dark(var(--shiki-light), var(--shiki-dark));
    }

Alternative

No response

Additional context

Recently, I finished implementing the light-dark function on one of my websites. You can check it out here –https://github.com/what1s1ove/whatislove.dev/pull/610

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guide.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Contributes

• [ ] If this feature request is accepted, I am willing to submit a PR to fix this issue

[antfu]

You should be able to use it as in: https://shiki.style/guide/dual-themes#without-default-color

[what1s1ove]

You should be able to use it as in: https://shiki.style/guide/dual-themes#without-default-color

Ohh nice. I'm sorry, I didn't know about this functionality. Let me double check 🙏

[what1s1ove]

@antfu that works! Thank you so much!

Sorry to bother you with this issue 🥲 Could you close the issue?

If anyone is interested, here is how it looks like in my project - https://github.com/what1s1ove/whatislove.dev/pull/625