Add dark-mode colors

[mikker]

I propose just overriding the necessary variables in a @media enclosure.

@media (prefers-color-scheme: dark) {
  --lexxy-color-ink: white; /* ish */
}

Would be happy to contribute unless you have something in the works or would like to be more settled before adding more styles?

[Merovex]

Well, those are variables, so it's very amenable to different methods. Here's what works for my apps, so YMMV.

  :root[data-theme="dark"] {
    /* Colors - Inverted lightness values */
    --lexxy-color-ink: oklch(90% 0 0);
    --lexxy-color-ink-medium: oklch(75% 0 0);
    --lexxy-color-ink-light: oklch(65% 0 0);
    --lexxy-color-ink-lighter: oklch(35% 0 0);
    --lexxy-color-ink-lightest: oklch(15% 0 0);
    --lexxy-color-ink-inverted: oklch(10% 0 0);

    --lexxy-color-accent-dark: oklch(70% 0.19 260);
    --lexxy-color-accent-medium: oklch(75% 0.196 258);
    --lexxy-color-accent-lightest: oklch(25% 0.026 254);

    --lexxy-color-red: oklch(70% 0.15 27);
    --lexxy-color-green: oklch(70% 0.15 145);
    --lexxy-color-blue: oklch(75% 0.196 258);
    --lexxy-color-purple: oklch(70% 0.15 305);

    /* Code syntax colors - adjusted for dark background */
    --lexxy-color-code-token-att: #f97583;
    --lexxy-color-code-token-comment: #8b949e;
    --lexxy-color-code-token-function: #d2a8ff;
    --lexxy-color-code-token-operator: #ff7b72;
    --lexxy-color-code-token-property: #79c0ff;
    --lexxy-color-code-token-punctuation: #c9d1d9;
    --lexxy-color-code-token-selector: #7ee83f;
    --lexxy-color-code-token-variable: #ffa657;

    --lexxy-color-canvas: var(--lexxy-color-ink-inverted);
    --lexxy-color-text: var(--lexxy-color-ink);
    --lexxy-color-text-subtle: var(--lexxy-color-ink-medium);
    --lexxy-color-link: var(--lexxy-color-accent-dark);
    --lexxy-color-selected: var(--lexxy-color-accent-lightest);
    --lexxy-color-selected-dark: var(--lexxy-color-blue-medium);
    --lexxy-color-code-bg: var(--lexxy-color-ink-lightest);

    --lexxy-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }

[jorgemanrubia]

@andyra mentioned he wanted to work on the dark theme at some point (he took care of the light theme we launched with).

Thanks for contributing those @Merovex. I think this is the kind of thing we should take care ourselves to keep design consistent @mikker, but sharing your approaches here is really appreciated (as @Merovex did 🙏)

[andyra]

I was thinking it would be simpler to override if we keep dark mode styles out of Lexxy. If your app already has dark mode colors, you'd need to override Lexxy's color variables in both light and dark modes, like so:

/* Lexxy default styles */
:root {
  --lexxy-color-ink: black;

  @media (prefers-color-scheme: dark) {
    --lexxy-color-ink: white;
  }
}

/* In your app */
:root {
  --my-text-color: #333333;
  --lexxy-color-ink: var(--my-text-color);
  
  @media (prefers-color-scheme: dark) {
    --my-text-color: #F7F7F7;
    --lexxy-color-ink: var(--my-text-color); /* ← Override Lexxy's dark mode color here */
  }
}

If Lexxy is agnostic about the theme, you can hook up Lexxy's color variables to your pre-existing theme, like this:

/* Lexxy default styles */
:root {
  --lexxy-color-ink: black;
}

/* In your app */
:root {
  --my-text-color: #333333;
  --lexxy-color-ink: var(--my-text-color);

  @media (prefers-color-scheme: dark) {
    --my-text-color: #F7F7F7;
  }
}

That would keep things a little more DRY. Does that sound sensible, @jorgemanrubia?

[mikker]

I think that sounds reasonable. If there are automatic dark mode styles and your app doesn't have its own dark mode, it's going to look weird when only the editor switches.

Providing a set of dark mode variables with brief instructions on how to add them yourself is probably a very reasonable approach.