:root.dark .theme-panel:not([data-cli-theme]),
  .theme-panel[data-cli-theme="default"],
  body[data-cli-theme="default"] {
    --theme-bg:        #1c1c1c;
    --theme-fg:        #ffffff;
    --theme-secondary: #6e6e6e;
    --theme-border:    #3f3f3f;
    --theme-focus:     #d7ffd7;
    --theme-success:   #d7ffd7;
    --theme-error:     #ff87af;
    --theme-blue:      #87afff;
    --theme-purple:    #d7afff;
    --theme-yellow:    #ffffaf;
    --theme-keyword:   #87afff;
    --theme-string:    #ffffaf;
    --theme-number:    #d7ffd7;
    --theme-comment:   #afafaf;
    --theme-title:     #ffffff;
    --theme-builtin:   #87d7d7;
    --theme-diff-add:  color-mix(in srgb, #005f00 62%, var(--theme-bg));
    --theme-diff-del:  color-mix(in srgb, #5f0000 62%, var(--theme-bg));
  }

  .theme-panel[data-cli-theme="ansi"],
  body[data-cli-theme="ansi"] {
    --theme-bg:        #1c1c1c;
    --theme-fg:        #ffffff;
    --theme-secondary: #afafaf;
    --theme-border:    #878787;
    --theme-focus:     #d7ffd7;
    --theme-success:   #d7ffd7;
    --theme-error:     #ff87af;
    --theme-blue:      #2472c8;
    --theme-purple:    #bc3fbc;
    --theme-yellow:    #e5e510;
    --theme-keyword:   #2472c8;
    --theme-string:    #e5e510;
    --theme-number:    #0dbc79;
    --theme-comment:   #0dbc79;
    --theme-title:     #e5e5e5;
    --theme-builtin:   #11a8cd;
    --theme-diff-add:  color-mix(in srgb, #003300 62%, var(--theme-bg));
    --theme-diff-del:  color-mix(in srgb, #4d0000 62%, var(--theme-bg));
  }

  .theme-panel[data-cli-theme="atom-one"],
  body[data-cli-theme="atom-one"] {
    --theme-bg:        #282c34;
    --theme-fg:        #abb2bf;
    --theme-secondary: #5c6370;
    --theme-border:    #424852;
    --theme-focus:     #98c379;
    --theme-success:   #98c379;
    --theme-error:     #e06c75;
    --theme-blue:      #61aeee;
    --theme-purple:    #c678dd;
    --theme-yellow:    #e6c07b;
    --theme-keyword:   #c678dd;
    --theme-string:    #98c379;
    --theme-number:    #e6c07b;
    --theme-comment:   #5c6370;
    --theme-title:     #61aeee;
    --theme-builtin:   #e6c07b;
    --theme-diff-add:  #39544e;
    --theme-diff-del:  #562b2f;
  }

  .theme-panel[data-cli-theme="ayu"],
  body[data-cli-theme="ayu"] {
    --theme-bg:        #0b0e14;
    --theme-fg:        #aeaca6;
    --theme-secondary: #3d4149;
    --theme-border:    #24282f;
    --theme-focus:     #aad94c;
    --theme-success:   #aad94c;
    --theme-error:     #f26d78;
    --theme-blue:      #39bae6;
    --theme-purple:    #d2a6ff;
    --theme-yellow:    #ffb454;
    --theme-keyword:   #ffb454;
    --theme-string:    #aad94c;
    --theme-number:    #aeaca6;
    --theme-comment:   #646a71;
    --theme-title:     #ffb454;
    --theme-builtin:   #aeaca6;
    --theme-diff-add:  #293022;
    --theme-diff-del:  #3d1215;
  }

  .theme-panel[data-cli-theme="dracula"],
  body[data-cli-theme="dracula"] {
    --theme-bg:        #282a36;
    --theme-fg:        #a3afb7;
    --theme-secondary: #6272a4;
    --theme-border:    #454e6d;
    --theme-focus:     #50fa7b;
    --theme-success:   #50fa7b;
    --theme-error:     #ff5555;
    --theme-blue:      #8be9fd;
    --theme-purple:    #ff79c6;
    --theme-yellow:    #fff783;
    --theme-keyword:   #8be9fd;
    --theme-string:    #fff783;
    --theme-number:    #a3afb7;
    --theme-comment:   #6272a4;
    --theme-title:     #fff783;
    --theme-builtin:   #a3afb7;
    --theme-diff-add:  #11431d;
    --theme-diff-del:  #6e1818;
  }

  .theme-panel[data-cli-theme="github"],
  body[data-cli-theme="github"] {
    --theme-bg:        #24292e;
    --theme-fg:        #c0c4c8;
    --theme-secondary: #6a737d;
    --theme-border:    #474e56;
    --theme-focus:     #85e89d;
    --theme-success:   #85e89d;
    --theme-error:     #f97583;
    --theme-blue:      #79b8ff;
    --theme-purple:    #b392f0;
    --theme-yellow:    #ffab70;
    --theme-keyword:   #f97583;
    --theme-string:    #9ecbff;
    --theme-number:    #79b8ff;
    --theme-comment:   #6a737d;
    --theme-title:     #b392f0;
    --theme-builtin:   #79b8ff;
    --theme-diff-add:  #3c4636;
    --theme-diff-del:  #502125;
  }

  .theme-panel[data-cli-theme="ansi-light"],
  body[data-cli-theme="ansi-light"] {
    --theme-bg:        #ffffff;
    --theme-fg:        #000000;
    --theme-secondary: #5f5f5f;
    --theme-border:    #5f5f5f;
    --theme-focus:     #005f00;
    --theme-success:   #005f00;
    --theme-error:     #af0000;
    --theme-blue:      #0451a5;
    --theme-purple:    #bc05bc;
    --theme-yellow:    #949800;
    --theme-keyword:   #0451a5;
    --theme-string:    #cd3131;
    --theme-number:    #00bc00;
    --theme-comment:   #666666;
    --theme-title:     #000000;
    --theme-builtin:   #0598bc;
    --theme-diff-add:  #e5f2e5;
    --theme-diff-del:  #ffe5e5;
  }

  .theme-panel[data-cli-theme="ayu-light"],
  body[data-cli-theme="ayu-light"] {
    --theme-bg:        #f8f9fa;
    --theme-fg:        #5c6166;
    --theme-secondary: #a6aaaf;
    --theme-border:    #cfd2d5;
    --theme-focus:     #86b300;
    --theme-success:   #86b300;
    --theme-error:     #f07171;
    --theme-blue:      #399ee6;
    --theme-purple:    #a37acc;
    --theme-yellow:    #f2ae49;
    --theme-keyword:   #f2ae49;
    --theme-string:    #86b300;
    --theme-number:    #a37acc;
    --theme-comment:   #abadb1;
    --theme-title:     #399ee6;
    --theme-builtin:   #f07171;
    --theme-diff-add:  #c6ead8;
    --theme-diff-del:  #ffcccc;
  }

  :root:not(.dark) .theme-panel:not([data-cli-theme]),
  .theme-panel[data-cli-theme="default-light"],
  body[data-cli-theme="default-light"] {
    --theme-bg:        #ffffff;
    --theme-fg:        #000000;
    --theme-secondary: #5f5f5f;
    --theme-border:    #d4d4d4;
    --theme-focus:     #005f00;
    --theme-success:   #005f00;
    --theme-error:     #af0000;
    --theme-blue:      #005faf;
    --theme-purple:    #5f00ff;
    --theme-yellow:    #875f00;
    --theme-keyword:   #005faf;
    --theme-string:    #af0000;
    --theme-number:    #000000;
    --theme-comment:   #008700;
    --theme-title:     #af0000;
    --theme-builtin:   #005faf;
    --theme-diff-add:  #d7ffd7;
    --theme-diff-del:  #ffd7d7;
  }

  .theme-panel[data-cli-theme="github-light"],
  body[data-cli-theme="github-light"] {
    --theme-bg:        #f8f8f8;
    --theme-fg:        #24292e;
    --theme-secondary: #999999;
    --theme-border:    #c9c9c9;
    --theme-focus:     #445588;
    --theme-success:   #008080;
    --theme-error:     #dd1144;
    --theme-blue:      #445588;
    --theme-purple:    #990000;
    --theme-yellow:    #990073;
    --theme-keyword:   #24292e;
    --theme-string:    #dd1144;
    --theme-number:    #008080;
    --theme-comment:   #999988;
    --theme-title:     #990000;
    --theme-builtin:   #0086b3;
    --theme-diff-add:  #c6ead8;
    --theme-diff-del:  #ffcccc;
  }

  .theme-panel[data-cli-theme="google-code"],
  body[data-cli-theme="google-code"] {
    --theme-bg:        #ffffff;
    --theme-fg:        #444444;
    --theme-secondary: #5f5f5f;
    --theme-border:    #afafaf;
    --theme-focus:     #008800;
    --theme-success:   #008800;
    --theme-error:     #880000;
    --theme-blue:      #000088;
    --theme-purple:    #660066;
    --theme-yellow:    #666600;
    --theme-keyword:   #000088;
    --theme-string:    #008800;
    --theme-number:    #006666;
    --theme-comment:   #880000;
    --theme-title:     #660066;
    --theme-builtin:   #660066;
    --theme-diff-add:  #c6ead8;
    --theme-diff-del:  #fedede;
  }

  .theme-panel[data-cli-theme="solarized-light"],
  body[data-cli-theme="solarized-light"] {
    --theme-bg:        #fdf6e3;
    --theme-fg:        #657b83;
    --theme-secondary: #93a1a1;
    --theme-border:    #eee8d5;
    --theme-focus:     #859900;
    --theme-success:   #859900;
    --theme-error:     #dc322f;
    --theme-blue:      #268bd2;
    --theme-purple:    #6c71c4;
    --theme-yellow:    #d0b000;
    --theme-keyword:   #268bd2;
    --theme-string:    #d0b000;
    --theme-number:    #859900;
    --theme-comment:   #93a1a1;
    --theme-title:     #657b83;
    --theme-builtin:   #2aa198;
    --theme-diff-add:  #d7f2d7;
    --theme-diff-del:  #f2d7d7;
  }

  body[data-cli-theme] {
    --theme-quiet: var(--theme-secondary);
  }
  .theme-panel[data-cli-theme$="-light"],
  .theme-panel[data-cli-theme="google-code"],
  body[data-cli-theme$="-light"],
  body[data-cli-theme="google-code"] {
    --theme-quiet: color-mix(in srgb, var(--theme-secondary) 38%, var(--theme-bg));
  }

  :root {
    --code-plain:    var(--text);
    --code-comment:  var(--text-muted);
    --code-punct:    var(--code-plain);
    --code-keyword:  #1967d2;
    --code-number:   #137333;
    --code-property: #00737b;
    --code-string:   #a35b00;
    --code-function: var(--code-plain);
    --code-builtin:  var(--code-keyword);
    --code-line:     var(--diff-gutter);
  }

  :root.dark {
    --code-keyword:  var(--accent-blue);
    --code-number:   var(--accent-green);
    --code-property: #a3dce9;
    --code-string:   #f6e3aa;
    --code-line:     #7f85a1;
  }

  .diff-code {
    color: var(--code-plain);
  }
  .diff-code .token.comment,
  .diff-code .token.prolog,
  .diff-code .token.doctype,
  .diff-code .token.cdata {
    color: var(--code-comment);
  }
  .diff-code .token.punctuation,
  .diff-code .token.operator {
    color: var(--code-punct);
  }
  .diff-code .token.keyword,
  .diff-code .token.boolean,
  .diff-code .token.important,
  .diff-code .token.atrule {
    color: var(--code-keyword);
  }
  .diff-code .token.builtin {
    color: var(--code-builtin);
  }
  .diff-code .token.number,
  .diff-code .token.hexcode,
  .diff-code .token.unit {
    color: var(--code-number);
  }
  .diff-code .token.string,
  .diff-code .token.char,
  .diff-code .token.triple-quoted-string,
  .diff-code .token.attr-value,
  .diff-code .token.selector,
  .diff-code .token.class-name,
  .diff-code .token.decorator {
    color: var(--code-string);
  }
  .diff-code .token.property,
  .diff-code .token.attr-name,
  .diff-code .token.variable,
  .diff-code .token.parameter {
    color: var(--code-property);
  }
  .diff-code .token.function,
  .diff-code .token.url {
    color: var(--code-function);
  }
  .diff-code .token.function-definition {
    color: var(--code-plain);
  }

  :root:not(.dark) > body[data-cli-theme]:not([data-cli-theme="default-light"]),
  :root.dark > body[data-cli-theme]:not([data-cli-theme="default"]) {
    --bg:               var(--theme-bg);
    --text:             var(--theme-fg);
    --text-muted:       var(--theme-secondary);
    --text-placeholder: var(--theme-quiet);
    --border:           var(--theme-border);
    --surface-btn:      color-mix(in srgb, var(--theme-fg) 8%, var(--theme-bg));
    --surface-hover:    color-mix(in srgb, var(--theme-fg) 14%, var(--theme-bg));

    --accent-purple:    var(--theme-purple);
    --accent-blue:      var(--theme-blue);
    --accent-green:     var(--theme-focus);
    --accent-green-bg:  color-mix(in srgb, var(--theme-focus) 14%, transparent);
    --warn:             var(--theme-yellow);
    --accent-neon:      var(--theme-builtin);
    --suggestion-active-bg: color-mix(in srgb, var(--theme-purple) 18%, var(--theme-bg));
    --plan-border:      var(--theme-focus);

    --diff-add:         var(--theme-success);
    --diff-del:         var(--theme-error);
    --diff-add-bg:      var(--theme-diff-add);
    --diff-del-bg:      var(--theme-diff-del);
    --diff-add-panel:   var(--theme-diff-add);
    --diff-del-panel:   var(--theme-diff-del);
    --diff-gutter:      var(--theme-quiet);
    --diff-rule:        color-mix(in srgb, var(--theme-secondary) 32%, var(--theme-bg));
    --panel-border:     color-mix(in srgb, var(--theme-yellow) 38%, transparent);

    --code-plain:       var(--theme-fg);
    --code-punct:       var(--theme-fg);
    --code-property:    var(--theme-fg);
    --code-keyword:     var(--theme-keyword);
    --code-string:      var(--theme-string);
    --code-number:      var(--theme-number);
    --code-comment:     var(--theme-comment);
    --code-function:    var(--theme-title);
    --code-builtin:     var(--theme-builtin);
    --code-line:        var(--theme-quiet);

    --demo-color-text:          var(--theme-fg);
    --demo-color-muted:         var(--theme-quiet);
    --demo-color-accent:        var(--theme-blue);
    --demo-color-surface:       var(--theme-bg);
    --demo-color-control:       color-mix(in srgb, var(--theme-fg) 8%, var(--theme-bg));
    --demo-color-control-hover: color-mix(in srgb, var(--theme-fg) 14%, var(--theme-bg));
    --demo-color-track:         color-mix(in srgb, var(--theme-fg) 22%, var(--theme-bg));
  }