@media (prefers-color-scheme: dark) {
  .color-scheme-auto,
  [data-color-scheme='auto'] comment-widget {
    color-scheme: dark;

    --halo-comment-widget-base-color: #ffffff;
    --halo-comment-widget-base-info-color: #8093af;
    --halo-comment-widget-component-form-input-bg-color: #111417;
    --halo-comment-widget-comment-item-border-color: #39455a;
    --halo-comment-widget-component-form-input-color: #ffffff;
    --halo-comment-widget-component-form-input-border-color: #495056;
    --halo-comment-widget-component-form-input-border-color-focus: #65a3ff;
    --halo-comment-widget-component-form-input-box-shadow-focus: 0 0 0 0.15em #1c3966;
    --halo-comment-widget-component-form-button-login-bg-color: #334155;
    --halo-comment-widget-component-form-button-login-bg-color-hover: #475569;
    --halo-comment-widget-component-form-button-login-border-color: #475569;
    --halo-comment-widget-component-form-button-submit-border-color: #475569;
    --halo-comment-widget-component-form-button-submit-border-color-hover: #64748b;
    --halo-comment-widget-component-form-button-emoji-color: #cbd5e1;

    --halo-comment-widget-component-comment-item-action-bg-color-hover: #475569;
    --halo-comment-widget-component-comment-item-action-color-hover: #94a3b8;

    --halo-comment-widget-component-pagination-button-bg-color-hover: #475569;
    --halo-comment-widget-component-pagination-button-bg-color-active: #475569;
    --halo-comment-widget-component-pagination-button-border-color-active: #475569;

    --halo-comment-widget-component-emoji-picker-rgb-color: 222, 222, 221;
    --halo-comment-widget-component-emoji-picker-rgb-accent: 58, 130, 247;
    --halo-comment-widget-component-emoji-picker-rgb-background: 21, 22, 23;
    --halo-comment-widget-component-emoji-picker-rgb-input: 0, 0, 0;
    --halo-comment-widget-component-emoji-picker-color-border: rgba(255, 255, 255, 0.1);
    --halo-comment-widget-component-emoji-picker-color-border-over: rgba(255, 255, 255, 0.2);

    /* github-markdown.css*/
      --gm-focus-outlineColor: #1f6feb;
      --gm-fgColor-default: #f0f6fc;
      --gm-fgColor-muted: #9198a1;
      --gm-fgColor-accent: #4493f8;
      --gm-fgColor-success: #3fb950;
      --gm-fgColor-attention: #d29922;
      --gm-fgColor-danger: #f85149;
      --gm-fgColor-done: #ab7df8;
      --gm-bgColor-muted: #151b23;
      --gm-bgColor-neutral-muted: #656c7633;
      --gm-bgColor-attention-muted: #bb800926;
      --gm-borderColor-default: #3d444d;
      --gm-borderColor-muted: #3d444db3;
      --gm-borderColor-neutral-muted: #3d444db3;
      --gm-borderColor-accent-emphasis: #1f6feb;
      --gm-borderColor-success-emphasis: #238636;
      --gm-borderColor-attention-emphasis: #9e6a03;
      --gm-borderColor-danger-emphasis: #da3633;
      --gm-borderColor-done-emphasis: #8957e5;
      --gm-color-prettylights-syntax-comment: #9198a1;
      --gm-color-prettylights-syntax-constant: #79c0ff;
      --gm-color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
      --gm-color-prettylights-syntax-entity: #d2a8ff;
      --gm-color-prettylights-syntax-storage-modifier-import: #f0f6fc;
      --gm-color-prettylights-syntax-entity-tag: #7ee787;
      --gm-color-prettylights-syntax-keyword: #ff7b72;
      --gm-color-prettylights-syntax-string: #a5d6ff;
      --gm-color-prettylights-syntax-variable: #ffa657;
      --gm-color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
      --gm-color-prettylights-syntax-brackethighlighter-angle: #9198a1;
      --gm-color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
      --gm-color-prettylights-syntax-invalid-illegal-bg: #8e1519;
      --gm-color-prettylights-syntax-carriage-return-text: #f0f6fc;
      --gm-color-prettylights-syntax-carriage-return-bg: #b62324;
      --gm-color-prettylights-syntax-string-regexp: #7ee787;
      --gm-color-prettylights-syntax-markup-list: #f2cc60;
      --gm-color-prettylights-syntax-markup-heading: #1f6feb;
      --gm-color-prettylights-syntax-markup-italic: #f0f6fc;
      --gm-color-prettylights-syntax-markup-bold: #f0f6fc;
      --gm-color-prettylights-syntax-markup-deleted-text: #ffdcd7;
      --gm-color-prettylights-syntax-markup-deleted-bg: #67060c;
      --gm-color-prettylights-syntax-markup-inserted-text: #aff5b4;
      --gm-color-prettylights-syntax-markup-inserted-bg: #033a16;
      --gm-color-prettylights-syntax-markup-changed-text: #ffdfb6;
      --gm-color-prettylights-syntax-markup-changed-bg: #5a1e02;
      --gm-color-prettylights-syntax-markup-ignored-text: #f0f6fc;
      --gm-color-prettylights-syntax-markup-ignored-bg: #1158c7;
      --gm-color-prettylights-syntax-meta-diff-range: #d2a8ff;
      --gm-color-prettylights-syntax-sublimelinter-gutter-mark: #3d444d;
  }
}

