Theme spec - provide CSS vars & styling options

[jyoungblood]

Set up for themeable styles, want easy themes with CSS vars

• Kinda along these lines - https://piccalil.li/blog/how-were-approaching-theming-with-modern-css
• Default dark theme too (ugh)

Example from Bolt.css theme:

:root {
  --highlight-border-radius: 7px;
  --border-radius: 11px;
  --yellow-highlight: #fffab7;

  --links: #0f6dff;
  --background-body: #fff;
  --background-main: #f1f1f1;
  --background-inputs: #fcfcfc;
  --text: #1c1d1e;
  --border: #dddddd;
  --focus-highlight: #b8b8b8;
  --shadow-color: #545454;
  --table-highlight: #f1f1f1;
  --select-icon-url: url("data:image/svg+xml,%3Csvg width='292' height='292' viewBox='0 0 292 292' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath id='Path' fill='%23222222' stroke='none' d='M 287 69 C 283.606537 65.469971 278.895844 63.513214 274 63.600006 L 18.4 63.600006 C 13.4 63.600006 9.1 65.400009 5.5 69 C 1.984143 72.328568 -0.005267 76.958466 -0 81.800003 C -0 86.800003 1.8 91.100006 5.4 94.699997 L 133.399994 222.600006 C 137 226.200012 141.199997 228 146.199997 228 C 151.199997 228 155.399994 226.200012 159 222.600006 L 287 94.600006 C 290.5 91.100006 292.399994 86.800003 292.399994 81.800003 C 292.399994 76.800003 290.5 72.600006 286.899994 69 Z'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root {
    --links: #4589ee;
    --background-body: #0f0f0f;
    --background-main: #222;
    --background-inputs: #222;
    --text: #efefef;
    --border: #444;
    --focus-highlight: #888;
    --shadow-color: #bebebe;
    --table-highlight: #222;
    --select-icon-url: url("data:image/svg+xml,%3Csvg width='292' height='292' viewBox='0 0 292 292' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath id='Path' fill='%23ffffff' stroke='none' d='M 287 69 C 283.606537 65.469971 278.895844 63.513214 274 63.600006 L 18.4 63.600006 C 13.4 63.600006 9.1 65.400009 5.5 69 C 1.984143 72.328568 -0.005267 76.958466 -0 81.800003 C -0 86.800003 1.8 91.100006 5.4 94.699997 L 133.399994 222.600006 C 137 226.200012 141.199997 228 146.199997 228 C 151.199997 228 155.399994 226.200012 159 222.600006 L 287 94.600006 C 290.5 91.100006 292.399994 86.800003 292.399994 81.800003 C 292.399994 76.800003 290.5 72.600006 286.899994 69 Z'/%3E%3C/svg%3E");
  }
}


body {
  color: var(--text);
  background: var(--background-body);
}