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.

.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;
  /* scrollbar-thumb */
  --main-scrollbar-color: #CCC;
  /* footer */
  --main-footer-background: #111111;
  /*header text color*/
  --main-h-text: black;
  /* hyperlinks*/
  --main-hyperlinks-color: #0175C2;
  /*search background*/
  --main-search-background: transparent;

  --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-number-filter: invert(0%);
  --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;
}

.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;
  /* scrollbar-thumb */
  --main-scrollbar-color: #5f6368;
  /* footer */
  --main-footer-background: #27323a;
  /* hyperlinks*/
  --main-hyperlinks-color: #00D2FA;
  /*search background*/
  --main-search-background: black;

  --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-number-filter: invert(100%);
  --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;
}

#theme {
  display: none;
}

#theme-button {
  position: absolute;
  right: 30px;
  height: 24px;
}

#theme-button .material-symbols-outlined {
  color: var(--main-icon-color);
  user-select: none;
  cursor: pointer;
}

#theme-button .material-symbols-outlined:hover {
  color: var(--main-hyperlinks-color);
}

li .material-symbols-outlined, dt .material-symbols-outlined {
  font-size: 1em;
  vertical-align: text-bottom;
}

dt .material-symbols-outlined {
  text-indent: 0;
}

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

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

/*
Only show images that fit their theme using GitHub's syntax, see:
https://github.blog/changelog/2021-11-24-specify-theme-context-for-images-in-markdown/
*/
.dark-theme img[src$="#gh-light-mode-only"] {
  display: none;
}

.light-theme img[src$="#gh-dark-mode-only"] {
  display: none;
}