dragonroll/documentation/docs/.vuepress/styles/index.scss

// === colors ===
@import '~prismjs/themes/prism-dark.css';

:root {
    // accent colors
    --vp-c-accent: #E13F65;
    --vp-c-accent-bg: #F5556B;
    --vp-c-accent-hover: #FF867B;
    --vp-c-accent-text: var(--vp-c-white);
    --vp-c-accent-soft: rgba(185, 16, 67, 0.14);
  
    // background colors
    --vp-c-bg: #fff;
    --vp-c-bg-alt: #f6f6f7;
    --vp-c-bg-elv: #fff;
  
    // text colors
    --vp-c-text: rgb(60 60 67);
    --vp-c-text-mute: rgb(60 60 67 / 78%);
    --vp-c-text-subtle: rgb(60 60 67 / 56%);
  
    // border colors
    --vp-c-gutter: #e2e2e3;
    --vp-c-border: #c2c2c4;
    --vp-c-border-hard: #b8b8ba;
  
    // shadow colors
    --vp-c-shadow: rgb(0 0 0 / 15%);
  
    // control colors
    --vp-c-control: rgb(142 150 170 / 10%);
    --vp-c-control-hover: rgb(142 150 170 / 16%);
    --vp-c-control-disabled: #eaeaea;
  
    // layout colors
    --vp-navbar-c-bg: var(--vp-c-bg);
    --vp-sidebar-c-bg: var(--vp-c-bg);
  
    // code group colors
    --vp-c-code-tab-title: var(--code-c-text, rgb(255 255 255 / 90%));
    --vp-c-code-tab-bg: var(--code-bg-color, var(--code-c-bg));
    --vp-c-code-tab-active: var(--vp-c-accent);
  
    // badge colors
    --badge-c-tip-text: var(--vp-c-green-text);
    --badge-c-tip-bg: var(--vp-c-green-soft);
    --badge-c-warning-text: var(--vp-c-yellow-text);
    --badge-c-warning-bg: var(--vp-c-yellow-soft);
    --badge-c-danger-text: var(--vp-c-red-text);
    --badge-c-danger-bg: var(--vp-c-red-soft);
    --badge-c-important-text: var(--vp-c-purple-text);
    --badge-c-important-bg: var(--vp-c-purple-soft);
    --badge-c-info-text: var(--vp-c-indigo-text);
    --badge-c-info-bg: var(--vp-c-indigo-soft);
    --badge-c-note-text: var(--vp-c-grey-text);
    --badge-c-note-bg: var(--vp-c-grey-soft);
  
    // font vars
    --font-family: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', roboto, oxygen,
      ubuntu, cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  
    // layout vars
    --navbar-height: 3.6rem;
    --navbar-padding-v: 0.7rem;
    --navbar-padding-h: 1.5rem;
    --sidebar-width: 20rem;
    --sidebar-width-mobile: calc(var(--sidebar-width) * 0.82);
    --content-width: 740px;
    --homepage-width: 960px;
  
    // header offset
    --header-offset: var(--navbar-height);
  
    // transition vars
    --vp-t-color: 0.3s ease;
    --vp-t-transform: 0.3s ease;
  
    // external-link-icon
    --external-link-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z'/%3E%3C/svg%3E");
    --external-link-c-icon: var(--vp-c-text-mute);
  }
  
  
  [data-theme='dark'] {
    // brand colors
    --vp-c-accent: #FF772F;
    --vp-c-accent-bg: #FF4700;
    --vp-c-accent-hover: #ff783a;
    --vp-c-accent-soft: rgba(185, 64, 16, 0.16);
  
    // background colors
    --vp-c-bg: #181818;
    --vp-c-bg-alt: #161618;
    --vp-c-bg-elv: #202127;
  
    // text colors
    --vp-c-text: rgb(235 235 245 / 86%);
    --vp-c-text-mute: rgb(235 235 245 / 60%);
    --vp-c-text-subtle: rgb(235 235 245 / 38%);
  
    // border colors
    --vp-c-gutter: #000;
    --vp-c-border: #3c3f44;
    --vp-c-border-hard: #45484e;
  
    // shadow color
    --vp-c-shadow: rgb(0 0 0 / 30%);
  
    // control colors
    --vp-c-control: rgb(101 117 133 / 12%);
    --vp-c-control-hover: rgb(101 117 133 / 18%);
    --vp-c-control-disabled: #363636;
  }