.color-scheme-dark,
.dark,
[data-color-scheme='dark'] comment-widget {
  color-scheme: dark;

  --halo-comment-widget-base-color: #ffffff;
  --halo-comment-widget-base-info-color: #8093af;
  --halo-comment-widget-component-form-input-bg-color: #111417;
  --halo-comment-widget-comment-item-border-color: #39455a;
  --halo-comment-widget-component-form-input-color: #ffffff;
  --halo-comment-widget-component-form-input-border-color: #495056;
  --halo-comment-widget-component-form-input-border-color-focus: #65a3ff;
  --halo-comment-widget-component-form-input-box-shadow-focus: 0 0 0 0.15em #1c3966;
  --halo-comment-widget-component-form-button-login-bg-color: #334155;
  --halo-comment-widget-component-form-button-login-bg-color-hover: #475569;
  --halo-comment-widget-component-form-button-login-border-color: #475569;
  --halo-comment-widget-component-form-button-submit-border-color: #475569;
  --halo-comment-widget-component-form-button-submit-border-color-hover: #64748b;
  --halo-comment-widget-component-form-button-emoji-color: #cbd5e1;

  --halo-comment-widget-component-comment-item-action-bg-color-hover: #475569;
  --halo-comment-widget-component-comment-item-action-color-hover: #94a3b8;

  --halo-comment-widget-component-pagination-button-bg-color-hover: #475569;
  --halo-comment-widget-component-pagination-button-bg-color-active: #475569;
  --halo-comment-widget-component-pagination-button-border-color-active: #475569;

  --halo-comment-widget-component-emoji-picker-rgb-color: 222, 222, 221;
  --halo-comment-widget-component-emoji-picker-rgb-accent: 58, 130, 247;
  --halo-comment-widget-component-emoji-picker-rgb-background: 21, 22, 23;
  --halo-comment-widget-component-emoji-picker-rgb-input: 0, 0, 0;
  --halo-comment-widget-component-emoji-picker-color-border: rgba(255, 255, 255, 0.1);
  --halo-comment-widget-component-emoji-picker-color-border-over: rgba(255, 255, 255, 0.2);

    /* github-markdown.css*/
    --gm-focus-outlineColor: #1f6feb;
    --gm-fgColor-default: #f0f6fc;
    --gm-fgColor-muted: #9198a1;
    --gm-fgColor-accent: #4493f8;
    --gm-fgColor-success: #3fb950;
    --gm-fgColor-attention: #d29922;
    --gm-fgColor-danger: #f85149;
    --gm-fgColor-done: #ab7df8;
    --gm-bgColor-muted: #151b23;
    --gm-bgColor-neutral-muted: #656c7633;
    --gm-bgColor-attention-muted: #bb800926;
    --gm-borderColor-default: #3d444d;
    --gm-borderColor-muted: #3d444db3;
    --gm-borderColor-neutral-muted: #3d444db3;
    --gm-borderColor-accent-emphasis: #1f6feb;
    --gm-borderColor-success-emphasis: #238636;
    --gm-borderColor-attention-emphasis: #9e6a03;
    --gm-borderColor-danger-emphasis: #da3633;
    --gm-borderColor-done-emphasis: #8957e5;
    --gm-color-prettylights-syntax-comment: #9198a1;
    --gm-color-prettylights-syntax-constant: #79c0ff;
    --gm-color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
    --gm-color-prettylights-syntax-entity: #d2a8ff;
    --gm-color-prettylights-syntax-storage-modifier-import: #f0f6fc;
    --gm-color-prettylights-syntax-entity-tag: #7ee787;
    --gm-color-prettylights-syntax-keyword: #ff7b72;
    --gm-color-prettylights-syntax-string: #a5d6ff;
    --gm-color-prettylights-syntax-variable: #ffa657;
    --gm-color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
    --gm-color-prettylights-syntax-brackethighlighter-angle: #9198a1;
    --gm-color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
    --gm-color-prettylights-syntax-invalid-illegal-bg: #8e1519;
    --gm-color-prettylights-syntax-carriage-return-text: #f0f6fc;
    --gm-color-prettylights-syntax-carriage-return-bg: #b62324;
    --gm-color-prettylights-syntax-string-regexp: #7ee787;
    --gm-color-prettylights-syntax-markup-list: #f2cc60;
    --gm-color-prettylights-syntax-markup-heading: #1f6feb;
    --gm-color-prettylights-syntax-markup-italic: #f0f6fc;
    --gm-color-prettylights-syntax-markup-bold: #f0f6fc;
    --gm-color-prettylights-syntax-markup-deleted-text: #ffdcd7;
    --gm-color-prettylights-syntax-markup-deleted-bg: #67060c;
    --gm-color-prettylights-syntax-markup-inserted-text: #aff5b4;
    --gm-color-prettylights-syntax-markup-inserted-bg: #033a16;
    --gm-color-prettylights-syntax-markup-changed-text: #ffdfb6;
    --gm-color-prettylights-syntax-markup-changed-bg: #5a1e02;
    --gm-color-prettylights-syntax-markup-ignored-text: #f0f6fc;
    --gm-color-prettylights-syntax-markup-ignored-bg: #1158c7;
    --gm-color-prettylights-syntax-meta-diff-range: #d2a8ff;
    --gm-color-prettylights-syntax-sublimelinter-gutter-mark: #3d444d;
}