web/styles/_theme.scss

// Copyright (c) 2024, the Dart project authors.  Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

:root {
  // Used by the header and sticky elements wanting to position below it.
  --main-header-height: 50px;
}

.light-theme {
  /*background-color body, listdropdown*/
  --main-bg-color: #fff;
  /*header id-tittle*/
  --main-header-color: #eeeeee;
  /*package-name*/
  --main-sidebar-color: #727272;
  /*section-title and section subtitle, desc markdown(body, dd, h3), header a*/
  --main-text-color: #111111;
  /*typehead search-box*/
  --main-search-bar: #fff;
  /* footer */
  --main-footer-background: #111111;
  /*header text color*/
  --main-h-text: black;
  /* hyperlinks*/
  --main-hyperlinks-color: #0175C2;

  --main-inset-bgColor: #f5f5f7;
  --main-inset-borderColor: #dadce0;

  /*code snippets*/
  --main-code-bg: #f8f8f8;
  --main-keyword-color: #333;
  --main-tag-color: #000080;
  --main-section-color: #900;
  --main-comment-color: #998;
  --main-var-color: #008080;
  --main-string-color: #d14;

  --main-icon-color: black;

  /* alerts */
  --alert-info-fgColor: #2058b7;
  --alert-tip-fgColor: #0c7927;
  --alert-important-fgColor: #7953bf;
  --alert-warning-fgColor: #955d00;
  --alert-error-fgColor: #c43131;

  color-scheme: light;

  #light-theme-button {
    display: none;
  }

  // Hide dark-mode only images from GitHub's themable image support.
  img[src$="#gh-dark-mode-only"] {
    display: none;
  }
}

.dark-theme {
  /*background-color body, listdropdown*/
  --main-bg-color: #10161E;
  /*header id-tittle*/
  --main-header-color: #1C2834;
  /*package-name*/
  --main-sidebar-color: #fff;
  /*section-title and section subtitle, desc markdown(body, dd, h3), header a*/
  --main-text-color: #fff;
  /*typehead search-box*/
  --main-search-bar: #454545;
  /* footer */
  --main-footer-background: #27323a;
  /* hyperlinks*/
  --main-hyperlinks-color: #00D2FA;

  --main-inset-bgColor: #242b32;
  --main-inset-borderColor: #676f7e;

  /*code snippets*/
  --main-code-bg: #10161E;
  --main-keyword-color: white;
  --main-tag-color: #00D2FA;
  --main-section-color: #FF2D64;
  --main-comment-color: #909CC3;
  --main-var-color: #55A09B;
  --main-string-color: #FF2D64;

  --main-icon-color: white;

  /* alerts */
  --alert-info-fgColor: #429bff;
  --alert-tip-fgColor: #25c04b;
  --alert-important-fgColor: #ad81ff;
  --alert-warning-fgColor: #cea11f;
  --alert-error-fgColor: #ff6666;

  color-scheme: dark;

  #dark-theme-button {
    display: none;
  }

  // Hide light-mode only images from GitHub's themable image support.
  img[src$="#gh-light-mode-only"] {
    display: none;
  }
}

#theme-button {
  // Reset button appearance.
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;

  position: absolute;
  right: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;

  color: var(--main-icon-color);

  &:hover {
    color: var(--main-hyperlinks-color);
  }
}