From 87ee76892c73cf1a9b1a47e98df69ece833e537e Mon Sep 17 00:00:00 2001
From: Frost-Phoenix <67cyril6767@gmail.com>
Date: Sat, 11 Nov 2023 16:52:54 +0100
Subject: [PATCH] add aseprite theme

---
 modules/home/aseprite/catppuccin.user.css | 1296 +++++++++++++++++++++
 1 file changed, 1296 insertions(+)
 create mode 100644 modules/home/aseprite/catppuccin.user.css

diff --git a/modules/home/aseprite/catppuccin.user.css b/modules/home/aseprite/catppuccin.user.css
new file mode 100644
index 0000000..f8116da
--- /dev/null
+++ b/modules/home/aseprite/catppuccin.user.css
@@ -0,0 +1,1296 @@
+/* ==UserStyle==
+@name YouTube Catppuccin
+@namespace github.com/catppuccin/userstyles/styles/youtube
+@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/youtube
+@version 3.1.5
+@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/youtube/catppuccin.user.css
+@description Soothing pastel theme for YouTube
+@author Catppuccin
+@license MIT
+
+@preprocessor less
+@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha"]
+@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappe", "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"]
+@var checkbox logo "Logo" 0
+@var checkbox oledOn "Enable black bars" 0
+@var text scrollbar_width "Scrollbar width" 8px
+==/UserStyle== */
+@-moz-document regexp('https?:\\/\\/(?!gaming\\.)(?!consent\\.)(?!vr\\.)(?!music\\.)(?!tv\\.)(?!artists\\.)(?!studio\\.).*youtube(?!kids\\.).*\\.com\\/(?!premium|howyoutubeworks).*$') {
+  /* youtube.com */
+  :root[dark] {
+    #catppuccin(@darkFlavor, @accentColor);
+    #oled(@oledOn);
+    #logo(@logo);
+  }
+  :root {
+    #catppuccin(@lightFlavor, @accentColor);
+    #oled(@oledOn);
+    #logo(@logo);
+  }
+
+  /* for oled monitors */
+  #oled(@oled) when (@oled =0) {
+    #ytd-player #container {
+      background: @base !important;
+    }
+  }
+
+  #logo(@logo) {
+    ytd-topbar-logo-renderer.style-scope a svg > g,
+    svg.ytd-consent-bump-v2-lightbox > g:nth-child(1) {
+      path[fill="#FF0000"] {
+        fill: @accent-color !important;
+      }
+      path[fill="white"] {
+        fill: @base !important;
+      }
+    }
+    & when (@logo =1) {
+      ytd-topbar-logo-renderer,
+      svg.ytd-consent-bump-v2-lightbox {
+        display: none;
+      }
+    }
+  }
+
+  #catppuccin(@lookup, @accent) {
+    @rosewater: @catppuccin[@@lookup][@rosewater];
+    @flamingo: @catppuccin[@@lookup][@flamingo];
+    @pink: @catppuccin[@@lookup][@pink];
+    @mauve: @catppuccin[@@lookup][@mauve];
+    @red: @catppuccin[@@lookup][@red];
+    @maroon: @catppuccin[@@lookup][@maroon];
+    @peach: @catppuccin[@@lookup][@peach];
+    @yellow: @catppuccin[@@lookup][@yellow];
+    @green: @catppuccin[@@lookup][@green];
+    @teal: @catppuccin[@@lookup][@teal];
+    @sky: @catppuccin[@@lookup][@sky];
+    @sapphire: @catppuccin[@@lookup][@sapphire];
+    @blue: @catppuccin[@@lookup][@blue];
+    @lavender: @catppuccin[@@lookup][@lavender];
+    @text: @catppuccin[@@lookup][@text];
+    @subtext1: @catppuccin[@@lookup][@subtext1];
+    @subtext0: @catppuccin[@@lookup][@subtext0];
+    @overlay2: @catppuccin[@@lookup][@overlay2];
+    @overlay1: @catppuccin[@@lookup][@overlay1];
+    @overlay0: @catppuccin[@@lookup][@overlay0];
+    @surface2: @catppuccin[@@lookup][@surface2];
+    @surface1: @catppuccin[@@lookup][@surface1];
+    @surface0: @catppuccin[@@lookup][@surface0];
+    @base: @catppuccin[@@lookup][@base];
+    @mantle: @catppuccin[@@lookup][@mantle];
+    @crust: @catppuccin[@@lookup][@crust];
+    @accent-color: @catppuccin[@@lookup][@@accent];
+
+    /* apply everywhere */
+    &,
+    [dark],
+    html,
+    html[system-icons][dark],
+    html[system-icons] [dark],
+    html[darker-dark-theme][dark],
+    [darker-dark-theme] [dark] {
+      --yt-spec-white-1: @text !important;
+      --yt-spec-white-2: @subtext0 !important;
+      --yt-spec-white-3: @subtext1 !important;
+      --yt-spec-white-4: darken(@subtext1, 5%) !important;
+      --yt-spec-black-1: @overlay1 !important;
+      --yt-spec-black-2: @overlay0 !important;
+      --yt-spec-black-3: @surface2 !important;
+      --yt-spec-black-4: @surface1 !important;
+      --yt-spec-black-pure: @surface0 !important;
+      --yt-spec-grey-1: @text !important;
+      --yt-spec-grey-2: @subtext0 !important;
+      --yt-spec-grey-3: @subtext1 !important;
+      --yt-spec-grey-4: @overlay2 !important;
+      --yt-spec-grey-5: @overlay1 !important;
+      --yt-brand-youtube-red: @accent-color !important;
+      --yt-brand-medium-red: @accent-color !important;
+      --yt-brand-light-red: @accent-color !important;
+      --yt-spec-red-30: @peach !important;
+      --yt-spec-red-70: @red !important;
+      --yt-spec-pale-blue: @sky !important;
+      --yt-spec-light-blue: @sky !important;
+      --yt-spec-dark-blue: @sapphire !important;
+      --yt-spec-navy-blue: @teal !important;
+      --yt-spec-light-green: @green !important;
+      --yt-spec-dark-green: @green !important;
+      --yt-spec-yellow: @peach !important;
+      --yt-spec-black-pure-alpha-5: fadeout(@crust, 0.05) !important;
+      --yt-spec-black-pure-alpha-10: fadeout(@crust, 0.1) !important;
+      --yt-spec-black-pure-alpha-15: fadeout(@crust, 0.15) !important;
+      --yt-spec-black-pure-alpha-30: fadeout(@crust, 0.3) !important;
+      --yt-spec-black-pure-alpha-60: fadeout(@crust, 0.6) !important;
+      --yt-spec-black-pure-alpha-80: fadeout(@crust, 0.8) !important;
+      --yt-spec-black-1-alpha-98: fadeout(@crust, 0.98) !important;
+      --yt-spec-black-1-alpha-95: fadeout(@crust, 0.95) !important;
+      --yt-spec-white-1-alpha-10: fadeout(@text, 0.1) !important;
+      --yt-spec-white-1-alpha-20: fadeout(@text, 0.2) !important;
+      --yt-spec-white-1-alpha-25: fadeout(@text, 0.25) !important;
+      --yt-spec-white-1-alpha-30: fadeout(@text, 0.3) !important;
+      --yt-spec-white-1-alpha-70: fadeout(@text, 0.7) !important;
+      --yt-spec-white-1-alpha-95: fadeout(@text, 0.95) !important;
+      --yt-spec-white-1-alpha-98: fadeout(@text, 0.98) !important;
+      --yt-brand-medium-red-alpha-90: fadeout(@accent-color, 0.9) !important;
+      --yt-brand-medium-red-alpha-30: fadeout(@accent-color, 0.3) !important;
+      --yt-brand-light-red-alpha-30: fadeout(@accent-color, 0.3) !important;
+      --yt-spec-light-blue-alpha-30: fadeout(@sapphire, 0.3) !important;
+      --yt-spec-dark-blue-alpha-30: fadeout(@sapphire, 0.3) !important;
+
+      --yt-spec-base-background: @base !important;
+      --yt-spec-raised-background: @mantle !important;
+      --yt-spec-menu-background: @mantle !important;
+      --yt-spec-inverted-background: @text !important;
+      --yt-spec-additive-background: fadeout(@surface0, 0.1) !important;
+      --yt-spec-outline: @surface0 !important;
+      --yt-spec-shadow: fadeout(@crust, 0.25) !important;
+      --yt-spec-text-primary: @text !important;
+      --yt-spec-text-secondary: @subtext0 !important;
+      --yt-spec-text-disabled: @subtext1 !important;
+      --yt-spec-text-primary-inverse: @crust !important;
+      --yt-spec-call-to-action: @accent-color !important;
+      --yt-spec-call-to-action-inverse: @accent-color !important;
+      --yt-spec-suggested-action: fadeout(@accent-color, 80%) !important;
+      --yt-spec-suggested-action-inverse: @text !important;
+      --yt-spec-icon-active-other: @overlay0 !important;
+      --yt-spec-icon-inactive: @overlay1 !important;
+      --yt-spec-icon-disabled: @overlay2 !important;
+      --yt-spec-button-chip-background-hover: @surface1 !important;
+      --yt-spec-touch-response: @surface0 !important;
+
+      --yt-spec-touch-response-inverse: @accent-color !important;
+      --yt-spec-brand-icon-active: @accent-color !important;
+      --yt-spec-brand-icon-inactive: @overlay1 !important;
+      --yt-spec-brand-button-background: @accent-color !important;
+      --yt-spec-brand-link-text: @sapphire !important;
+      --yt-spec-wordmark-text: @text !important;
+      --yt-spec-error-indicator: @red !important;
+      --yt-spec-themed-blue: @sky !important;
+      --yt-spec-themed-green: @green !important;
+      --yt-spec-ad-indicator: @teal !important;
+      --yt-spec-themed-overlay-background: fadeout(@crust, 0.8) !important;
+      --yt-spec-commerce-badge-background: @green !important;
+      --yt-spec-static-brand-red: @accent-color !important;
+      --yt-spec-static-brand-white: @text !important;
+      --yt-spec-static-brand-black: @base !important;
+      --yt-spec-static-clear-color: fadeout(@crust, 0) !important;
+      --yt-spec-static-clear-black: fadeout(@crust, 0) !important;
+      --yt-spec-static-ad-yellow: @peach !important;
+      --yt-spec-static-grey: @subtext0 !important;
+      --yt-spec-static-overlay-background-solid: @crust !important;
+      --yt-spec-static-overlay-background-heavy: @surface0 !important;
+      --yt-spec-static-overlay-background-medium: fadeout(
+        @crust,
+        0.6
+      ) !important;
+      --yt-spec-static-overlay-background-medium-light: fadeout(
+        @crust,
+        0.3
+      ) !important;
+      --yt-spec-static-overlay-background-light: fadeout(
+        @crust,
+        0.1
+      ) !important;
+      --yt-spec-static-overlay-text-primary: @text !important;
+      --yt-spec-static-overlay-text-secondary: fadeout(
+        @subtext0,
+        0.7
+      ) !important;
+      --yt-spec-static-overlay-text-disabled: fadeout(
+        @subtext0,
+        0.3
+      ) !important;
+      --yt-spec-static-overlay-call-to-action: @accent-color !important;
+      --yt-spec-static-overlay-icon-active-other: @text !important;
+      --yt-spec-static-overlay-icon-inactive: @surface1 !important;
+      --yt-spec-static-overlay-icon-disabled: @surface2 !important;
+      --yt-spec-static-overlay-button-primary: @accent-color !important;
+      --yt-spec-static-overlay-button-secondary: @surface0 !important;
+      --yt-spec-static-overlay-touch-response: @overlay1 !important;
+      --yt-spec-static-overlay-touch-response-inverse: @surface1 !important;
+      --yt-spec-static-overlay-background-brand: @accent-color !important;
+      --yt-spec-assistive-feed-themed-gradient-1: @subtext0 !important;
+      --yt-spec-assistive-feed-themed-gradient-2: @lavender !important;
+      --yt-spec-assistive-feed-themed-gradient-3: @red !important;
+      --yt-spec-brand-background-solid: @base !important;
+      --yt-spec-brand-background-primary: @surface0 !important;
+      --yt-spec-brand-background-secondary: @mantle !important;
+      --yt-spec-general-background-a: @base !important;
+      --yt-spec-general-background-b: @mantle !important;
+      --yt-spec-general-background-c: @crust !important;
+      --yt-spec-error-background: @base !important;
+      --yt-spec-10-percent-layer: @surface2 !important;
+      --yt-spec-snackbar-background: @mantle !important;
+      --yt-spec-snackbar-background-updated: @mantle !important;
+      --yt-spec-badge-chip-background: if(
+        @lookup =latte,
+        @crust,
+        @surface1
+      ) !important;
+      --yt-spec-verified-badge-background: @overlay0 !important;
+      --yt-spec-call-to-action-fadeoutd: fadeout(@sapphire, 0.3) !important;
+      --yt-spec-call-to-action-hover: @accent-color !importantr;
+      --yt-spec-brand-button-background-hover: @accent-color !important;
+      --yt-spec-brand-link-text-fadeoutd: fadeout(
+        @accent-color,
+        0.3
+      ) !important;
+      --yt-spec-filled-button-focus-outline: @surface0 !important;
+      --yt-spec-static-overlay-button-hover: @surface1 !important;
+      --yt-spec-mono-filled-hover: @surface1 !important;
+      --yt-spec-commerce-filled-hover: @accent-color !important;
+      --yt-spec-mono-tonal-hover: @surface1 !important;
+      --yt-spec-commerce-tonal-hover: @surface2 !important;
+      --yt-spec-static-overlay-filled-hover: @overlay1 !important;
+      --yt-spec-static-overlay-tonal-hover: @surface1 !important;
+      --yt-spec-paper-tab-ink: fadeout(@text, 0.3);
+      --yt-spec-filled-button-text: @text !important;
+      --yt-spec-selected-nav-text: @text !important;
+      --iron-icon-fill-color: @text !important;
+
+      /* Search bar */
+      --ytd-searchbox-border-color: @surface0 !important;
+      --ytd-searchbox-legacy-border-color: @surface0 !important;
+      --ytd-searchbox-legacy-border-shadow-color: fadeout(@crust, 0) !important;
+      --ytd-searchbox-legacy-button-color: @mantle !important;
+      --ytd-searchbox-legacy-button-border-color: @surface0 !important;
+      --ytd-searchbox-legacy-button-focus-color: @accent-color !important;
+      --ytd-searchbox-legacy-button-hover-color: @mantle !important;
+      --ytd-searchbox-legacy-button-hover-border-color: @surface0 !important;
+      --ytd-searchbox-legacy-button-icon-color: @accent-color !important;
+      --ytd-searchbox-background: @base !important;
+      --ytd-searchbox-text-color: @text !important;
+
+      /* System icons */
+      --yt-spec-icon-inactive: @overlay0 !important;
+      --yt-spec-icon-disabled: @overlay1 !important;
+      --yt-spec-brand-icon-inactive: @overlay2 !important;
+
+      /* Yt video Page */
+      --yt-live-chat-background-color: @base !important;
+      --yt-live-chat-action-panel-background-color: @base !important;
+      --yt-live-chat-action-panel-background-color-transparent: @base !important;
+      --yt-live-chat-secondary-background-color: @surface1;
+      --yt-live-chat-banner-gradient-scrim: linear-gradient(
+        @mantle,
+        transparent
+      ) !important;
+      --yt-live-chat-toast-background-color: @surface2 !important;
+      --yt-live-chat-mode-change-background-color: @base !important;
+      --yt-live-chat-secondary-text-color: @subtext0 !important;
+      --yt-live-chat-tertiary-text-color: fadeout(@text, 0.54) !important;
+      --yt-live-chat-text-input-field-inactive-underline-color: @subtext0 !important;
+      --yt-live-chat-text-input-field-placeholder-color: @subtext0 !important;
+      --yt-live-chat-enabled-send-button-color: @text !important;
+      --yt-live-chat-disabled-icon-button-color: @subtext1 !important;
+      --yt-live-chat-picker-button-hover-color: @accent-color !important;
+      --yt-live-chat-mention-background-color: @accent-color !important;
+      --yt-live-chat-mention-text-color: @text !important;
+      --yt-live-chat-deleted-message-color: @subtext0;
+      --yt-live-chat-deleted-message-bar-color: @subtext1 !important;
+      --yt-live-chat-reconnect-message-color: @text !important;
+      --yt-live-chat-disabled-button-background-color: @overlay0 !important;
+      --yt-live-chat-sub-panel-background-color: @base !important;
+      --yt-live-chat-sub-panel-background-color-transparent: @mantle !important;
+      --yt-live-chat-moderator-color: @lavender !important;
+      --yt-live-chat-owner-color: @peach !important;
+      --yt-live-chat-message-highlight-background-color: @base !important;
+      --yt-live-chat-sponsor-color: @green !important;
+      --yt-live-chat-overlay-color: fadeout(@mantle, 0.5);
+      --yt-live-chat-dialog-background-color: @base !important;
+      --yt-emoji-picker-variant-selector-bg-color: @base !important;
+      --yt-live-chat-moderation-mode-hover-background-color: fadeout(
+        @mantle,
+        0.3
+      ) !important;
+      --yt-grey: @subtext0 !important;
+      --yt-live-chat-text-input-field-suggestion-background-color: @subtext0 !important;
+      --yt-live-chat-text-input-field-suggestion-background-color-hover: @subtext1 !important;
+      --yt-emoji-picker-search-background-color: @surface0 !important;
+      --yt-emoji-picker-search-color: @text !important;
+      --yt-emoji-picker-search-placeholder-color: @accent-color !important;
+      --yt-live-chat-slider-active-color: @accent-color !important;
+      --yt-live-chat-slider-container-color: @surface0 !important;
+      --yt-live-chat-slider-markers-color: @text !important;
+      --yt-live-chat-banner-gradient-scrim: linear-gradient(
+        @mantle,
+        transparent
+      ) !important;
+      --yt-live-chat-action-panel-gradient-scrim: linear-gradient(
+        to top,
+        @mantle,
+        transparent
+      ) !important;
+      --yt-live-chat-automod-button-background-color-hover: fadeout(
+        @crust,
+        0.5
+      ) !important;
+      --yt-live-chat-automod-button-explanation-color: fadeout(
+        @accent-color,
+        0.7
+      ) !important;
+      --yt-live-chat-shimmer-background-color: fadeout(@crust, 0.4) !important;
+      --yt-live-chat-shimmer-linear-gradient: linear-gradient(
+        0deg,
+        fadeout(@text, 0.1) 40%,
+        fadeout(@base, 0.3) 50%,
+        fadeout(@text, 0.1) 60%
+      ) !important;
+      --yt-live-chat-vem-background-color: @mantle !important;
+      --yt-live-chat-product-picker-icon-color: fadeout(@text, 0.5) !important;
+      --yt-live-chat-product-picker-hover-color: @overlay0 !important;
+      --yt-live-chat-product-picker-disabled-icon-color: fadeout(
+        @text,
+        0.3
+      ) !important;
+      --yt-live-chat-action-panel-background-color-transparent: (
+        null
+      ) !important;
+
+      /* Tooltip */
+      --paper-tooltip-background: @overlay0 !important;
+      --paper-tooltip-text-color: @text !important;
+
+      /* links */
+      --yt-endpoint-color: @accent-color !important;
+      --yt-endpoint-visited-color: @accent-color !important;
+      --yt-endpoint-hover-color: @accent-color !important;
+
+      --sb-dark-red-outline: @accent-color !important;
+      --sb-main-bg-color: @base !important;
+      --sb-main-fg-color: @text !important;
+      --sb-grey-bg-color: @base !important;
+      --sb-grey-fg-color: @subtext0 !important;
+      --sb-red-bg-color: @accent-color !important;
+    }
+
+    /* general colors */
+    &:not(.style-scope) {
+      --primary-text-color: @text !important;
+      --primary-background-color: @base !important;
+      --secondary-text-color: @subtext0 !important;
+      --disabled-text-color: @subtext1 !important;
+      --divider-color: @overlay0 !important;
+      --error-color: @red !important;
+      --primary-color: @accent-color !important;
+      --light-primary-color: @accent-color !important;
+      --dark-primary-color: @blue !important;
+      --accent-color: @accent-color !important;
+      --light-accent-color: @accent-color !important;
+      --dark-accent-color: @accent-color !important;
+      --light-theme-background-color: @base !important;
+      --light-theme-base-color: @text !important;
+      --light-theme-text-color: @text !important;
+      --light-theme-secondary-color: @subtext0 !important;
+      --light-theme-disabled-color: @subtext1 !important;
+      --light-theme-divider-color: @overlay0 !important;
+      --dark-theme-background-color: @base !important;
+      --dark-theme-base-color: @text !important;
+      --dark-theme-text-color: @text !important;
+      --dark-theme-secondary-color: @subtext0 !important;
+      --dark-theme-disabled-color: @subtext1 !important;
+      --dark-theme-divider-color: @overlay0 !important;
+    }
+
+    #channel-name.ytd-video-meta-block {
+      --yt-endpoint-color: @accent-color !important;
+      --yt-endpoint-visited-color: @accent-color !important;
+      color: @accent-color !important;
+    }
+
+    /* selected chapter */
+    ytd-macro-markers-list-item-renderer {
+      --ytd-macro-markers-list-item-background-color: @surface0 !important;
+      --ytd-macro-markers-list-item-title-color: @text !important;
+      --ytd-macro-markers-list-item-secondary-color: @subtext1 !important;
+      --ytd-macro-markers-list-item-timestamp-background-color: @surface1 !important;
+    }
+
+    /* playlist selector */
+    ytd-playlist-panel-video-renderer {
+      --yt-lightsource-section2-color: @surface1 !important;
+      --yt-lightsource-section4-color: @surface2 !important;
+      --yt-lightsource-primary-title-color: @text !important;
+      --yt-lightsource-secondary-title-color: @text !important;
+      --yt-active-playlist-panel-background-color: @surface0 !important;
+    }
+
+    ytd-playlist-panel-renderer[collapsible][collapsed][use-color-palette]
+      .header.ytd-playlist-panel-renderer {
+      --iron-icon-fill-color: @text !important;
+      background-color: @base !important;
+    }
+
+    /* explandable meta */
+    ytd-expandable-metadata-renderer {
+      --yt-lightsource-section1-color: @base !important;
+      --yt-lightsource-section2-color: @surface0 !important;
+      --yt-lightsource-section3-color: @surface1 !important;
+      --yt-lightsource-section4-color: @surface2 !important;
+      --yt-lightsource-primary-title-color: @text !important;
+      --yt-lightsource-secondary-title-color: @subtext0 !important;
+    }
+
+    yt-live-chat-renderer {
+      --yt-emoji-picker-renderer-height: 180px;
+      --yt-button-default-text-color: @text !important;
+      --yt-button-default-background-color: @base !important;
+      --yt-button-dark-text-color: @base !important;
+      --yt-button-dark-background-color: @accent-color !important;
+      --yt-button-payment-background-color: @accent-color !important;
+    }
+
+    yt-icon.ytd-pinned-comment-badge-renderer * {
+      fill: @text !important;
+    }
+
+    .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--segmented-start::after {
+      background: @overlay0 !important;
+    }
+
+    .html5-ypc-purchase {
+      background: @accent-color !important;
+      &:hover {
+        background: ligten(@accent-color, 10%) !important;
+      }
+    }
+
+    yt-notification-action-renderer[darker-dark-theme]
+      tp-yt-paper-toast.yt-notification-action-renderer {
+      background: @overlay0 !important;
+    }
+
+    /* volume bar */
+    .ytp-volume-slider-handle {
+      background: @accent-color !important;
+      &::before {
+        background: @accent-color !important;
+      }
+      &::after {
+        z-index: -1;
+      }
+    }
+
+    /* new videos dot */
+    #newness-dot {
+      background-color: @accent-color !important;
+    }
+
+    /* subtitle */
+    .ytp-chrome-controls .ytp-button[aria-pressed]:after {
+      background-color: @accent-color !important;
+    }
+
+    /* menu items */
+    /* checkbox subitem */
+    .ytp-menuitem[aria-checked="true"] .ytp-menuitem-toggle-checkbox {
+      background: @accent-color !important;
+      &::after {
+        background: @overlay1 !important;
+      }
+    }
+    .ytp-menuitem:not([aria-disabled="true"]):hover {
+      background: @surface1 !important;
+    }
+    .ytp-settings-button.ytp-hd-quality-badge,
+    .ytp-settings-button.ytp-4k-quality-badge,
+    .ytp-settings-button.ytp-5k-quality-badge,
+    .ytp-settings-button.ytp-8k-quality-badge,
+    .ytp-settings-button.ytp-3d-badge {
+      &::after {
+        background-color: @accent-color !important;
+      }
+    }
+
+    .ytp-panel-menu {
+      color: @text;
+
+      & .ytp-menuitem:not(:last-child) svg > path {
+        fill: @text;
+      }
+
+      & .ytp-menuitem:last-child svg:last-child {
+        fill: @text;
+      }
+    }
+
+    .ytp-right-controls svg path,
+    .ytp-svg-fill {
+      fill: #fff !important;
+    }
+
+    .ytp-time-current,
+    .ytp-time-separator,
+    .ytp-time-duration,
+    .ytp-menu-label-secondary,
+    .ytp-menuitem-label-count {
+      color: #fff;
+    }
+
+    .ytp-tooltip:not([aria-hidden="true"]) {
+      color: @text;
+    }
+
+    .style-scope.ytd-thumbnail-overlay-toggle-button-renderer:hover {
+      fill: @accent-color !important;
+    }
+
+    .style-scope.ytd-thumbnail-overlay-toggle-button-renderer:hover {
+      fill: @accent-color !important;
+    }
+
+    .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--filled,
+    .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled {
+      background-color: @accent-color !important;
+      .yt-spec-button-shape-next__icon yt-icon svg g path {
+        fill: @base !important;
+      }
+    }
+
+    /* link */
+    .yt-core-attributed-string__link--call-to-action-color {
+      color: @sapphire !important;
+      &:hover {
+        color: @teal !important;
+      }
+    }
+
+    /* search results */
+    .sbpqs_a:before,
+    .sbqs_c:before {
+      filter: invert(1);
+    }
+
+    /* Results backgrounds */
+    .sbsb_a,
+    .sbdd_b {
+      background: @mantle !important;
+      border: none !important;
+    }
+
+    /* text color */
+    .gsfs {
+      color: @text !important;
+    }
+
+    /* Hover and keyboard select background */
+    .sbsb_c.gsfs:hover,
+    .sbsb_d {
+      background-color: @surface0 !important;
+    }
+
+    .sbfl_b {
+      background-color: @mantle !important;
+      &:hover {
+        background-color: @surface0 !important;
+        color: @accent-color !important;
+      }
+    }
+
+    .sbpqs_a {
+      color: @accent-color !important;
+    }
+
+    .sbfl_a {
+      color: @subtext0 !important;
+    }
+
+    .sbsb_i {
+      color: @subtext0;
+    }
+
+    /* Keyboard select text color and hover text color */
+    .sbsb_c:hover .sbqs_c,
+    .sbsb_c.gsfs.sbsb_d .sbqs_c {
+      color: @accent-color !important;
+    }
+
+    .ytp-swatch-background-color {
+      background-color: @accent-color !important;
+    }
+
+    /* exmplation box */
+    .explanation-box[correct] * {
+      color: @crust !important;
+    }
+
+    /* custom likes + anims */
+    yt-animated-icon[animated-icon-type="LIKE"]
+      > ytd-lottie-player
+      > lottie-component
+      > svg
+      > g:nth-child(2)
+      > g:nth-child(2) {
+      /* not liked */
+      > g:nth-child(2),
+      > g:nth-child(4) {
+        > path:nth-child(1) {
+          stroke: @text !important;
+        }
+      }
+      /* liked */
+      > g:nth-child(1),
+      > g:nth-child(3) {
+        > path:nth-child(1) {
+          fill: @accent-color !important;
+        }
+        > path:nth-child(2) {
+          stroke: @accent-color !important;
+        }
+      }
+    }
+
+    /* iv branding */
+    /* Popup for when you hover over the channel avatar in the video */
+    .iv-branding .branding-context-container-inner {
+      background-color: @base !important;
+    }
+
+    .iv-branding .iv-branding-context-name {
+      color: @text !important;
+      text-shadow: none !important;
+    }
+
+    /* Popup for when you hover over the channel avatar in the video */
+    .iv-branding .branding-context-container-inner {
+      background-color: @base !important;
+    }
+
+    /* Cards */
+    .iv-drawer-content {
+      background-color: fadeout(@mantle, 5%) !important;
+    }
+
+    .iv-drawer-header-text {
+      color: @text !important;
+    }
+
+    .iv-card-content,
+    .ytp-ce-expanding-overlay-background,
+    .ytp-cards-teaser .ytp-cards-teaser-text,
+    .ytp-cards-teaser .ytp-cards-teaser-box {
+      background-color: @base !important;
+    }
+
+    .ytp-cards-teaser .ytp-cards-teaser-box,
+    .iv-card-image {
+      border: 0px !important;
+    }
+
+    .iv-card-content > :first-child,
+    .html5-video-player a,
+    .iv-card h2,
+    .ytp-cards-teaser .ytp-cards-teaser-text {
+      color: @text !important;
+    }
+
+    /*Player tooltip background*/
+    .ytp-tooltip-text {
+      background: @surface0 !important;
+    }
+
+    .iv-card:hover .iv-card-primary-link,
+    .ytp-ce-website-title {
+      color: @accent-color !important;
+    }
+
+    .ytp-popup {
+      background: @surface0 !important;
+    }
+
+    tp-yt-paper-dialog {
+      background-color: @base !important;
+    }
+
+    /* Temporary fix */
+    .yt-core-attributed-string--link-inherit-color {
+      color: @text !important;
+      /*&:hover {
+       * color: @teal !important;
+      }*/
+    }
+
+    /* live badges */
+    .badge-style-type-live-now-alternate,
+    ytd-thumbnail-overlay-time-status-renderer[overlay-style="LIVE"] {
+      color: @crust !important;
+      yt-icon svg {
+        g path,
+        path {
+          fill: @crust !important;
+        }
+      }
+    }
+    .ytp-live-badge {
+      &:before {
+        background: @subtext1 !important;
+      }
+      &[disabled]:before {
+        background: @accent-color !important;
+      }
+    }
+
+    /* notification idicator */
+    .yt-spec-icon-badge-shape--type-notification
+      .yt-spec-icon-badge-shape__badge {
+      background-color: @accent-color !important;
+      color: @crust !important;
+    }
+    .yt-spec-icon-badge-shape--style-overlay .yt-spec-icon-badge-shape__icon {
+      color: var(--yt-spec-icon-active-other) !important;
+    }
+
+    /* creator badges */
+    ytd-author-comment-badge-renderer {
+      --yt-basic-background-color: @surface0 !important;
+      --yt-basic-foreground-title-color: @surface0 !important;
+      --ytd-author-comment-badge-background-color: @surface0 !important;
+      --ytd-author-comment-badge-name-color: @text !important;
+      --ytd-author-comment-badge-icon-color: @text !important;
+      padding-right: 6px;
+      padding-left: 8px;
+    }
+
+    /* disable ambient mode */
+    #cinematics > div > canvas {
+      visibility: hidden;
+    }
+
+    /* badges e.g. popular */
+    yt-chip-cloud-chip-renderer[chip-style="STYLE_DEFAULT"][selected],
+    yt-chip-cloud-chip-renderer[chip-style="STYLE_HOME_FILTER"][selected] {
+      background: @surface0 !important;
+      border: 1px solid @accent-color !important;
+      color: @text !important;
+    }
+
+    /* Search border */
+    ytd-searchbox[has-focus] #container.ytd-searchbox {
+      border-color: @accent-color !important;
+    }
+
+    /* Error page */
+    #error-page {
+      background-color: @base !important;
+    }
+
+    #error-page-content {
+      color: @text !important;
+      text-shadow: none;
+      background-color: @base !important;
+      > p {
+        color: @text !important;
+        text-shadow: none;
+      }
+      #masthead-search-terms.masthead-search-terms-border {
+        border: 1px solid @accent-color !important;
+        box-shadow: none !important;
+      }
+      #yt-masthead {
+        color: @text !important;
+        text-shadow: none;
+        #logo-container {
+          .logo {
+            filter: invert(1) grayscale(1);
+          }
+          .content-region {
+            color: @text !important;
+            text-shadow: none;
+          }
+        }
+        #masthead-search #masthead-search-terms-border {
+          input[type="text"] {
+            color: @text !important;
+            &:focus {
+              color: @accent-color !important;
+            }
+          }
+        }
+        .search-button {
+          background-color: @mantle !important;
+        }
+      }
+    }
+
+    /* channel homepage */
+    /* selected tab */
+    .yt-tab-shape-wiz__tab--tab-selected {
+      color: @accent-color !important;
+    }
+    .yt-tab-group-shape-wiz__slider {
+      background-color: @accent-color !important;
+    }
+
+    /* unselected */
+    .yt-tab-shape-wiz__tab {
+      color: @subtext1;
+    }
+
+    /* hover */
+    .yt-tab-shape-wiz:hover {
+      .yt-tab-shape-wiz__tab {
+        color: lighten(@accent-color, 7.5);
+      }
+
+      .yt-tab-shape-wiz__tab-bar {
+        background-color: lighten(@accent-color, 7.5);
+      }
+    }
+
+    /* hopefully temporary */
+    .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {
+      background-color: @surface0;
+      color: @text;
+    }
+
+    .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled {
+      color: @crust;
+      background-color: @accent-color;
+      &:hover {
+        background-color: darken(@accent-color, 20);
+      }
+    }
+
+    .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--text {
+      color: @accent-color;
+      &:hover {
+        background-color: fadeout(@accent-color, 90);
+      }
+    }
+
+    .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--outline,
+    .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--text {
+      color: @text;
+      &:hover {
+        background-color: @surface0;
+      }
+    }
+
+    /* Scrollbar */
+    ::-webkit-scrollbar-thumb {
+      background: @accent-color !important;
+    }
+
+    ::-webkit-scrollbar {
+      width: @scrollbar_width !important;
+    }
+
+    ::-webkit-scrollbar-track {
+      background: @base !important;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      background: @accent-color !important;
+    }
+
+    /* text highlight */
+    ::selection {
+      background: fadeout(@accent-color, 80%) !important;
+      color: @text !important;
+    }
+
+    ::-moz-selection {
+      background: fadeout(@accent-color, 80%) !important;
+      color: @text !important;
+    }
+  }
+}
+@-moz-document url-prefix('https://www.youtube.com/redirect')
+{
+  /* youtube.com-redirect */
+  :root[dark] {
+    #catppuccin(@darkFlavor, @accentColor);
+  }
+  :root {
+    #catppuccin(@lightFlavor, @accentColor);
+  }
+
+  #catppuccin(@lookup, @accent) {
+    @rosewater: @catppuccin[@@lookup][@rosewater];
+    @flamingo: @catppuccin[@@lookup][@flamingo];
+    @pink: @catppuccin[@@lookup][@pink];
+    @mauve: @catppuccin[@@lookup][@mauve];
+    @red: @catppuccin[@@lookup][@red];
+    @maroon: @catppuccin[@@lookup][@maroon];
+    @peach: @catppuccin[@@lookup][@peach];
+    @yellow: @catppuccin[@@lookup][@yellow];
+    @green: @catppuccin[@@lookup][@green];
+    @teal: @catppuccin[@@lookup][@teal];
+    @sky: @catppuccin[@@lookup][@sky];
+    @sapphire: @catppuccin[@@lookup][@sapphire];
+    @blue: @catppuccin[@@lookup][@blue];
+    @lavender: @catppuccin[@@lookup][@lavender];
+    @text: @catppuccin[@@lookup][@text];
+    @subtext1: @catppuccin[@@lookup][@subtext1];
+    @subtext0: @catppuccin[@@lookup][@subtext0];
+    @overlay2: @catppuccin[@@lookup][@overlay2];
+    @overlay1: @catppuccin[@@lookup][@overlay1];
+    @overlay0: @catppuccin[@@lookup][@overlay0];
+    @surface2: @catppuccin[@@lookup][@surface2];
+    @surface1: @catppuccin[@@lookup][@surface1];
+    @surface0: @catppuccin[@@lookup][@surface0];
+    @base: @catppuccin[@@lookup][@base];
+    @mantle: @catppuccin[@@lookup][@mantle];
+    @crust: @catppuccin[@@lookup][@crust];
+    @accent-color: @catppuccin[@@lookup][@@accent];
+
+    h1 {
+      color: @text !important;
+    }
+
+    #redirect-main-text {
+      color: @overlay2 !important;
+      .bolded {
+        color: @accent-color !important;
+      }
+    }
+
+    /* search */
+    #masthead-search-terms-border {
+      border-color: @surface0 !important;
+      background-color: @surface0 !important;
+      box-shadow: fadeout(@crust, 10%) !important;
+    }
+
+    /*Community Cross-posting*/
+    ytd-shared-post-renderer[uses-compact-lockup]
+      #repost-context.ytd-shared-post-renderer {
+      background-color: var(--second-background);
+    }
+    #divider-line-container.ytd-shared-post-renderer {
+      background-color: var(--yt-spec-10-percent-layer);
+    }
+
+    #masthead-search-terms {
+      color: @text !important;
+    }
+
+    .search-button {
+      background: @surface0 !important;
+      border-color: @surface0 !important;
+    }
+
+    .search-button-content {
+      filter: invert(1);
+    }
+
+    #redirect-backto-safety-button:hover {
+      color: @text !important;
+    }
+
+    #logo-container .content-region {
+      color: @text !important;
+    }
+
+    /* text highlight */
+    ::selection {
+      background: fadeout(@accent-color, 80%) !important;
+      color: @text !important;
+    }
+
+    ::-moz-selection {
+      background: fadeout(@accent-color, 80%) !important;
+      color: @text !important;
+    }
+  }
+}
+
+@-moz-document url-prefix('https://studio.youtube.com')
+{
+  /* studio.youtube.com */
+  :root[dark] {
+    #catppuccin(@darkFlavor, @accentColor);
+  }
+  :root {
+    #catppuccin(@lightFlavor, @accentColor);
+  }
+
+  #catppuccin(@lookup, @accent) {
+    @rosewater: @catppuccin[@@lookup][@rosewater];
+    @flamingo: @catppuccin[@@lookup][@flamingo];
+    @pink: @catppuccin[@@lookup][@pink];
+    @mauve: @catppuccin[@@lookup][@mauve];
+    @red: @catppuccin[@@lookup][@red];
+    @maroon: @catppuccin[@@lookup][@maroon];
+    @peach: @catppuccin[@@lookup][@peach];
+    @yellow: @catppuccin[@@lookup][@yellow];
+    @green: @catppuccin[@@lookup][@green];
+    @teal: @catppuccin[@@lookup][@teal];
+    @sky: @catppuccin[@@lookup][@sky];
+    @sapphire: @catppuccin[@@lookup][@sapphire];
+    @blue: @catppuccin[@@lookup][@blue];
+    @lavender: @catppuccin[@@lookup][@lavender];
+    @text: @catppuccin[@@lookup][@text];
+    @subtext1: @catppuccin[@@lookup][@subtext1];
+    @subtext0: @catppuccin[@@lookup][@subtext0];
+    @overlay2: @catppuccin[@@lookup][@overlay2];
+    @overlay1: @catppuccin[@@lookup][@overlay1];
+    @overlay0: @catppuccin[@@lookup][@overlay0];
+    @surface2: @catppuccin[@@lookup][@surface2];
+    @surface1: @catppuccin[@@lookup][@surface1];
+    @surface0: @catppuccin[@@lookup][@surface0];
+    @base: @catppuccin[@@lookup][@base];
+    @mantle: @catppuccin[@@lookup][@mantle];
+    @crust: @catppuccin[@@lookup][@crust];
+    @accent-color: @catppuccin[@@lookup][@@accent];
+
+    &,
+    html,
+    html[dark],
+    html[dark][dark],
+    &[dark],
+    &[light],
+    [light],
+    html[light],
+    html[light][light] {
+      /* disable */
+      --yt-spec-black-pure-alpha-80: (null) !important;
+      --yt-spec-black-pure-alpha-60: (null) !important;
+      --yt-spec-black-1-alpha-98: (null) !important;
+      --yt-spec-black-1-alpha-95: (null) !important;
+
+      /* text */
+      --yt-spec-text-primary: @text !important;
+      --ytcp-text-primary: @text !important;
+      --ytcp-text-primary-inverse: @base !important;
+      --ytcp-static-overlay-text-primary-inverse: @base !important;
+      --ytcp-wordmark-text: @text !important;
+      --ytcp-text-secondary: @subtext0 !important;
+      --ytcp-text-disabled: @subtext1 !important;
+      --ytcp-overlay-text-primary: @overlay2 !important;
+
+      /* main bg */
+      --ytcp-general-background-a: @base !important;
+      --yt-spec-base-background: @base !important;
+      --yt-spec-black-3: @base !important;
+
+      /* secondary bg */
+      --yt-spec-brand-background-solid: @mantle !important;
+      --ytcp-brand-background-solid: @mantle !important;
+      --yt-spec-raised-background: @mantle !important;
+      --ytcp-general-background-b: @mantle !important;
+      --ytcp-analytics-reach-background: @mantle !important;
+      --yt-spec-black-2: @mantle !important;
+
+      /* additional bg */
+      --ytcp-general-background-c: @crust !important;
+
+      /* menu */
+      --ytcp-menu-background: @surface0 !important;
+
+      /* card borders */
+      --ytcp-container-border-color: @surface0 !important;
+      --ytcp-container-hovered-border-color: @surface0 !important;
+      --ytcp-line-divider-solid: @surface0 !important;
+      --ytcp-container-border-color-inverse: @subtext0 !important;
+      --ytcp-line-divider-solid-inverse: @subtext0 !important;
+
+      /* links */
+      --ytcp-call-to-action: @sapphire !important;
+      --ytcp-call-to-action-inverse: @mantle !important;
+
+      /* buttons */
+      --ytcp-call-to-action-raised-background: @accent-color !important;
+      --yt-spec-brand-button-background: @accent-color !important;
+      --ytcp-call-to-action-raised-disabled: @surface2 !important;
+      --ytcp-call-to-action-raised-disabled-background: @overlay2 !important;
+      --ytcp-call-to-action-raised-background-inverse: @base !important;
+      --ytcp-call-to-action-raised-disabled-inverse: @surface2 !important;
+      --ytcp-call-to-action-raised-disabled-background-inverse: @overlay2 !important;
+
+      /* dropdown */
+      --yt-spec-brand-background-primary: @surface0 !important;
+
+      /* icons */
+      --yt-compact-link-icon-color: @overlay2 !important;
+      --ytcp-icon-active: @accent-color !important;
+      --ytcp-icon-inactive: @overlay2 !important;
+      --ytcp-icon-disabled: @overlay2 !important;
+      --ytcp-icon-active-inverse: @overlay1 !important;
+      --ytcp-icon-disabled-inverse: @subtext1 !important;
+
+      /* colors */
+      --ytcp-error-red: @red !important;
+      --ytcp-badge-red: @red !important;
+      --ytcp-error-red-inverse: @red !important;
+      --ytcp-themed-red-inverse: @red !important;
+      --ytcp-themed-red: @red !important;
+      --ytcp-themed-blue: @blue !important;
+      --ytcp-badge-blue-solid: @blue !important;
+      --ytcp-themed-blue-inverse: @blue !important;
+      --ytcp-themed-green: @green !important;
+      --ytmus-genre-primary-melon: @green !important;
+      --ytcp-themed-green-inverse: @green !important;
+      --ytcp-analytics-pine: @green !important;
+      --ytcp-analytics-pine-inverse: @green !important;
+      --ytcp-analytics-parrot: @green !important;
+      --ytcp-themed-yellow: @peach !important;
+      --ytmus-genre-primary-gold: @peach !important;
+      --ytcp-yellow-inverse: @peach !important;
+      --ytcp-badge-yellow: @peach !important;
+      --ytcp-analytics-yellow: @peach !important;
+      --ytcp-analytics-apricot: @peach !important;
+      --ytcp-suggested-action: @teal !important;
+      --ytcp-analytics-overview: @teal !important;
+      --ytcp-analytics-revenue: @teal !important;
+      --ytcp-analytics-default-secondary: @teal !important;
+      --ytcp-analytics-royal-blue: @lavender !important;
+      --ytcp-analytics-reach: @lavender !important;
+      --ytcp-analytics-audience: @lavender !important;
+      --ytcp-analytics-engagement: @pink !important;
+      --ytcp-analytics-revenue-secondary: @pink !important;
+      --ytcp-analytics-bubblegum: @flamingo !important;
+      --ytmus-genre-primary-ruby: @flamingo !important;
+      --ytmus-genre-primary-salmon: @mauve !important;
+      --ytmus-genre-primary-orange: @maroon !important;
+      --ytmus-genre-primary-sky: @sky !important;
+      --ytmus-genre-primary-sky-inverse: @sky !important;
+
+      /* misc */
+      --yt-spec-badge-chip-background: @surface1 !important;
+      --ytcp-focus-inverse: @accent-color !important;
+      --ytcp-focus: @accent-color !important;
+      --ytcp-selected-item: @accent-color !important;
+      --ytcp-hover-item: @overlay2 !important;
+      --ytcp-chip-active-focus: @accent-color !important;
+      --ytcp-playhead: @overlay2 !important;
+      --ytcp-playhead-inverse: @overlay2 !important;
+    }
+
+    ytcp-button.destructive.ytls-error-dialog {
+      color: @base !important;
+    }
+
+    yt-formatted-string.ytls-error-dialog,
+    tp-yt-iron-icon.ytls-error-dialog {
+      color: @text !important;
+    }
+
+    /* text highlight */
+    ::selection {
+      background: fadeout(@accent-color, 80%) !important;
+      color: @text !important;
+    }
+
+    ::-moz-selection {
+      background: fadeout(@accent-color, 80%) !important;
+      color: @text !important;
+    }
+  }
+}
+
+@catppuccin: {
+  @latte: {
+    @rosewater: #dc8a78;
+    @flamingo: #dd7878;
+    @pink: #ea76cb;
+    @mauve: #8839ef;
+    @red: #d20f39;
+    @maroon: #e64553;
+    @peach: #fe640b;
+    @yellow: #df8e1d;
+    @green: #40a02b;
+    @teal: #179299;
+    @sky: #04a5e5;
+    @sapphire: #209fb5;
+    @blue: #1e66f5;
+    @lavender: #7287fd;
+    @text: #4c4f69;
+    @subtext1: #5c5f77;
+    @subtext0: #6c6f85;
+    @overlay2: #7c7f93;
+    @overlay1: #8c8fa1;
+    @overlay0: #9ca0b0;
+    @surface2: #acb0be;
+    @surface1: #bcc0cc;
+    @surface0: #ccd0da;
+    @base: #eff1f5;
+    @mantle: #e6e9ef;
+    @crust: #dce0e8;
+  };
+  @frappe: {
+    @rosewater: #f2d5cf;
+    @flamingo: #eebebe;
+    @pink: #f4b8e4;
+    @mauve: #ca9ee6;
+    @red: #e78284;
+    @maroon: #ea999c;
+    @peach: #ef9f76;
+    @yellow: #e5c890;
+    @green: #a6d189;
+    @teal: #81c8be;
+    @sky: #99d1db;
+    @sapphire: #85c1dc;
+    @blue: #8caaee;
+    @lavender: #babbf1;
+    @text: #c6d0f5;
+    @subtext1: #b5bfe2;
+    @subtext0: #a5adce;
+    @overlay2: #949cbb;
+    @overlay1: #838ba7;
+    @overlay0: #737994;
+    @surface2: #626880;
+    @surface1: #51576d;
+    @surface0: #414559;
+    @base: #303446;
+    @mantle: #292c3c;
+    @crust: #232634;
+  };
+  @macchiato: {
+    @rosewater: #f4dbd6;
+    @flamingo: #f0c6c6;
+    @pink: #f5bde6;
+    @mauve: #c6a0f6;
+    @red: #ed8796;
+    @maroon: #ee99a0;
+    @peach: #f5a97f;
+    @yellow: #eed49f;
+    @green: #a6da95;
+    @teal: #8bd5ca;
+    @sky: #91d7e3;
+    @sapphire: #7dc4e4;
+    @blue: #8aadf4;
+    @lavender: #b7bdf8;
+    @text: #cad3f5;
+    @subtext1: #b8c0e0;
+    @subtext0: #a5adcb;
+    @overlay2: #939ab7;
+    @overlay1: #8087a2;
+    @overlay0: #6e738d;
+    @surface2: #5b6078;
+    @surface1: #494d64;
+    @surface0: #363a4f;
+    @base: #24273a;
+    @mantle: #1e2030;
+    @crust: #181926;
+  };
+  @mocha: {
+    @rosewater: #f5e0dc;
+    @flamingo: #f2cdcd;
+    @pink: #f5c2e7;
+    @mauve: #cba6f7;
+    @red: #f38ba8;
+    @maroon: #eba0ac;
+    @peach: #fab387;
+    @yellow: #f9e2af;
+    @green: #a6e3a1;
+    @teal: #94e2d5;
+    @sky: #89dceb;
+    @sapphire: #74c7ec;
+    @blue: #89b4fa;
+    @lavender: #b4befe;
+    @text: #cdd6f4;
+    @subtext1: #bac2de;
+    @subtext0: #a6adc8;
+    @overlay2: #9399b2;
+    @overlay1: #7f849c;
+    @overlay0: #6c7086;
+    @surface2: #585b70;
+    @surface1: #45475a;
+    @surface0: #313244;
+    @base: #1e1e2e;
+    @mantle: #181825;
+    @crust: #11111b;
+  };
+};