diff --git a/scripts/userstyles.yml b/scripts/userstyles.yml
index 6c2850dce8..f023d27d51 100644
--- a/scripts/userstyles.yml
+++ b/scripts/userstyles.yml
@@ -304,6 +304,12 @@ userstyles:
     categories: [terminal]
     color: blue
     current-maintainers: [*uncenter]
+  gimkit:
+    name: Gimkit
+    link: https://gimkit.com
+    categories: [education]
+    color: mauve
+    current-maintainers: [*gradylink]
   github:
     name: GitHub
     link: https://github.com
diff --git a/styles/gimkit/catppuccin.user.less b/styles/gimkit/catppuccin.user.less
new file mode 100644
index 0000000000..a5290056b7
--- /dev/null
+++ b/styles/gimkit/catppuccin.user.less
@@ -0,0 +1,1147 @@
+/* ==UserStyle==
+@name Gimkit Catppuccin
+@namespace github.com/catppuccin/userstyles/styles/gimkit
+@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/gimkit
+@version 2000.01.01
+@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/gimkit/catppuccin.user.less
+@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Agimkit
+@description Soothing pastel theme for Gimkit
+@author Catppuccin
+@license MIT
+
+@preprocessor less
+@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"]
+@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"]
+@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"]
+==/UserStyle== */
+
+@import "https://userstyles.catppuccin.com/lib/lib.less";
+
+@-moz-document regexp(
+    "^(https?:\/\/)?((help|www)\.)?gimkit\.com(\/(?!host|join).*)?$"
+  ) {
+  :root {
+    @media (prefers-color-scheme: light) {
+      #catppuccin(@lightFlavor);
+    }
+    @media (prefers-color-scheme: dark) {
+      #catppuccin(@darkFlavor);
+    }
+  }
+
+  #catppuccin(@flavor) {
+    #lib.palette();
+    #lib.defaults();
+
+    a {
+      color: @accent !important;
+    }
+
+    input {
+      background-color: @mantle !important;
+      border-color: @surface2 !important;
+      outline-color: @surface2 !important;
+      color: @text !important;
+    }
+
+    .ant-input-number {
+      border-color: @surface2;
+    }
+
+    footer {
+      background-color: @base;
+    }
+
+    #mainContainer {
+      background-color: @mantle;
+
+      > .flex-column > .flex-column div:has(.ant-card),
+      div:has(> #reports-container) {
+        box-shadow: @crust 0 10px 30px;
+        background-color: @base;
+      }
+
+      button {
+        &:has(.anticon-play-circle) {
+          background-color: @green !important;
+          border-color: @green !important;
+        }
+
+        &:has(.anticon-paper-clip) {
+          background-color: @blue !important;
+          border-color: @blue !important;
+        }
+
+        * {
+          color: @base;
+        }
+      }
+    }
+
+    * {
+      color: @text;
+    }
+
+    #content > .maxAll > .maxWidth > .maxWidth {
+      background-color: @red !important;
+
+      * {
+        color: @base !important;
+      }
+
+      a {
+        border-color: @base;
+        background-color: transparent;
+      }
+    }
+
+    .ant-card {
+      background-color: @mantle;
+      border-color: @surface0;
+    }
+
+    img[src="/client/img/svgLogoWhite.svg"],
+    img[src="/client/img/svgLogo.svg"] {
+      filter: @text-filter;
+    }
+
+    .ant-btn-dashed {
+      background-color: @mantle;
+      border-color: @surface2;
+
+      &:hover {
+        background-color: @base !important;
+        border-color: @accent !important;
+      }
+    }
+
+    div:has(> header) > div, header {
+      background-color: @base;
+      box-shadow: @surface1 0 -1px inset;
+    }
+
+    // Couldn't figure out a way to avoid generated class name here
+    // UPDATE: for whatever fricking reason it seems to randomly switch between these three...
+    // UPDATE 2: Nevermind, also seems to be page dependent, since I've seen all of these cycle I'm including all of them for now.
+    .ant-space-item .eZOfwh,
+    .ant-space-item .cYojXN,
+    .ant-space-item .gYojnk,
+    .ant-space-item .cWGQyr,
+    .ant-space-item .dPbUaE {
+      background-color: @accent !important;
+
+      &, * {
+        color: @base;
+      }
+    }
+
+    .ant-space-item > a[tabindex="0"] > div:hover {
+      background-color: @mantle;
+    }
+
+    .ant-alert-info {
+      background-color: fade(@blue, 50%);
+      border-color: @blue;
+    }
+
+    .ant-btn-circle {
+      background-color: @crust;
+      border-color: @surface2;
+
+      svg {
+        fill: @text;
+      }
+
+      &:hover {
+        background-color: @mantle !important;
+        border-color: @accent !important;
+      }
+    }
+
+    .ant-dropdown-menu-root {
+      background-color: @base !important;
+      box-shadow: none;
+
+      > div {
+        background-color: @mantle;
+      }
+    }
+
+    .ant-dropdown-menu-item:hover {
+      background-color: @mantle !important;
+    }
+
+    .ant-table-cell {
+      background-color: @base;
+      border-color: @surface2 !important;
+
+      &.ant-table-cell-row-hover {
+        background-color: @mantle !important;
+      }
+    }
+
+    .ant-table-thead .ant-table-cell {
+      background-color: @mantle !important;
+      color: @text !important;
+    }
+
+    .ant-table-container {
+      border-color: @surface2 !important;
+    }
+
+    .ant-progress-circle-trail {
+      stroke: @surface1 !important;
+    }
+
+    // Again, I don't see any way to avoid generated classes here
+    .css-10npeqp {
+      .ant-progress-text {
+        color: @red !important;
+      }
+
+      .ant-progress-circle-path {
+        stroke: @red !important;
+      }
+    }
+
+    .css-bcnfu6 {
+      * .ant-progress-text {
+        color: @yellow !important;
+      }
+
+      .ant-progress-circle-path {
+        stroke: @yellow !important;
+      }
+    }
+
+    .css-1us8kgf {
+      .ant-progress-text {
+        color: @green !important;
+      }
+
+      .ant-progress-circle-path {
+        stroke: @green !important;
+      }
+    }
+
+    div:has(.ant-result-404) {
+      background-color: @mantle;
+
+      .ant-result-title, .ant-result-subtitle {
+        color: @text !important;
+      }
+
+      svg g[transform="translate(0 .012)"] > path {
+        fill: @base;
+      }
+    }
+
+    #content > div > .maxWidth > .scroll-y {
+      background-color: @base;
+      border-color: @surface2;
+
+      &:has(.ant-divider) div[style="padding: 15px;"] > div {
+        background-color: @mantle;
+      }
+    }
+
+    .ant-modal-content {
+      background-color: @base !important;
+    }
+
+    .ant-divider:not(.ant-divider-with-text-center) {
+      border-color: @surface1;
+    }
+
+    #mainContainer
+      div[style="position: relative;"]
+      .maxAll.flex-center
+      > .medium-shadow {
+      > .medium-shadow {
+        background-color: @mantle;
+
+        .flex-center:not(:has(div)) {
+          border-color: @accent;
+          color: @base;
+
+          &:not(:hover) {
+            background-color: @accent;
+          }
+
+          &:hover {
+            color: @accent;
+          }
+        }
+
+        .ant-space-item > div {
+          background-color: @surface0;
+
+          img {
+            filter: @text-filter;
+          }
+        }
+      }
+
+      > .fadeIn:not(.medium-shadow) {
+        background-color: @base;
+
+        div[style*="border-color: rgb(253, 216, 53);"] {
+          border-color: @accent !important;
+        }
+
+        div[style*="border-color: rgb(255, 255, 255);"] {
+          border-color: @text !important;
+        }
+      }
+
+      > .flex-center {
+        background-color: @base;
+
+        div:has(div) {
+          background-color: @mantle;
+
+          .flex-column {
+            background-color: fade(@yellow, 85%);
+            border-color: @yellow;
+          }
+
+          > .maxWidth > .vc {
+            background-color: @base;
+
+            > .vc * {
+              background-color: @base;
+            }
+          }
+        }
+      }
+    }
+
+    .ant-select-selector {
+      background-color: @mantle !important;
+      border-color: @surface2 !important;
+
+      * {
+        color: @text !important;
+      }
+    }
+
+    .ant-select-dropdown {
+      &, .ant-select-item {
+        background-color: @base !important;
+      }
+
+      .ant-select-item-option-active {
+        background-color: @mantle !important;
+      }
+    }
+
+    .ant-switch-handle::before {
+      background-color: @text;
+    }
+
+    .ant-switch-checked {
+      background-color: @accent !important;
+
+      .ant-switch-handle::before {
+        background-color: @base;
+      }
+    }
+
+    #content > .vc.flex-column:not(:has(img[src="/client/img/svgLogo.svg"])) {
+      background-color: @mantle;
+
+      .flex-column > div:nth-child(2) {
+        box-shadow: @crust 0 10px 30px;
+        background-color: @base;
+      }
+    }
+
+    #content > .flex-column.flex-center {
+      background-color: @mantle !important;
+    }
+
+    .ant-btn-circle.ant-btn-primary:not(:hover) svg {
+      fill: @base !important;
+    }
+
+    #content {
+      background-color: @mantle;
+    }
+
+    .ant-modal-body * {
+      color: @text !important;
+    }
+
+    button.ant-btn-color-primary, button.ant-btn-variant-solid {
+      background-color: @accent !important;
+      border-color: transparent !important;
+
+      * {
+        color: @base !important;
+      }
+    }
+
+    .ant-tabs-tab {
+      background-color: transparent !important;
+      border-color: @surface2 !important;
+      border-bottom-color: @text;
+
+      &.ant-tabs-tab-active {
+        background-color: @mantle !important;
+        border-color: @text !important;
+      }
+
+      div {
+        color: @text !important;
+      }
+    }
+
+    .ant-tabs-ink-bar {
+      background-color: @accent !important;
+    }
+
+    .ant-tabs-nav::before {
+      border-color: @surface2 !important;
+    }
+
+    a[href="https://www.pexels.com"] img {
+      filter: @text-filter;
+    }
+
+    #content
+      > div
+      > div
+      > .flex-column
+      > div:first-child
+      > div
+      > div[style^="margin-left: 10px;"]
+      > .flex
+      > div {
+      background-color: @surface0;
+    }
+
+    #content > div > div > .flex-column > .scroll-y > div {
+      &, > div > div {
+        background-color: transparent;
+      }
+    }
+
+    .ant-tag {
+      background-color: @base !important;
+      color: @text !important;
+      border-color: @surface2 !important;
+    }
+
+    .ant-tag-green {
+      background-color: fade(@green, 50%) !important;
+      border-color: @green !important;
+      color: @green !important;
+    }
+
+    #content
+      > div
+      > div
+      > :not(
+        .flex-column,
+        .flex,
+        .ant-alert,
+        :has(
+          img[src="/client/img/svgLogoWhite.svg"], img[src="/client/img/svgLogo.svg"]
+        ),
+        div[style="height: 20px;"],
+        div[style="height: 40px;"],
+        .ant-divider-with-text-center
+      ) {
+      background-color: @base;
+
+      > :first-child:not(div[style^="height: var(--header-height);"]) {
+        background-color: @mantle;
+      }
+    }
+
+    #content > div > div > .flex-column {
+      &, > :first-child, > .flex {
+        border-color: @surface2;
+      }
+    }
+
+    #content > div > div > :not(.flex-column) > :not(.scroll) {
+      border-color: @surface2;
+    }
+
+    .ant-checkbox-inner, .ant-radio-inner {
+      background-color: @crust !important;
+      border-color: @surface2 !important;
+    }
+
+    .ant-checkbox-checked .ant-checkbox-inner,
+    .ant-radio-checked .ant-radio-inner {
+      background-color: @accent !important;
+      border-color: @accent !important;
+
+      &::after {
+        border-color: @base;
+      }
+    }
+
+    .ant-radio-checked .ant-radio-inner::after {
+      background-color: @base;
+    }
+
+    .ant-btn-variant-outlined {
+      border-color: @surface2;
+      background-color: @crust;
+
+      &:hover {
+        background-color: @base !important;
+        border-color: @accent !important;
+      }
+    }
+
+    .ant-input-affix-wrapper {
+      background-color: @mantle !important;
+      border-color: @surface2;
+
+      &:hover, &:has(:focus) {
+        border-color: @accent !important;
+      }
+    }
+
+    svg[data-icon="check-circle"] {
+      [fill="#4caf50"] {
+        fill: @green !important;
+      }
+
+      [fill="#e3f0e1"] {
+        fill: @base !important;
+      }
+    }
+
+    svg[data-icon="close-circle"] {
+      [fill="#f44336"] {
+        fill: @red !important;
+      }
+
+      [fill="#fff3f0"] {
+        fill: @base !important;
+      }
+    }
+
+    #content > div > div > .maxAll > .scroll-y {
+      background-color: @base;
+
+      &:first-child > div:last-child > div:not(.ant-divider) {
+        background-color: @mantle;
+        border-color: @accent;
+      }
+    }
+
+    .ant-space-vertical
+      .ant-space-item
+      > div:has(.maxWidth):has(.fa-times, .fa-check) {
+      background-color: @surface0;
+
+      .fa-check {
+        color: @green !important;
+      }
+
+      .fa-times {
+        color: @red !important;
+      }
+    }
+
+    .ant-collapse-content {
+      background-color: @mantle !important;
+    }
+
+    .ant-collapse-item, .ant-collapse-content, .ant-collapse {
+      border-color: @surface2 !important;
+    }
+
+    #content
+      > .flex-column
+      > .flex:last-child
+      > .scroll-y:first-child
+      > :last-child {
+      background-color: @mantle;
+    }
+
+    #content
+      > .flex-column
+      > .flex:last-child
+      > .scroll-y:first-child
+      > div:has(.anticon) {
+      background-color: @base;
+      border-color: @accent;
+    }
+
+    .btn-pushable {
+      .btn-edge[style*="background: rgb(32, 88, 35);"] {
+        background-color: darken(@green, 15%) !important; // Tints and shades?
+      }
+
+      .btn-edge[style*="background: rgb(0, 94, 226);"] {
+        background-color: darken(@blue, 15%) !important;
+      }
+
+      .btn-front {
+        &, * {
+          color: @base !important;
+        }
+
+        &[style*="background: rgb(46, 125, 50);"] {
+          background-color: @green !important;
+        }
+
+        &[style*="background: rgb(22, 119, 255);"] {
+          background-color: @blue !important;
+        }
+      }
+    }
+
+    .ant-drawer-content, .ant-message-notice-content {
+      background-color: @base !important;
+    }
+
+    div:has(img[src="/client/img/editor/empty.svg"]) {
+      border-color: @text;
+    }
+
+    .ant-qrcode canvas {
+      filter: @text-filter;
+    }
+
+    .fa-cog[style="color: rgb(97, 97, 97);"] {
+      color: @text !important;
+    }
+
+    #content > div {
+      background-color: @mantle;
+
+      > div:has(
+          input[placeholder="Enter your name..."], .flex-center > .fa-plus
+        ) {
+        background-color: @base;
+        box-shadow: @crust 0 10px 30px;
+
+        .flex-center:has(> .fa-plus) {
+          background-color: @green;
+
+          .fa-plus {
+            color: @base;
+          }
+        }
+      }
+    }
+
+    .ant-card-body > .maxWidth:has(span[style="font-weight: bold;"]) {
+      background-color: @base;
+    }
+
+    [custombackgroundcolor="#ffffff"],
+    #left-side-search,
+    .maxWidth[style*="background: white;"] {
+      background-color: @base !important;
+      border-color: @surface2 !important;
+
+      .ant-card-body {
+        background-color: @mantle;
+      }
+    }
+
+    .ant-popover-inner {
+      background-color: var(--antd-arrow-background-color) !important;
+    }
+
+    * {
+      --antd-arrow-background-color: @mantle !important;
+    }
+
+    .ant-input {
+      background-color: @mantle !important;
+      border-color: @surface2;
+
+      &:hover, &:focus {
+        border-color: @accent;
+      }
+    }
+
+    .ant-modal-body > .maxWidth > :last-child {
+      > div:not(.flex-center) > div,
+      .ant-space-item > div {
+        background-color: @mantle;
+      }
+    }
+
+    [style*="background: radial-gradient(circle, rgb(255, 255, 255) 0%, rgb(53, 6, 146) 100%);"] {
+      background: radial-gradient(circle, @text 0%, @mauve 100%) !important;
+    }
+
+    [style*="background: radial-gradient(circle, rgb(255, 255, 255) 0%, rgb(8, 97, 190) 100%);"] {
+      background: radial-gradient(circle, @text 0%, @blue 100%) !important;
+    }
+
+    [style*="background: radial-gradient(circle, rgb(255, 255, 255) 0%, rgb(6, 143, 0) 100%);"] {
+      background: radial-gradient(circle, @text 0%, @green 100%) !important;
+    }
+
+    [style*="background: radial-gradient(circle, rgb(255, 255, 255) 0%, rgb(186, 86, 5) 100%);"] {
+      background: radial-gradient(circle, @text 0%, @peach 100%) !important;
+    }
+
+    [style*="background: radial-gradient(circle, rgb(255, 255, 255) 0%, rgb(203, 166, 56) 100%);"] {
+      background: radial-gradient(circle, @text 0%, @yellow 100%) !important;
+    }
+
+    .ant-modal-content:has([style*="background: radial-gradient"]) .fa-times {
+      color: @base;
+    }
+
+    #cosmos-content [style="max-width: 900px;"] > .maxWidth:nth-child(2) {
+      background-color: @base;
+    }
+
+    #cosmos-content
+      [style="max-width: 900px;"]
+      > .maxWidth:first-child
+      > .ant-space
+      > .ant-space-item:first-child
+      .ant-space-item
+      > div {
+      background-color: @surface0;
+
+      &.iszlfd {
+        background-color: @accent;
+        color: @base;
+      }
+    }
+
+    div[style*="background: radial-gradient(circle, rgb(78, 77, 77) 0%, rgb(32, 32, 32) 100%);"] {
+      background: radial-gradient(circle, @surface2 0%, @base 100%) !important;
+    }
+
+    .bWALIY {
+      border-color: @accent;
+    }
+
+    [style*="background-image: linear-gradient(rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.1) 100%);"] {
+      background-color: @surface0;
+      background-image: none !important;
+
+      > div:has(img) {
+        background-color: @blue;
+        background-image: none !important;
+        border-color: @text;
+      }
+
+      > div:nth-child(3) > [style] {
+        background-color: @base;
+
+        > :last-child {
+          background-color: @green;
+        }
+      }
+
+      > div:last-child {
+        color: @text !important;
+      }
+    }
+
+    .ant-space:has(
+      [style*="background-image: linear-gradient(rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.1) 100%);"]
+    )
+      > .ant-space-item:last-child
+      > div
+      > div[style] {
+      background-color: @surface0;
+      border-color: @text;
+
+      [style*="color: rgba(255, 255, 255, 0.9);"] {
+        color: @text !important;
+      }
+
+      > .ant-space
+        > .ant-space-item
+        > div
+        > div:not(.ant-alert)
+        > div:last-child {
+        background-color: @base;
+
+        > :last-child {
+          background-color: @green;
+        }
+      }
+    }
+
+    [style="backdrop-filter: blur(4px);"]
+      > div
+      > div[class]
+      > div:not([class])
+      > div {
+      background-color: @surface0;
+    }
+
+    #content
+      > div
+      > div
+      > div:not([style])
+      > div
+      > .ant-space-vertical
+      > .ant-space-item
+      > div {
+      background-color: @mantle;
+
+      [style*="color: rgb(255, 255, 255);"],
+      [style*="color: rgba(255, 255, 255, "] {
+        color: @text !important;
+      }
+
+      .ant-space > .ant-space-item > div:not([style]) {
+        background-color: @base;
+      }
+
+      .ant-space > .ant-space-item > a > div {
+        background-color: @base;
+      }
+    }
+
+    // Creative Discovery
+    #content
+      > div
+      > div
+      > :last-child
+      > div
+      > div
+      > .ant-space-vertical
+      .light-shadow {
+      background-color: @base;
+
+      a > div {
+        background-color: @mantle;
+
+        > .ant-space > :last-child > div > .ant-space > .ant-space-item > div {
+          background-color: @surface0;
+        }
+      }
+    }
+
+    #content
+      > div
+      > div
+      > :last-child
+      .flex-column.flex-center
+      > .light-shadow {
+      background-color: @base;
+
+      > :last-child > :first-child {
+        background-color: @mantle;
+      }
+
+      .ant-space-item > div {
+        background-color: @surface0;
+      }
+    }
+
+    // Season Ticket
+    #cosmos-content
+      .ant-space-item
+      > div:has(
+        img[src^="https://www.gimkit.com/assets/map/stickers/season_"]
+      ) {
+      background-image: linear-gradient(179deg, @peach 0%, @red 100%);
+
+      * {
+        color: @base;
+      }
+    }
+
+    #cosmos-content
+      .ant-space:has(
+        img[src^="https://www.gimkit.com/assets/map/stickers/season_"]
+      )
+      > :nth-child(2)
+      .ant-space-item
+      > div {
+      background-color: @surface0;
+    }
+
+    // Gimkit Pro Popup
+    .ant-modal-body > div > div[background="#0A2540"] {
+      background-color: fade(@blue, 25%) !important;
+      mask-image: linear-gradient(@base 50%, transparent 100%);
+    }
+
+    // News
+    body > div > .ant-modal-root .ant-modal-body > div:first-child {
+      background-color: @accent;
+
+      * {
+        color: @base !important;
+      }
+    }
+
+    // Group License Page
+    #content > div > .maxAll > .medium-shadow {
+      background-color: @base;
+    }
+
+    [background] {
+      &[background="#2e7d32"] {
+        background-color: @green;
+      }
+
+      &[background="#311b92"] {
+        background-color: @blue;
+      }
+
+      * {
+        color: @base;
+        opacity: 1 !important;
+      }
+
+      img {
+        filter: @base-filter;
+      }
+    }
+
+    .fa-check-circle {
+      color: @green !important;
+    }
+
+    // Home
+    .maxWidth:has(> div > img[src="/client/img/home/left.png"]) > .flex-column {
+      background-color: @base;
+      border-color: @surface0 !important;
+    }
+
+    .flex-center:has(.maxWidth > div > img[src="/client/img/home/left.png"])
+      > .flex-center
+      > .maxWidth {
+      background-color: @base;
+    }
+
+    // Privacy Policy
+    .flex-center:has(> img[src="/client/img/icons/secure.svg"]) > .vc {
+      background-color: @base;
+    }
+
+    div:has(img[src="/client/img/icons/secure.svg"])
+      .flex-column.flex-center.max-width {
+      background-color: @base !important;
+    }
+
+    // Login/Signup
+    div:has(
+      > .scroll-y img[src="/client/img/signup/google.svg"], > .scroll-y
+        > .ant-input-password
+    ) {
+      background-image: none;
+
+      > .scroll-y {
+        background-color: @base;
+
+        div[style*="color: rgb(0, 0, 0);"] {
+          color: @text !important;
+        }
+
+        .ant-btn span {
+          background-color: transparent !important;
+        }
+      }
+    }
+
+    // GiveKit
+    #content
+      > div:has(> img[src="/client/img/givekit/header.png"])
+      > :last-child {
+      background-color: @base;
+      box-shadow: @crust 0 10px 30px;
+    }
+
+    .ant-alert-error {
+      background-color: @red;
+      border-color: @red !important;
+
+      .ant-alert-message, .ant-alert-description {
+        color: @base;
+      }
+
+      .anticon-close-circle svg {
+        fill: @base !important;
+      }
+    }
+
+    // Help Center
+    .csh-theme-background-color-light {
+      background-color: @mantle;
+    }
+
+    .csh-aside-spaced {
+      color: @text !important;
+    }
+
+    .csh-header-main-logo img {
+      filter: @base-filter;
+    }
+
+    .csh-theme-background-color-default {
+      background-color: @accent;
+    }
+
+    header[role="banner"]::after {
+      display: none; // Gradient doesn't really fit here.
+    }
+
+    .csh-article-content {
+      background-color: @base;
+      border-color: @surface2 !important;
+    }
+
+    .csh-header-main-actions-website {
+      background-color: @base !important;
+    }
+
+    .csh-navigation-back {
+      color: @text !important;
+
+      &::before {
+        filter: @text-filter;
+      }
+    }
+
+    [style="background-color: #673ab7;"] {
+      background-color: @accent !important;
+      color: @base;
+    }
+
+    [style*="color:#000000;"],
+    .csh-article-content-updated,
+    h1,
+    .csh-article-rate-title,
+    .csh-navigation-title-list-subject-label,
+    .csh-markdown-image::after {
+      color: @text !important;
+    }
+
+    .csh-markdown-line,
+    .csh-navigation-title-list-separator,
+    .csh-category-item-meta-separator {
+      background-color: @surface2 !important;
+    }
+
+    .csh-footer-copyright-separated > .csh-wrapper {
+      border-color: @surface2 !important;
+    }
+
+    .csh-button-grey {
+      background-color: @accent;
+      color: @base !important;
+      border-color: @accent;
+    }
+
+    .csh-markdown-emphasis[data-type="|||"] {
+      background-color: @yellow !important;
+      border-color: darken(@yellow, 20%) !important;
+
+      span {
+        color: @base;
+      }
+    }
+
+    nav {
+      background-color: @mantle;
+      border-color: @surface2;
+    }
+
+    .csh-aside-single-line {
+      &[data-active="true"], &:hover {
+        background-color: @base;
+      }
+    }
+
+    .csh-box {
+      background-color: @base;
+
+      * {
+        color: @text !important;
+      }
+    }
+
+    .csh-popularity-bar[data-active="false"] {
+      background-color: @overlay0;
+    }
+
+    .csh-category-badge {
+      background-color: @accent !important;
+      color: @base !important;
+    }
+
+    .csh-header-title {
+      color: @base !important;
+    }
+
+    .csh-header-search::before {
+      background-color: @text !important;
+      opacity: 1 !important;
+    }
+
+    .csh-include-search {
+      background-color: @base !important;
+
+      * {
+        color: @text !important;
+      }
+    }
+
+    .csh-markdown-list-item::before {
+      background-color: @text !important;
+    }
+
+    .csh-markdown-title {
+      border-color: @accent !important;
+    }
+
+    .csh-article-content-header, .csh-category-section {
+      border-color: @surface2 !important;
+    }
+
+    .csh-include-search-result[data-active="true"] {
+      background-color: @mantle !important;
+    }
+
+    // Gimloader, because I'm nice and always style the popular extensions
+    .lucide-chevron-down {
+      stroke: @base !important;
+    }
+
+    .bg-white {
+      background-color: @mantle;
+    }
+
+    .bg-gray-200 {
+      background-color: @accent !important;
+
+      path {
+        fill: @base !important;
+      }
+    }
+
+    path[fill="#faca15"] {
+      fill: @yellow !important;
+    }
+
+    --color-white: @base;
+    --background: @base;
+    --border: @surface2;
+    --color-gray-500: @surface2;
+    --color-gray-200: @surface2;
+    --color-gray-300: @text;
+    --color-gray-50: @mantle;
+    --color-gray-100: @mantle;
+    --primary-600: @accent;
+    --primary-500: @accent;
+    --input: @crust;
+    --accent: @mantle;
+    --color-yellow-300: @yellow;
+  }
+}