Light mode for NVIDIA CCCL Docs by Gusser93

/* ==UserStyle==
@name           Light mode for NVIDIA CCCL Docs - Feb. 2024
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A light mode for NVIDIAs Just the Docs theme
@author         Markus Vieth <vieth@uni-mainz.de>
==/UserStyle== */
@-moz-document url-prefix("https://nvidia.github.io/cccl/") {
  body {
    --accent-color: hsl(82, 100%, 18%);
    --bg-color: white;
    --fg-color: #131615;
    --container-color: #fafafa;
    background-color: var(--bg-color);
    color: var(--fg-color);
  }

  .site-footer {
    color: var(--fg-color);
  }

  .main-header {
    background-color: var(--bg-color);
    border-bottom-color: var(--container-color)
  }

  .search-input {
    background-color: var(--bg-color);
    color: var(--fg-color);
  }

  .side-bar {
    background-color: var(--bg-color);
    border-right-color: var(--container-color);
  }

  .search-active .search-input {
    background-color: var(--bg-color);
  }

  .search-result:hover {
    background-color: var(--container-color);
  }

  .search-result {
    background-color: var(--bg-color);
  }

  .search-result-previews, .search-result-rel-url {
    color: var(--fg-color);
  }

  .site-header {
    background-color: #111;
  }

  h1, h2, h3, h4, a, .nav-list .nav-list-item .nav-list-expander {
    color: var(--accent-color);
  }

  :not(pre, figure) > code, div.language-cuda, div.highlighter-rouge > div.highlight > pre.highlight, div.highlighter-rouge > div.highlight {
    background-color: var(--container-color);
  }

  :not(pre, figure) > code, div.language-cuda {
    border-color: #ddd !important;
    padding-top: 0px;
  }

  .main-content .anchor-heading svg {
    color: var(--accent-color);
  }

  table, th, td {
    background-color: var(--container-color);
  }

  .table-wrapper {
    box-shadow: 0 1px 2px rgba(1, 1, 1, 0.12), 0 3px 10px rgba(1, 1, 1, 0.08);
  }

  .highlight {
    background-color: var(--container-color);
    color: var(--fg-color);
  }

  pre.highlight {
    background-color: var(--container-color);
    color: var(--fg-color);
  }

  pre.highlight code, code.doxybook {
    background-color: var(--container-color) !important;
    color: var(--fg-color);
  }



  pre.highlight code {
    .n, .h, .ne, .no, .nd, .ni, .nl, .nn, .nx, .py, .kt, .nt, .nb, .nv, .na, .nc, .nf {
      color: hsl(283, 40%, 30%);
    }

    .cp {
      color: hsl(231, 40%, 30%);
    }

    .o, .p {
      color: hsl(82, 100%, 18.5%);
    }

    .c1, .c, .cm, .cs {
      color: hsl(160, 100%, 19%);
    }

    .kd, .k, .ow, .ke, .kp, .kr, .bp, .ve, .vg, .vi {
      color: hsl(82, 100%, 18%);
    }

    .l, .ld, .mf, .mh, .mo, .il, .s, .sb, .sd, .s2, .se, .m, .mi, .sh, .si, .sx, .sr, .s1, .sl, .ss {
      color: hsl(120, 80%, 21%);
    }
  }

  .nav-list .nav-list-item .nav-list-link:hover, .nav-list .nav-list-item .nav-list-link.active, .nav-list .nav-list-item .nav-list-expander:hover {
    background-image: linear-gradient(-90deg, #fafafa 0%, #fafafacc 80%, #fafafa00 100%);
  }

  .main-content ul > li::before, .nav-list .nav-list-item > .nav-list .nav-list-item .nav-list-link, .breadcrumb-nav-list-item::after, .main-content ol > li::before {
    color: var(--fg-color);
  }

  div.highlighter-rouge > button {
    border-color: var(--container-color);
    background-color: var(--container-color);
    color: var(--fg-color);
  }

  .btn {
    color: var(--accent-color);
    background-color: var(--container-color);
    box-shadow: 0 1px 2px rgba(1, 1, 1, 0.12), 0 3px 10px rgba(1, 1, 1, 0.08);
  }

  div.search-result-doc.search-result-doc-parent {
    opacity: 1.0;
  }

  div.search-result-doc svg.search-result-icon {
    color: var(--accent-color);
  }

  input.search-input:focus + label.search-label svg.search-icon {
    color: var(--accent-color);
  }
}