dark mode

[alixander]

https://www.reddit.com/r/d2lang/comments/zrj6ip/please_add_dark_mode_to_the_playground_that_would/

[alixander]

design:

[vhbui02]

Keep using Dark Reader, paste this code into your userContent.css file:

@-moz-document domain(play.d2lang.com) {
  /* NOTE: works alongside Dark Reader*/
  
  /* alixanser's design color palette */
  :root {
    --background: #0a0f25;
    --foreground: #e3e1dd;
    --sketch-overlay-1: #070b67;
    --sketch-overlay-2: #3733e9;
    --database: #7240dd;
    --file: #01799d;
  }

  /* TODO: change editor's caret color */
  div[class="cursor monaco-mouse-cursor-text "] {
    background-color: var(--foreground) !important;
  }

  #hero-center-drawing-img {
    mix-blend-mode: overlay !important;
    background-color: var(--foreground) !important;
  }

  /* background editor */
  .margin, .monaco-editor, .monaco-editor-background {
    background-color: var(--background) !important;
    caret-color: revert !important;
  }

  /* background component */
  [class^=" sketch-overlay-"] {
    fill: var(--background) !important;
  }

  /* Text */
  [class^="text-"] {
    mix-blend-mode: difference !important;
  }

  /* Latex */
  g[data-mml-node="math"] {
    color: var(--foreground) !important;
  }

  /* SVG images */
  /* required specific selector, not recommended */
  /* [class*="fill-"] {
    fill: var(--background) !important;
  } */
  
  [href^="data:image/svg+xml"] {
    filter: invert(100%) sepia(0%) saturate(26%) hue-rotate(88deg) brightness(105%) contrast(108%) !important;
    mix-blend-mode: difference !important;
  }
}

Of course, d2 supports custom styling, but the playground's UI is white and we want that to be dark mode as well. So disable Dark Reader is a no-go. BUT, Dark Reader will change d2 compiled components' color on web so it will incorporate inconsistency inside exported diagram custom styling is meddled. So, custom styling shouldn't be used at all while working on Playground. That's fine by me, fine-grained diagram tweaking can take a lot of time for nothing, default is always the better.

UPDATE: Took me 3 hours to change to caret color :v

[vhbui02]

@alixander Your design is truly beautiful, if you share the color palette I can work on it if I got some free time.

[vhbui02]

Alternative: disable Dark Reader, use "Dark Mauve":

vars: {
  d2-config: {
    layout-engine: dagre
    theme-id: 200
  }
}

[alixander]

if you share the color palette I can work on it if I got some free time.

I don't have it handy right now, will in a few weeks, but I use a browser extension to get colors, maybe that could be helpful in the meantime: https://chromewebstore.google.com/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=en

We'd of course welcome & appreciate such a contribution.

[vhbui02]

if you share the color palette I can work on it if I got some free time.

I don't have it handy right now, will in a few weeks, but I use a browser extension to get colors, maybe that could be helpful in the meantime: https://chromewebstore.google.com/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=en

We'd of course welcome & appreciate such a contribution.

Yep I used Firefox DevTool Color Picker to extract some colors in your design. I will look into it soon.

[alixander]

Assets:

logo

footer mascot

right hero shapes

left hero shapes

[alixander]