open-props/src/extra/theme.light.switch.css

<div align="center">

@import "../props.media.css";

:where(
  [data-theme="light"],
  .light,
  .light-theme
) {
  color-scheme: light;

  --link: var(--indigo-7);
  --link-visited: var(--purple-7);

  --text-1: var(--gray-12);
  --text-2: var(--gray-7);

  --surface-1: var(--gray-0);
  --surface-2: var(--gray-2);
  --surface-3: var(--gray-3);
  --surface-4: var(--gray-4);

  --scrollthumb-color: var(--gray-7);
  --shadow-color: 220 3% 15%;
  --shadow-strength: 1%;
  --inner-shadow-highlight: inset 0 -.5px 0 0 #fff, inset 0 .5px 0 0 #0001;

  @media (--HDcolor) {
    @supports (color: color(display-p3 0 0 0)) {
      --link: color(display-p3 .1 .39 1);
      --link-visited: color(display-p3 .6 .2 1);
    }
  }

  & :where(dialog) {
    background-color: var(--surface-1);
  }

  & :where(button,.btn) {
    --_highlight: var(--_highlight-light);
    --_bg: var(--_bg-light);
    --_ink-shadow: var(--_ink-shadow-light);

    &:where([type="reset"]) {
      --_text: var(--red-6);
      --_border: var(--red-3);
    }
  }

  & :where(button,.btn,input:is([type="button"],[type="submit"],[type="reset"]))[disabled] {
    --_text: var(--gray-6);
  }

  & :where(textarea, select, input:not([type="button"],[type="submit"],[type="reset"])) {
    background-color: var(--surface-2);
  }
}