Copyright © 2021-present Catppuccin Org 5 | -------------------------------------------------------------------------------- /assets/frappe.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/youtube/81c31b17059266e05d126829a4221ec0df431094/assets/frappe.webp -------------------------------------------------------------------------------- /assets/latte.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/youtube/81c31b17059266e05d126829a4221ec0df431094/assets/latte.webp -------------------------------------------------------------------------------- /assets/macchiato.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/youtube/81c31b17059266e05d126829a4221ec0df431094/assets/macchiato.webp -------------------------------------------------------------------------------- /assets/mocha.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/youtube/81c31b17059266e05d126829a4221ec0df431094/assets/mocha.webp -------------------------------------------------------------------------------- /assets/preview.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/youtube/81c31b17059266e05d126829a4221ec0df431094/assets/preview.webp -------------------------------------------------------------------------------- /assets/update-image.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/youtube/81c31b17059266e05d126829a4221ec0df431094/assets/update-image.webp -------------------------------------------------------------------------------- /src/catppuccin.user.css: -------------------------------------------------------------------------------- 1 | /* ==UserStyle== 2 | @name YouTube Catppuccin 3 | @namespace github.com/catppuccin/youtube 4 | @homepageURL https://github.com/catppuccin/youtube 5 | @version 3.0.8 6 | @description Soothing pastel theme for YouTube 7 | @author isabelroses 8 | @license MIT 9 | @preprocessor less 10 | @var select lightTheme "Light Theme" ["latte:Latte*", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha"] 11 | @var select darkTheme "Dark Theme" ["latte:Latte", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha*"] 12 | @var select accentColour "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:Grey"] 13 | @var checkbox logo "Logo" 0 14 | @var checkbox oledOn "Enable black bars" 0 15 | ==/UserStyle== */ 16 | @-moz-document regexp('https?:\\/\\/(?!gaming\\.)(?!consent\\.)(?!vr\\.)(?!music\\.)(?!tv\\.)(?!artists\\.)(?!studio\\.).*youtube(?!kids\\.).*\\.com\\/(?!premium|howyoutubeworks).*$') { 17 | 18 | /* youtube.com */ 19 | :root[dark] { 20 | #catppuccin(@darkTheme, @accentColour); 21 | #oled(@oledOn); 22 | #logo(@logo); 23 | } 24 | :root { 25 | #catppuccin(@lightTheme, @accentColour); 26 | #oled(@oledOn); 27 | #logo(@logo); 28 | } 29 | 30 | /* for oled monitors */ 31 | #oled(@oled) when (@oled =0) { 32 | #ytd-player #container { 33 | background: @base !important; 34 | } 35 | } 36 | 37 | #logo(@logo) { 38 | ytd-topbar-logo-renderer.style-scope a svg > g, 39 | svg.ytd-consent-bump-v2-lightbox > g:nth-child(1) { 40 | path[fill="#FF0000"] { 41 | fill: @accent-colour !important; 42 | } 43 | path[fill="white"] { 44 | fill: @base !important; 45 | } 46 | } 47 | & when (@logo =1) { 48 | ytd-topbar-logo-renderer, 49 | svg.ytd-consent-bump-v2-lightbox { 50 | display: none; 51 | } 52 | } 53 | } 54 | 55 | #catppuccin(@lookup, @accent) { 56 | @rosewater: @catppuccin[@@lookup][@rosewater]; 57 | @flamingo: @catppuccin[@@lookup][@flamingo]; 58 | @pink: @catppuccin[@@lookup][@pink]; 59 | @mauve: @catppuccin[@@lookup][@mauve]; 60 | @red: @catppuccin[@@lookup][@red]; 61 | @maroon: @catppuccin[@@lookup][@maroon]; 62 | @peach: @catppuccin[@@lookup][@peach]; 63 | @yellow: @catppuccin[@@lookup][@yellow]; 64 | @green: @catppuccin[@@lookup][@green]; 65 | @teal: @catppuccin[@@lookup][@teal]; 66 | @sky: @catppuccin[@@lookup][@sky]; 67 | @sapphire: @catppuccin[@@lookup][@sapphire]; 68 | @blue: @catppuccin[@@lookup][@blue]; 69 | @lavender: @catppuccin[@@lookup][@lavender]; 70 | @text: @catppuccin[@@lookup][@text]; 71 | @subtext1: @catppuccin[@@lookup][@subtext1]; 72 | @subtext0: @catppuccin[@@lookup][@subtext0]; 73 | @overlay2: @catppuccin[@@lookup][@overlay2]; 74 | @overlay1: @catppuccin[@@lookup][@overlay1]; 75 | @overlay0: @catppuccin[@@lookup][@overlay0]; 76 | @surface2: @catppuccin[@@lookup][@surface2]; 77 | @surface1: @catppuccin[@@lookup][@surface1]; 78 | @surface0: @catppuccin[@@lookup][@surface0]; 79 | @base: @catppuccin[@@lookup][@base]; 80 | @mantle: @catppuccin[@@lookup][@mantle]; 81 | @crust: @catppuccin[@@lookup][@crust]; 82 | @accent-colour: @catppuccin[@@lookup][@@accent]; 83 | 84 | 85 | /* apply everywhere */ 86 | &, 87 | [dark], 88 | html, 89 | html[system-icons][dark], 90 | html[system-icons] [dark], 91 | html[darker-dark-theme][dark], 92 | [darker-dark-theme] [dark] { 93 | --yt-spec-white-1: @text !important; 94 | --yt-spec-white-2: @subtext0 !important; 95 | --yt-spec-white-3: @subtext1 !important; 96 | --yt-spec-white-4: darken(@subtext1, 5%) !important; 97 | --yt-spec-black-1: @overlay1 !important; 98 | --yt-spec-black-2: @overlay0 !important; 99 | --yt-spec-black-3: @surface2 !important; 100 | --yt-spec-black-4: @surface1 !important; 101 | --yt-spec-black-pure: @surface0 !important; 102 | --yt-spec-grey-1: @text !important; 103 | --yt-spec-grey-2: @subtext0 !important; 104 | --yt-spec-grey-3: @subtext1 !important; 105 | --yt-spec-grey-4: @overlay2 !important; 106 | --yt-spec-grey-5: @overlay1 !important; 107 | --yt-brand-youtube-red: @accent-colour !important; 108 | --yt-brand-medium-red: @accent-colour !important; 109 | --yt-brand-light-red: @accent-colour !important; 110 | --yt-spec-red-30: @peach !important; 111 | --yt-spec-red-70: @red !important; 112 | --yt-spec-pale-blue: @sky !important; 113 | --yt-spec-light-blue: @sky !important; 114 | --yt-spec-dark-blue: @sapphire !important; 115 | --yt-spec-navy-blue: @teal !important; 116 | --yt-spec-light-green: @green !important; 117 | --yt-spec-dark-green: @green !important; 118 | --yt-spec-yellow: @peach !important; 119 | --yt-spec-black-pure-alpha-5: fadeout(@crust, 0.05) !important; 120 | --yt-spec-black-pure-alpha-10: fadeout(@crust, 0.1) !important; 121 | --yt-spec-black-pure-alpha-15: fadeout(@crust, 0.15) !important; 122 | --yt-spec-black-pure-alpha-30: fadeout(@crust, 0.3) !important; 123 | --yt-spec-black-pure-alpha-60: fadeout(@crust, 0.6) !important; 124 | --yt-spec-black-pure-alpha-80: fadeout(@crust, 0.8) !important; 125 | --yt-spec-black-1-alpha-98: fadeout(@crust, 0.98) !important; 126 | --yt-spec-black-1-alpha-95: fadeout(@crust, 0.95) !important; 127 | --yt-spec-white-1-alpha-10: fadeout(@text, 0.1) !important; 128 | --yt-spec-white-1-alpha-20: fadeout(@text, 0.2) !important; 129 | --yt-spec-white-1-alpha-25: fadeout(@text, 0.25) !important; 130 | --yt-spec-white-1-alpha-30: fadeout(@text, 0.3) !important; 131 | --yt-spec-white-1-alpha-70: fadeout(@text, 0.7) !important; 132 | --yt-spec-white-1-alpha-95: fadeout(@text, 0.95) !important; 133 | --yt-spec-white-1-alpha-98: fadeout(@text, 0.98) !important; 134 | --yt-brand-medium-red-alpha-90: fadeout(@accent-colour, 0.9) !important; 135 | --yt-brand-medium-red-alpha-30: fadeout(@accent-colour, 0.3) !important; 136 | --yt-brand-light-red-alpha-30: fadeout(@accent-colour, 0.3) !important; 137 | --yt-spec-light-blue-alpha-30: fadeout(@sapphire, 0.3) !important; 138 | --yt-spec-dark-blue-alpha-30: fadeout(@sapphire, 0.3) !important; 139 | 140 | --yt-spec-base-background: @base !important; 141 | --yt-spec-raised-background: @mantle !important; 142 | --yt-spec-menu-background: @mantle !important; 143 | --yt-spec-inverted-background: @text !important; 144 | --yt-spec-additive-background: fadeout(@surface0, 0.1) !important; 145 | --yt-spec-outline: @surface0 !important; 146 | --yt-spec-shadow: fadeout(@crust, 0.25) !important; 147 | --yt-spec-text-primary: @text !important; 148 | --yt-spec-text-secondary: @subtext0 !important; 149 | --yt-spec-text-disabled: @subtext1 !important; 150 | --yt-spec-text-primary-inverse: @crust !important; 151 | --yt-spec-call-to-action: @accent-colour !important; 152 | --yt-spec-call-to-action-inverse: @accent-colour !important; 153 | --yt-spec-suggested-action: @surface1 !important; 154 | --yt-spec-suggested-action-inverse: @text !important; 155 | --yt-spec-icon-active-other: @overlay0 !important; 156 | --yt-spec-icon-inactive: @overlay1 !important; 157 | --yt-spec-icon-disabled: @overlay2 !important; 158 | --yt-spec-button-chip-background-hover: @surface1 !important; 159 | --yt-spec-touch-response: @surface0 !important; 160 | 161 | --yt-spec-touch-response-inverse: @accent-colour !important; 162 | --yt-spec-brand-icon-active: @accent-colour !important; 163 | --yt-spec-brand-icon-inactive: @overlay1 !important; 164 | --yt-spec-brand-button-background: @accent-colour !important; 165 | --yt-spec-brand-link-text: @sapphire !important; 166 | --yt-spec-wordmark-text: @text !important; 167 | --yt-spec-error-indicator: @red !important; 168 | --yt-spec-themed-blue: @sky !important; 169 | --yt-spec-themed-green: @green !important; 170 | --yt-spec-ad-indicator: @teal !important; 171 | --yt-spec-themed-overlay-background: fadeout(@crust, 0.8) !important; 172 | --yt-spec-commerce-badge-background: @green !important; 173 | --yt-spec-static-brand-red: @accent-colour !important; 174 | --yt-spec-static-brand-white: @text !important; 175 | --yt-spec-static-brand-black: @base !important; 176 | --yt-spec-static-clear-color: fadeout(@crust, 0) !important; 177 | --yt-spec-static-clear-black: fadeout(@crust, 0) !important; 178 | --yt-spec-static-ad-yellow: @peach !important; 179 | --yt-spec-static-grey: @subtext0 !important; 180 | --yt-spec-static-overlay-background-solid: @crust !important; 181 | --yt-spec-static-overlay-background-heavy: @surface0 !important; 182 | --yt-spec-static-overlay-background-medium: fadeout(@crust, 0.6) !important; 183 | --yt-spec-static-overlay-background-medium-light: fadeout(@crust, 0.3) !important; 184 | --yt-spec-static-overlay-background-light: fadeout(@crust, 0.1) !important; 185 | --yt-spec-static-overlay-text-primary: @text !important; 186 | --yt-spec-static-overlay-text-secondary: fadeout(@subtext0, 0.7) !important; 187 | --yt-spec-static-overlay-text-disabled: fadeout(@subtext0, 0.3) !important; 188 | --yt-spec-static-overlay-call-to-action: @accent-colour !important; 189 | --yt-spec-static-overlay-icon-active-other: @text !important; 190 | --yt-spec-static-overlay-icon-inactive: @surface1 !important; 191 | --yt-spec-static-overlay-icon-disabled: @surface2 !important; 192 | --yt-spec-static-overlay-button-primary: @accent-colour !important; 193 | --yt-spec-static-overlay-button-secondary: @surface0 !important; 194 | --yt-spec-static-overlay-touch-response: @overlay1 !important; 195 | --yt-spec-static-overlay-touch-response-inverse: @surface1 !important; 196 | --yt-spec-static-overlay-background-brand: @accent-colour !important; 197 | --yt-spec-assistive-feed-themed-gradient-1: @subtext0 !important; 198 | --yt-spec-assistive-feed-themed-gradient-2: @lavender !important; 199 | --yt-spec-assistive-feed-themed-gradient-3: @red !important; 200 | --yt-spec-brand-background-solid: @base !important; 201 | --yt-spec-brand-background-primary: @surface0 !important; 202 | --yt-spec-brand-background-secondary: @mantle !important; 203 | --yt-spec-general-background-a: @base !important; 204 | --yt-spec-general-background-b: @mantle !important; 205 | --yt-spec-general-background-c: @crust !important; 206 | --yt-spec-error-background: @base !important; 207 | --yt-spec-10-percent-layer: @surface0 !important; 208 | --yt-spec-snackbar-background: @mantle !important; 209 | --yt-spec-snackbar-background-updated: @mantle !important; 210 | --yt-spec-badge-chip-background: @surface0 !important; 211 | --yt-spec-verified-badge-background: @overlay0 !important; 212 | --yt-spec-call-to-action-fadeoutd: fadeout(@sapphire, 0.3) !important; 213 | --yt-spec-call-to-action-hover: @accent-colour !importantr; 214 | --yt-spec-brand-button-background-hover: @accent-colour !important; 215 | --yt-spec-brand-link-text-fadeoutd: fadeout(@accent-colour, 0.3) !important; 216 | --yt-spec-filled-button-focus-outline: @surface0 !important; 217 | --yt-spec-static-overlay-button-hover: @surface1 !important; 218 | --yt-spec-mono-filled-hover: @surface1 !important; 219 | --yt-spec-commerce-filled-hover: @accent-colour !important; 220 | --yt-spec-mono-tonal-hover: @surface1 !important; 221 | --yt-spec-commerce-tonal-hover: @surface2 !important; 222 | --yt-spec-static-overlay-filled-hover: @overlay1 !important; 223 | --yt-spec-static-overlay-tonal-hover: @surface1 !important; 224 | --yt-spec-paper-tab-ink: fadeout(@text, 0.3); 225 | --yt-spec-filled-button-text: @text !important; 226 | --yt-spec-selected-nav-text: @text !important; 227 | --iron-icon-fill-color: @text !important; 228 | 229 | /* Search bar */ 230 | --ytd-searchbox-border-color: @surface0 !important; 231 | --ytd-searchbox-legacy-border-color: @surface0 !important; 232 | --ytd-searchbox-legacy-border-shadow-color: fadeout(@crust, 0) !important; 233 | --ytd-searchbox-legacy-button-color: @mantle !important; 234 | --ytd-searchbox-legacy-button-border-color: @surface0 !important; 235 | --ytd-searchbox-legacy-button-focus-color: @accent-colour !important; 236 | --ytd-searchbox-legacy-button-hover-color: @mantle !important; 237 | --ytd-searchbox-legacy-button-hover-border-color: @surface0 !important; 238 | --ytd-searchbox-legacy-button-icon-color: @accent-colour !important; 239 | --ytd-searchbox-background: @base !important; 240 | --ytd-searchbox-text-color: @text !important; 241 | 242 | /* System icons */ 243 | --yt-spec-icon-inactive: @overlay0 !important; 244 | --yt-spec-icon-disabled: @overlay1 !important; 245 | --yt-spec-brand-icon-inactive: @overlay2 !important; 246 | 247 | /* Yt video Page */ 248 | --yt-live-chat-background-color: @base !important; 249 | --yt-live-chat-action-panel-background-color: @base !important; 250 | --yt-live-chat-action-panel-background-color-transpart: @base !important; 251 | --yt-live-chat-secondary-background-color: @surface1; 252 | --yt-live-chat-banner-gradient-scrim: linear-gradient(@mantle, transparent) !important; 253 | --yt-live-chat-toast-background-color: @surface2 !important; 254 | --yt-live-chat-mode-change-background-color: @base !important; 255 | --yt-live-chat-secondary-text-color: @subtext0 !important; 256 | --yt-live-chat-tertiary-text-color: fadeout(@text, 0.54) !important; 257 | --yt-live-chat-text-input-field-inactive-underline-color: @subtext0 !important; 258 | --yt-live-chat-text-input-field-placeholder-color: @subtext0 !important; 259 | --yt-live-chat-enabled-send-button-color: @text !important; 260 | --yt-live-chat-disabled-icon-button-color: @subtext1 !important; 261 | --yt-live-chat-picker-button-hover-color: @accent-colour !important; 262 | --yt-live-chat-mention-background-color: @accent-colour !important; 263 | --yt-live-chat-mention-text-color: @text !important; 264 | --yt-live-chat-deleted-message-color: @subtext0; 265 | --yt-live-chat-deleted-message-bar-color: @subtext1 !important; 266 | --yt-live-chat-reconnect-message-color: @text !important; 267 | --yt-live-chat-disabled-button-background-color: @overlay0 !important; 268 | --yt-live-chat-sub-panel-background-color: @base !important; 269 | --yt-live-chat-sub-panel-background-color-transparent: @mantle !important; 270 | --yt-live-chat-moderator-color: @lavender !important; 271 | --yt-live-chat-owner-color: @peach !important; 272 | --yt-live-chat-message-highlight-background-color: @base !important; 273 | --yt-live-chat-sponsor-color: @green !important; 274 | --yt-live-chat-overlay-color: fadeout(@mantle, 0.5); 275 | --yt-live-chat-dialog-background-color: @base !important; 276 | --yt-emoji-picker-variant-selector-bg-color: @base !important; 277 | --yt-live-chat-moderation-mode-hover-background-color: fadeout(@mantle, 0.3) !important; 278 | --yt-grey: @subtext0 !important; 279 | --yt-live-chat-text-input-field-suggestion-background-color: @subtext0 !important; 280 | --yt-live-chat-text-input-field-suggestion-background-color-hover: @subtext1 !important; 281 | --yt-emoji-picker-search-background-color: @surface0 !important; 282 | --yt-emoji-picker-search-color: @text !important; 283 | --yt-emoji-picker-search-placeholder-color: @accent-colour !important; 284 | --yt-live-chat-slider-active-color: @accent-colour !important; 285 | --yt-live-chat-slider-container-color: @surface0 !important; 286 | --yt-live-chat-slider-markers-color: @text !important; 287 | --yt-live-chat-banner-gradient-scrim: linear-gradient( @mantle, transparent) !important; 288 | --yt-live-chat-action-panel-gradient-scrim: linear-gradient( to top, @mantle, transparent) !important; 289 | --yt-live-chat-automod-button-background-color-hover: fadeout(@crust, 0.5) !important; 290 | --yt-live-chat-automod-button-explanation-color: fadeout(@accent-colour, 0.7) !important; 291 | --yt-live-chat-shimmer-background-color: fadeout(@crust, 0.4) !important; 292 | --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; 293 | --yt-live-chat-vem-background-color: @mantle !important; 294 | --yt-live-chat-product-picker-icon-color: fadeout(@text, 0.5) !important; 295 | --yt-live-chat-product-picker-hover-color: @overlay0 !important; 296 | --yt-live-chat-product-picker-disabled-icon-color: fadeout(@text, 0.3) !important; 297 | --yt-live-chat-action-panel-background-color-transparent: (null) !important; 298 | 299 | /* Tooltip */ 300 | --paper-tooltip-background: @overlay0 !important; 301 | --paper-tooltip-text-color: @text !important; 302 | 303 | /* links */ 304 | --yt-endpoint-color: @accent-colour !important; 305 | --yt-endpoint-visited-color: @accent-colour !important; 306 | --yt-endpoint-hover-color: @accent-colour !important; 307 | 308 | --sb-dark-red-outline: @accent-colour !important; 309 | --sb-main-bg-color: @base !important; 310 | --sb-main-fg-color: @text !important; 311 | --sb-grey-bg-color: @base !important; 312 | --sb-grey-fg-color: @subtext0 !important; 313 | --sb-red-bg-color: @accent-colour !important; 314 | } 315 | 316 | /* genral colors */ 317 | &:not(.style-scope) { 318 | --primary-text-color: @text !important; 319 | --primary-background-color: @base !important; 320 | --secondary-text-color: @subtext0 !important; 321 | --disabled-text-color: @subtext1 !important; 322 | --divider-color: @overlay0 !important; 323 | --error-color: @red !important; 324 | --primary-color: @accent-colour !important; 325 | --light-primary-color: @accent-colour !important; 326 | --dark-primary-color: @blue !important; 327 | --accent-color: @accent-colour !important; 328 | --light-accent-color: @accent-colour !important; 329 | --dark-accent-color: @accent-colour !important; 330 | --light-theme-background-color: @base !important; 331 | --light-theme-base-color: @text !important; 332 | --light-theme-text-color: @text !important; 333 | --light-theme-secondary-color: @subtext0 !important; 334 | --light-theme-disabled-color: @subtext1 !important; 335 | --light-theme-divider-color: @overlay0 !important; 336 | --dark-theme-background-color: @base !important; 337 | --dark-theme-base-color: @text !important; 338 | --dark-theme-text-color: @text !important; 339 | --dark-theme-secondary-color: @subtext0 !important; 340 | --dark-theme-disabled-color: @subtext1 !important; 341 | --dark-theme-divider-color: @overlay0 !important; 342 | } 343 | 344 | #channel-name.ytd-video-meta-block { 345 | --yt-endpoint-color: @accent-colour !important; 346 | --yt-endpoint-visited-color: @accent-colour !important; 347 | color: @accent-colour !important; 348 | } 349 | 350 | /* selected chapter */ 351 | ytd-macro-markers-list-item-renderer { 352 | --ytd-macro-markers-list-item-background-color: @surface0 !important; 353 | --ytd-macro-markers-list-item-title-color: @text !important; 354 | --ytd-macro-markers-list-item-secondary-color: @subtext1 !important; 355 | --ytd-macro-markers-list-item-timestamp-background-color: @surface1 !important; 356 | } 357 | 358 | /* playlist selector */ 359 | ytd-playlist-panel-video-renderer { 360 | --yt-lightsource-section2-color: @surface1 !important; 361 | --yt-lightsource-section4-color: @surface2 !important; 362 | --yt-lightsource-primary-title-color: @text !important; 363 | --yt-lightsource-secondary-title-color: @text !important; 364 | --yt-active-playlist-panel-background-color: @surface0 !important; 365 | } 366 | 367 | ytd-playlist-panel-renderer[collapsible][collapsed][use-color-palette] .header.ytd-playlist-panel-renderer { 368 | --iron-icon-fill-color: @text !important; 369 | background-color: @base !important; 370 | } 371 | 372 | /* explandable meta */ 373 | ytd-expandable-metadata-renderer { 374 | --yt-lightsource-section1-color: @base !important; 375 | --yt-lightsource-section2-color: @surface0 !important; 376 | --yt-lightsource-section3-color: @surface1 !important; 377 | --yt-lightsource-section4-color: @surface2 !important; 378 | --yt-lightsource-primary-title-color: @text !important; 379 | --yt-lightsource-secondary-title-color: @subtext0 !important; 380 | } 381 | 382 | yt-live-chat-renderer { 383 | --yt-emoji-picker-renderer-height: 180px; 384 | --yt-button-default-text-color: @text !important; 385 | --yt-button-default-background-color: @base !important; 386 | --yt-button-dark-text-color: @base !important; 387 | --yt-button-dark-background-color: @accent-colour !important; 388 | --yt-button-payment-background-color: @accent-colour ! important; 389 | } 390 | 391 | yt-icon.ytd-pinned-comment-badge-renderer * { 392 | fill: @text !important; 393 | } 394 | 395 | .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--segmented-start::after { 396 | background: @overlay0 !important; 397 | } 398 | 399 | .html5-ypc-purchase { 400 | background: @accent-colour !important; 401 | &:hover { 402 | background: ligten(@accent-colour, 10%) !important; 403 | } 404 | } 405 | 406 | yt-notification-action-renderer[darker-dark-theme] tp-yt-paper-toast.yt-notification-action-renderer { 407 | background: @overlay0 !important; 408 | } 409 | 410 | /* volume bar */ 411 | .ytp-volume-slider-handle { 412 | background: @accent-colour !important; 413 | &::before { 414 | background: @accent-colour !important; 415 | } 416 | &::after { 417 | z-index: -1; 418 | } 419 | } 420 | 421 | /* new videos dot */ 422 | #newness-dot { 423 | background-color: @accent-colour !important; 424 | } 425 | 426 | /* subtitle */ 427 | .ytp-chrome-controls .ytp-button[aria-pressed]:after { 428 | background-color: @accent-colour !important; 429 | } 430 | 431 | /* menu items */ 432 | /* checbox subitem */ 433 | .ytp-menuitem[aria-checked=true] .ytp-menuitem-toggle-checkbox { 434 | background: @accent-colour !important; 435 | &::after { 436 | background: @overlay1 !important; 437 | } 438 | } 439 | .ytp-menuitem:not([aria-disabled=true]):hover { 440 | background: @surface1 !important; 441 | } 442 | .ytp-settings-button.ytp-hd-quality-badge, 443 | .ytp-settings-button.ytp-4k-quality-badge, 444 | .ytp-settings-button.ytp-5k-quality-badge, 445 | .ytp-settings-button.ytp-8k-quality-badge, 446 | .ytp-settings-button.ytp-3d-badge { 447 | &::after { 448 | background-color: @accent-colour !important; 449 | } 450 | } 451 | 452 | .style-scope.ytd-thumbnail-overlay-toggle-button-renderer:hover { 453 | fill: @accent-colour !important; 454 | } 455 | 456 | .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--filled, 457 | .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled { 458 | background-color: @accent-colour !important; 459 | .yt-spec-button-shape-next__icon yt-icon svg g path { 460 | fill: @base !important; 461 | } 462 | } 463 | 464 | /* link */ 465 | .yt-core-attributed-string__link--call-to-action-color { 466 | color: @sapphire !important; 467 | &:hover { 468 | color: @teal !important; 469 | } 470 | } 471 | 472 | /* search results */ 473 | .sbpqs_a:before, 474 | .sbqs_c:before { 475 | filter: invert(1); 476 | } 477 | 478 | /* Results backgrounds */ 479 | .sbsb_a, 480 | .sbdd_b { 481 | background: @mantle !important; 482 | border: none !important; 483 | } 484 | 485 | /* text color */ 486 | .gsfs { 487 | color: @text !important; 488 | } 489 | 490 | /* Hover and keyboard select background */ 491 | .sbsb_c.gsfs:hover, 492 | .sbsb_d { 493 | background-color: @surface0 !important; 494 | } 495 | 496 | .sbfl_b { 497 | background-color: @mantle !important; 498 | &:hover { 499 | background-color: @surface0 !important; 500 | color: @accent-colour !important; 501 | } 502 | } 503 | 504 | .sbpqs_a { 505 | color: @accent-colour !important; 506 | } 507 | 508 | .sbfl_a { 509 | color: @subtext0 !important; 510 | } 511 | 512 | .sbsb_i { 513 | color: @subtext0; 514 | } 515 | 516 | /* Keyboard select text color and hover text color */ 517 | .sbsb_c:hover .sbqs_c, 518 | .sbsb_c.gsfs.sbsb_d .sbqs_c { 519 | color: @accent-colour !important; 520 | } 521 | 522 | .ytp-swatch-background-color { 523 | background-color: @accent-colour !important; 524 | } 525 | 526 | /* exmplation box */ 527 | .explanation-box[correct] * { 528 | color: @crust !important; 529 | } 530 | 531 | /* custom likes + anims */ 532 | yt-animated-icon[animated-icon-type="LIKE"] > ytd-lottie-player > lottie-component > svg > g:nth-child(2) > g:nth-child(2) { 533 | /* not liked */ 534 | > g:nth-child(2), 535 | > g:nth-child(4) { 536 | > path:nth-child(1) { 537 | stroke: @text !important; 538 | } 539 | } 540 | /* liked */ 541 | > g:nth-child(1), 542 | > g:nth-child(3) { 543 | > path:nth-child(1) { 544 | fill: @accent-colour !important; 545 | } 546 | > path:nth-child(2) { 547 | stroke: @accent-colour !important 548 | } 549 | } 550 | } 551 | 552 | /* iv branding */ 553 | /* Popup for when you hover over the channel avatar in the video */ 554 | .iv-branding .branding-context-container-inner { 555 | background-color: @base !important; 556 | } 557 | 558 | .iv-branding .iv-branding-context-name { 559 | color: @text !important; 560 | text-shadow: none !important; 561 | } 562 | 563 | /* Popup for when you hover over the channel avatar in the video */ 564 | .iv-branding .branding-context-container-inner { 565 | background-color: @base !important; 566 | } 567 | 568 | /* Cards */ 569 | .iv-drawer-content { 570 | background-color: fadeout(@mantle, 5%) !important; 571 | } 572 | 573 | .iv-drawer-header-text { 574 | color: @text !important; 575 | } 576 | 577 | .iv-card-content, 578 | .ytp-ce-expanding-overlay-background, 579 | .ytp-cards-teaser .ytp-cards-teaser-text, 580 | .ytp-cards-teaser .ytp-cards-teaser-box { 581 | background-color: @base !important; 582 | } 583 | 584 | .ytp-cards-teaser .ytp-cards-teaser-box, 585 | .iv-card-image { 586 | border: 0px !important; 587 | } 588 | 589 | .iv-card-content > :first-child, 590 | .html5-video-player a, 591 | .iv-card h2, 592 | .ytp-cards-teaser .ytp-cards-teaser-text { 593 | color: @text !important; 594 | } 595 | 596 | /*Player tooltip background*/ 597 | .ytp-tooltip-text { 598 | background: @surface0 !important 599 | } 600 | 601 | .iv-card:hover .iv-card-primary-link, 602 | .ytp-ce-website-title { 603 | color: @accent-colour !important; 604 | } 605 | 606 | .ytp-popup { 607 | background: @surface0 !important; 608 | } 609 | 610 | tp-yt-paper-dialog { 611 | background-color: @base !important; 612 | } 613 | 614 | /* Temporary fix */ 615 | .yt-core-attributed-string--link-inherit-color { 616 | color: @text !important; 617 | /*&:hover { 618 | * color: @teal !important; 619 | }*/ 620 | } 621 | 622 | /* live badges */ 623 | .badge-style-type-live-now-alternate, 624 | ytd-thumbnail-overlay-time-status-renderer[overlay-style="LIVE"] { 625 | color: @crust !important; 626 | yt-icon svg { 627 | g path, 628 | path { 629 | fill: @crust !important; 630 | } 631 | } 632 | } 633 | .ytp-live-badge { 634 | &:before { 635 | background: @subtext1 !important; 636 | } 637 | &[disabled]:before { 638 | background: @accent-colour !important; 639 | } 640 | } 641 | 642 | /* notification idicator */ 643 | .yt-spec-icon-badge-shape--type-notification .yt-spec-icon-badge-shape__badge { 644 | background-color: @accent-colour !important; 645 | color: @crust !important; 646 | } 647 | .yt-spec-icon-badge-shape--style-overlay .yt-spec-icon-badge-shape__icon { 648 | color: @text !important; 649 | } 650 | 651 | /* creator badges */ 652 | ytd-author-comment-badge-renderer { 653 | --yt-basic-background-color: @surface0 !important; 654 | --yt-basic-foreground-title-color: @surface0 !important; 655 | --ytd-author-comment-badge-background-color: @surface0 !important; 656 | --ytd-author-comment-badge-name-color: @text !important; 657 | --ytd-author-comment-badge-icon-color: @text !important; 658 | padding-right: 6px; 659 | padding-left: 8px; 660 | } 661 | 662 | /* disable ambient mode */ 663 | #cinematics > div > canvas { 664 | visibility: hidden; 665 | } 666 | 667 | /* badges e.g. popular */ 668 | yt-chip-cloud-chip-renderer[chip-style=STYLE_DEFAULT][selected], 669 | yt-chip-cloud-chip-renderer[chip-style=STYLE_HOME_FILTER][selected] { 670 | background: @surface0 !important; 671 | border: 1px solid @accent-colour !important; 672 | color: @text !important; 673 | } 674 | 675 | /* Search border */ 676 | ytd-searchbox[has-focus] #container.ytd-searchbox { 677 | border-color: @accent-colour !important; 678 | } 679 | 680 | /* Error page */ 681 | #error-page { 682 | background-color: @base !important; 683 | } 684 | 685 | #error-page-content { 686 | color: @text !important; 687 | text-shadow: none; 688 | background-color: @base !important; 689 | > p { 690 | color: @text !important; 691 | text-shadow: none; 692 | } 693 | #masthead-search-terms.masthead-search-terms-border { 694 | border: 1px solid @accent-colour !important; 695 | box-shadow: none !important; 696 | } 697 | #yt-masthead { 698 | color: @text !important; 699 | text-shadow: none; 700 | #logo-container { 701 | .logo { 702 | filter: invert(1) grayscale(1); 703 | } 704 | .content-region { 705 | color: @text !important; 706 | text-shadow: none; 707 | } 708 | } 709 | #masthead-search #masthead-search-terms-border { 710 | input[type="text"] { 711 | color: @text !important; 712 | &:focus { 713 | color: @accent-colour !important; 714 | } 715 | } 716 | } 717 | .search-button { 718 | background-color: @mantle !important; 719 | } 720 | } 721 | } 722 | 723 | /* Scrollbar */ 724 | ::-webkit-scrollbar-thumb { 725 | background: @accent-colour !important; 726 | } 727 | 728 | ::-webkit-scrollbar { 729 | width: 8px !important; 730 | } 731 | 732 | ::-webkit-scrollbar-track { 733 | background: @base !important; 734 | } 735 | 736 | ::-webkit-scrollbar-thumb { 737 | background: @accent-colour !important; 738 | } 739 | 740 | /* text highlight */ 741 | ::selection { 742 | background: fadeout(@accent-colour, 80%) !important; 743 | color: @text !important; 744 | } 745 | 746 | ::-moz-selection { 747 | background: fadeout(@accent-colour, 80%) !important; 748 | color: @text !important; 749 | } 750 | } 751 | } 752 | @-moz-document url-prefix('https://www.youtube.com/redirect') { 753 | 754 | /* youtube.com-redirect */ 755 | :root[dark] { 756 | #catppuccin(@darkTheme, @accentColour); 757 | } 758 | :root { 759 | #catppuccin(@lightTheme, @accentColour); 760 | } 761 | 762 | #catppuccin(@lookup, @accent) { 763 | 764 | @rosewater: @catppuccin[@@lookup][@rosewater]; 765 | @flamingo: @catppuccin[@@lookup][@flamingo]; 766 | @pink: @catppuccin[@@lookup][@pink]; 767 | @mauve: @catppuccin[@@lookup][@mauve]; 768 | @red: @catppuccin[@@lookup][@red]; 769 | @maroon: @catppuccin[@@lookup][@maroon]; 770 | @peach: @catppuccin[@@lookup][@peach]; 771 | @yellow: @catppuccin[@@lookup][@yellow]; 772 | @green: @catppuccin[@@lookup][@green]; 773 | @teal: @catppuccin[@@lookup][@teal]; 774 | @sky: @catppuccin[@@lookup][@sky]; 775 | @sapphire: @catppuccin[@@lookup][@sapphire]; 776 | @blue: @catppuccin[@@lookup][@blue]; 777 | @lavender: @catppuccin[@@lookup][@lavender]; 778 | @text: @catppuccin[@@lookup][@text]; 779 | @subtext1: @catppuccin[@@lookup][@subtext1]; 780 | @subtext0: @catppuccin[@@lookup][@subtext0]; 781 | @overlay2: @catppuccin[@@lookup][@overlay2]; 782 | @overlay1: @catppuccin[@@lookup][@overlay1]; 783 | @overlay0: @catppuccin[@@lookup][@overlay0]; 784 | @surface2: @catppuccin[@@lookup][@surface2]; 785 | @surface1: @catppuccin[@@lookup][@surface1]; 786 | @surface0: @catppuccin[@@lookup][@surface0]; 787 | @base: @catppuccin[@@lookup][@base]; 788 | @mantle: @catppuccin[@@lookup][@mantle]; 789 | @crust: @catppuccin[@@lookup][@crust]; 790 | @accent-colour: @catppuccin[@@lookup][@@accent]; 791 | 792 | h1 { 793 | color: @text !important; 794 | } 795 | 796 | #redirect-main-text { 797 | color: @overlay2 !important; 798 | .bolded { 799 | color: @accent-colour !important; 800 | } 801 | } 802 | 803 | /* search */ 804 | #masthead-search-terms-border { 805 | border-color: @surface0 !important; 806 | background-color: @surface0 !important; 807 | box-shadow: fadeout(@crust, 10%) !important; 808 | } 809 | 810 | /*Community Cross-posting*/ 811 | ytd-shared-post-renderer[uses-compact-lockup] #repost-context.ytd-shared-post-renderer { 812 | background-color: var(--second-background); 813 | } 814 | #divider-line-container.ytd-shared-post-renderer { 815 | background-color: var(--yt-spec-10-percent-layer); 816 | } 817 | 818 | #masthead-search-terms { 819 | color: @text !important; 820 | } 821 | 822 | .search-button { 823 | background: @surface0 !important; 824 | border-color: @surface0 !important; 825 | } 826 | 827 | .search-button-content { 828 | filter: invert(1); 829 | } 830 | 831 | #redirect-backto-safety-button:hover { 832 | color: @text !important; 833 | } 834 | 835 | #logo-container .content-region { 836 | color: @text !important; 837 | } 838 | 839 | /* text highlight */ 840 | ::selection { 841 | background: fadeout(@accent-colour, 80%) !important; 842 | color: @text !important; 843 | } 844 | 845 | ::-moz-selection { 846 | background: fadeout(@accent-colour, 80%) !important; 847 | color: @text !important; 848 | } 849 | } 850 | } 851 | 852 | @-moz-document url-prefix('https://studio.youtube.com') { 853 | 854 | /* studio.youtube.com */ 855 | :root[dark] { 856 | #catppuccin(@darkTheme, @accentColour); 857 | } 858 | :root { 859 | #catppuccin(@lightTheme, @accentColour); 860 | } 861 | 862 | #catppuccin(@lookup, @accent) { 863 | 864 | @rosewater: @catppuccin[@@lookup][@rosewater]; 865 | @flamingo: @catppuccin[@@lookup][@flamingo]; 866 | @pink: @catppuccin[@@lookup][@pink]; 867 | @mauve: @catppuccin[@@lookup][@mauve]; 868 | @red: @catppuccin[@@lookup][@red]; 869 | @maroon: @catppuccin[@@lookup][@maroon]; 870 | @peach: @catppuccin[@@lookup][@peach]; 871 | @yellow: @catppuccin[@@lookup][@yellow]; 872 | @green: @catppuccin[@@lookup][@green]; 873 | @teal: @catppuccin[@@lookup][@teal]; 874 | @sky: @catppuccin[@@lookup][@sky]; 875 | @sapphire: @catppuccin[@@lookup][@sapphire]; 876 | @blue: @catppuccin[@@lookup][@blue]; 877 | @lavender: @catppuccin[@@lookup][@lavender]; 878 | @text: @catppuccin[@@lookup][@text]; 879 | @subtext1: @catppuccin[@@lookup][@subtext1]; 880 | @subtext0: @catppuccin[@@lookup][@subtext0]; 881 | @overlay2: @catppuccin[@@lookup][@overlay2]; 882 | @overlay1: @catppuccin[@@lookup][@overlay1]; 883 | @overlay0: @catppuccin[@@lookup][@overlay0]; 884 | @surface2: @catppuccin[@@lookup][@surface2]; 885 | @surface1: @catppuccin[@@lookup][@surface1]; 886 | @surface0: @catppuccin[@@lookup][@surface0]; 887 | @base: @catppuccin[@@lookup][@base]; 888 | @mantle: @catppuccin[@@lookup][@mantle]; 889 | @crust: @catppuccin[@@lookup][@crust]; 890 | @accent-colour: @catppuccin[@@lookup][@@accent]; 891 | 892 | &, 893 | html, 894 | html[dark], 895 | html[dark][dark], 896 | &[dark], 897 | &[light], 898 | [light], 899 | html[light], 900 | html[light][light] { 901 | /* disable */ 902 | --yt-spec-black-pure-alpha-80: (null) !important; 903 | --yt-spec-black-pure-alpha-60: (null) !important; 904 | --yt-spec-black-1-alpha-98: (null) !important; 905 | --yt-spec-black-1-alpha-95: (null) !important; 906 | 907 | /* text */ 908 | --yt-spec-text-primary: @text !important; 909 | --ytcp-text-primary: @text !important; 910 | --ytcp-text-primary-inverse: @base !important; 911 | --ytcp-static-overlay-text-primary-inverse: @base !important; 912 | --ytcp-wordmark-text: @text !important; 913 | --ytcp-text-secondary: @subtext0 !important; 914 | --ytcp-text-disabled: @subtext1 !important; 915 | --ytcp-overlay-text-primary: @overlay2 !important; 916 | 917 | /* main bg */ 918 | --ytcp-general-background-a: @base !important; 919 | --yt-spec-base-background: @base !important; 920 | --yt-spec-black-3: @base !important; 921 | 922 | /* secondary bg */ 923 | --yt-spec-brand-background-solid: @mantle !important; 924 | --ytcp-brand-background-solid: @mantle !important; 925 | --yt-spec-raised-background: @mantle !important; 926 | --ytcp-general-background-b: @mantle !important; 927 | --ytcp-analytics-reach-background: @mantle !important; 928 | --yt-spec-black-2: @mantle !important; 929 | 930 | /* additonal bg */ 931 | --ytcp-general-background-c: @crust !important; 932 | 933 | /* menu */ 934 | --ytcp-menu-background: @surface0 !important; 935 | 936 | /* card borders */ 937 | --ytcp-container-border-color: @surface0 !important; 938 | --ytcp-container-hovered-border-color: @surface0 !important; 939 | --ytcp-line-divider-solid: @surface0 !important; 940 | --ytcp-container-border-color-inverse: @subtext0 !important; 941 | --ytcp-line-divider-solid-inverse: @subtext0 !important; 942 | 943 | /* links */ 944 | --ytcp-call-to-action: @sapphire !important; 945 | --ytcp-call-to-action-inverse: @mantle !important; 946 | 947 | /* buttons */ 948 | --ytcp-call-to-action-raised-background: @accent-colour !important; 949 | --yt-spec-brand-button-background: @accent-colour !important; 950 | --ytcp-call-to-action-raised-disabled: @surface2 !important; 951 | --ytcp-call-to-action-raised-disabled-background: @overlay2 !important; 952 | --ytcp-call-to-action-raised-background-inverse: @base !important; 953 | --ytcp-call-to-action-raised-disabled-inverse: @surface2 !important; 954 | --ytcp-call-to-action-raised-disabled-background-inverse: @overlay2 !important; 955 | 956 | /* dropdown */ 957 | --yt-spec-brand-background-primary: @surface0 !important; 958 | 959 | /* icons */ 960 | --yt-compact-link-icon-color: @overlay2 !important; 961 | --ytcp-icon-active: @accent-colour !important; 962 | --ytcp-icon-inactive: @overlay2 !important; 963 | --ytcp-icon-disabled: @overlay2 !important; 964 | --ytcp-icon-active-inverse: @overlay1 !important; 965 | --ytcp-icon-disabled-inverse: @subtext1 !important; 966 | 967 | /* colours */ 968 | --ytcp-error-red: @red !important; 969 | --ytcp-badge-red: @red !important; 970 | --ytcp-error-red-inverse: @red !important; 971 | --ytcp-themed-red-inverse: @red !important; 972 | --ytcp-themed-red: @red !important; 973 | --ytcp-themed-blue: @blue !important; 974 | --ytcp-badge-blue-solid: @blue !important; 975 | --ytcp-themed-blue-inverse: @blue !important; 976 | --ytcp-themed-green: @green !important; 977 | --ytmus-genre-primary-melon: @green !important; 978 | --ytcp-themed-green-inverse: @green !important; 979 | --ytcp-analytics-pine: @green !important; 980 | --ytcp-analytics-pine-inverse: @green !important; 981 | --ytcp-analytics-parrot: @green !important; 982 | --ytcp-themed-yellow: @peach !important; 983 | --ytmus-genre-primary-gold: @peach !important; 984 | --ytcp-yellow-inverse: @peach !important; 985 | --ytcp-badge-yellow: @peach !important; 986 | --ytcp-analytics-yellow: @peach !important; 987 | --ytcp-analytics-apricot: @peach !important; 988 | --ytcp-suggested-action: @teal !important; 989 | --ytcp-analytics-overview: @teal !important; 990 | --ytcp-analytics-revenue: @teal !important; 991 | --ytcp-analytics-default-secondary: @teal !important; 992 | --ytcp-analytics-royal-blue: @lavender !important; 993 | --ytcp-analytics-reach: @lavender !important; 994 | --ytcp-analytics-audience: @lavender !important; 995 | --ytcp-analytics-engagement: @pink !important; 996 | --ytcp-analytics-revenue-secondary: @pink !important; 997 | --ytcp-analytics-bubblegum: @flamingo !important; 998 | --ytmus-genre-primary-ruby: @flamingo !important; 999 | --ytmus-genre-primary-salmon: @mauve !important; 1000 | --ytmus-genre-primary-orange: @maroon !important; 1001 | --ytmus-genre-primary-sky: @sky !important; 1002 | --ytmus-genre-primary-sky-inverse: @sky !important; 1003 | 1004 | /* misc */ 1005 | --yt-spec-badge-chip-background: @surface1 !important; 1006 | --ytcp-focus-inverse: @accent-colour !important; 1007 | --ytcp-focus: @accent-colour !important; 1008 | --ytcp-selected-item: @accent-colour !important; 1009 | --ytcp-hover-item: @overlay2 !important; 1010 | --ytcp-chip-active-focus: @accent-colour !important; 1011 | --ytcp-playhead: @overlay2 !important; 1012 | --ytcp-playhead-inverse: @overlay2 !important; 1013 | } 1014 | 1015 | ytcp-button.destructive.ytls-error-dialog { 1016 | color: @base !important; 1017 | } 1018 | 1019 | yt-formatted-string.ytls-error-dialog, 1020 | tp-yt-iron-icon.ytls-error-dialog { 1021 | color: @text !important; 1022 | } 1023 | 1024 | /* text highlight */ 1025 | ::selection { 1026 | background: fadeout(@accent-colour, 80%) !important; 1027 | color: @text !important; 1028 | } 1029 | 1030 | ::-moz-selection { 1031 | background: fadeout(@accent-colour, 80%) !important; 1032 | color: @text !important; 1033 | } 1034 | } 1035 | } 1036 | 1037 | @catppuccin: { 1038 | @latte: { 1039 | @rosewater: #dc8a78; 1040 | @flamingo: #dd7878; 1041 | @pink: #ea76cb; 1042 | @mauve: #8839ef; 1043 | @red: #d20f39; 1044 | @maroon: #e64553; 1045 | @peach: #fe640b; 1046 | @yellow: #df8e1d; 1047 | @green: #40a02b; 1048 | @teal: #179299; 1049 | @sky: #04a5e5; 1050 | @sapphire: #209fb5; 1051 | @blue: #1e66f5; 1052 | @lavender: #7287fd; 1053 | @text: #4c4f69; 1054 | @subtext1: #5c5f77; 1055 | @subtext0: #6c6f85; 1056 | @overlay2: #7c7f93; 1057 | @overlay1: #8c8fa1; 1058 | @overlay0: #9ca0b0; 1059 | @surface2: #acb0be; 1060 | @surface1: #bcc0cc; 1061 | @surface0: #ccd0da; 1062 | @base: #eff1f5; 1063 | @mantle: #e6e9ef; 1064 | @crust: #dce0e8; 1065 | } 1066 | @frappe: { 1067 | @rosewater: #f2d5cf; 1068 | @flamingo: #eebebe; 1069 | @pink: #f4b8e4; 1070 | @mauve: #ca9ee6; 1071 | @red: #e78284; 1072 | @maroon: #ea999c; 1073 | @peach: #ef9f76; 1074 | @yellow: #e5c890; 1075 | @green: #a6d189; 1076 | @teal: #81c8be; 1077 | @sky: #99d1db; 1078 | @sapphire: #85c1dc; 1079 | @blue: #8caaee; 1080 | @lavender: #babbf1; 1081 | @text: #c6d0f5; 1082 | @subtext1: #b5bfe2; 1083 | @subtext0: #a5adce; 1084 | @overlay2: #949cbb; 1085 | @overlay1: #838ba7; 1086 | @overlay0: #737994; 1087 | @surface2: #626880; 1088 | @surface1: #51576d; 1089 | @surface0: #414559; 1090 | @base: #303446; 1091 | @mantle: #292c3c; 1092 | @crust: #232634; 1093 | } 1094 | @macchiato: { 1095 | @rosewater: #f4dbd6; 1096 | @flamingo: #f0c6c6; 1097 | @pink: #f5bde6; 1098 | @mauve: #c6a0f6; 1099 | @red: #ed8796; 1100 | @maroon: #ee99a0; 1101 | @peach: #f5a97f; 1102 | @yellow: #eed49f; 1103 | @green: #a6da95; 1104 | @teal: #8bd5ca; 1105 | @sky: #91d7e3; 1106 | @sapphire: #7dc4e4; 1107 | @blue: #8aadf4; 1108 | @lavender: #b7bdf8; 1109 | @text: #cad3f5; 1110 | @subtext1: #b8c0e0; 1111 | @subtext0: #a5adcb; 1112 | @overlay2: #939ab7; 1113 | @overlay1: #8087a2; 1114 | @overlay0: #6e738d; 1115 | @surface2: #5b6078; 1116 | @surface1: #494d64; 1117 | @surface0: #363a4f; 1118 | @base: #24273a; 1119 | @mantle: #1e2030; 1120 | @crust: #181926; 1121 | } 1122 | @mocha: { 1123 | @rosewater: #f5e0dc; 1124 | @flamingo: #f2cdcd; 1125 | @pink: #f5c2e7; 1126 | @mauve: #cba6f7; 1127 | @red: #f38ba8; 1128 | @maroon: #eba0ac; 1129 | @peach: #fab387; 1130 | @yellow: #f9e2af; 1131 | @green: #a6e3a1; 1132 | @teal: #94e2d5; 1133 | @sky: #89dceb; 1134 | @sapphire: #74c7ec; 1135 | @blue: #89b4fa; 1136 | @lavender: #b4befe; 1137 | @text: #cdd6f4; 1138 | @subtext1: #bac2de; 1139 | @subtext0: #a6adc8; 1140 | @overlay2: #9399b2; 1141 | @overlay1: #7f849c; 1142 | @overlay0: #6c7086; 1143 | @surface2: #585b70; 1144 | @surface1: #45475a; 1145 | @surface0: #313244; 1146 | @base: #1e1e2e; 1147 | @mantle: #181825; 1148 | @crust: #11111b; 1149 | } 1150 | } 1151 | --------------------------------------------------------------------------------