diff --git a/README.md b/README.md index 3a744b9..a5dd66e 100644 --- a/README.md +++ b/README.md @@ -93,6 +93,7 @@ curl -L https://catppuccin.github.io/discord/dist/catppuccin-mocha.theme.css> ~/ - [Isabelinc](https://github.com/Isabelincorp) - [Ren](https://github.com/watatomo) - [winston](https://github.com/nekowinston) +- [rubyowo](https://github.com/rubyowo)   diff --git a/discord.user.css b/discord.user.css index aeaa0e1..a88f4d6 100644 --- a/discord.user.css +++ b/discord.user.css @@ -4,445 +4,21 @@ @version 0.2.0 @description Soothing pastel theme for Discord @author Catppuccin -@updateURL https://github.com/catppuccin/discord/raw/main/discord.user.css @preprocessor stylus - @var select theme "Theme" ["Latte", "Frappe", "Macchiato", "Mocha*"] -@var checkbox classicLinks "Classic Link Color" 0 -@var checkbox flatAppearance "Flat background" 0 -@var checkbox useInter "Use Inter font" 0 -@var checkbox singleRoleColour "No username colors" 0 ==/UserStyle== */ -// These are functions that are used by color buttons -hoverButtonBG(col) - lighten(col, 5) - -selectedButtonBG(col) - darken(col, 5) - -disabledButtonBG(col) - darken(desaturate(col, 50), 50) - @-moz-document domain("discord.com") { if (theme=="Latte") { - $type = light - - $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 + @import url("https://catppuccin.github.io/discord/dist/catppuccin-latte.theme.css"); } - else if (theme=="Frappe") { - $type = dark - - $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 + if (theme=="Frappe") { + @import url("https://catppuccin.github.io/discord/dist/catppuccin-frappe.theme.css"); } - else if (theme=="Macchiato") { - $type = dark - - $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 + if (theme=="Macchiato") { + @import url("https://catppuccin.github.io/discord/dist/catppuccin-macchiato.theme.css"); } - else if (theme=="Mocha") { - $type = dark - - $rosewater = #f5e0dc - $flamingo = #f2cdcd - $pink = #f5c2e7 - $mauve = #cba6f7 - $red = #f38ba8 - $maroon = #eba0ac - $peach = #fab387 - $yellow = #f9e2af - $green = #a6e3a1 - $teal = #94e2d5 - $sky = #89dceb - $sapphire = #74c7ec - $lavender = #b4befe - $blue = #89b4fa - $text = #cdd6f4 - $subtext1 = #bac2de - $subtext0 = #a6adc8 - $overlay2 = #9399b2 - $overlay1 = #7f849c - $overlay0 = #6c7086 - $surface2 = #585b70 - $surface1 = #45475a - $surface0 = #313244 - $base = #1e1e2e - $mantle = #181825 - $crust = #11111b - } - - .theme-dark, - .theme-light,{ - --brand-experiment: $rosewater; // accent color - --brand-experiment-560: $rosewater; - --brand-experiment-200: $base; // Mention text - --brand-experiment-30a: $rosewater; // Mention background - --brand-experiment-15a: $surface2; - --brand-experiment-600: selectedButtonBG($rosewater); - - if (useInter) { - --font-primary: Inter,Whitney,"Helvetica Neue",Helvetica,Arial,sans-serif; - --font-display: Inter,"ABC Ginto Normal","Helvetica Neue",Helvetica,Arial,sans-serif; - --font-headline: Inter,"ABC Ginto Nord","Helvetica Neue",Helvetica,Arial,sans-serif; - --font-code: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,monospace; - } - - --header-primary: $subtext0; - --header-secondary: $subtext1; - --text-normal: $text; - --text-muted: $subtext0; - --text-link: classicLinks ? rgb(0, 175, 244) : $rosewater; - //--text-link-low-saturation: hsl(197,calc(var(--saturation-factor, 1)*100%),52.9%); - --text-positive: $green; - --text-warning: $yellow; - --text-danger: $red; - --text-brand: $blue; - --interactive-normal: $overlay2; - --interactive-hover: $overlay2; - --interactive-active: $text; - --interactive-muted: $surface1; - --background-primary: $base; - --background-secondary: $mantle; - --background-secondary-alt: $crust; - --background-tertiary: $crust; - --background-accent: $surface1; - --background-floating: $mantle; - --background-nested-floating: #2f3136; - --background-mobile-primary: #36393f; - --background-mobile-secondary: #2f3136; - --chat-background: #36393f; - --chat-border: #202225; - --chat-input-container-background: #36393f; - --background-modifier-hover: $surface1; - --background-modifier-active: $surface2; - --background-modifier-selected: $surface0; - --background-modifier-accent: rgba(79,84,92,0.48); - //--info-positive-background: hsla(139,calc(var(--saturation-factor, 1)*47.3%),43.9%,0.1); - //--info-positive-foreground: hsl(139,calc(var(--saturation-factor, 1)*47.3%),43.9%); - //--info-positive-text: #fff; - --info-warning-background: alpha($yellow, 0.1); - --info-warning-foreground: $yellow; - /*--info-warning-text: #fff; - --info-danger-background: hsla(359,calc(var(--saturation-factor, 1)*82.6%),59.4%,0.1); - --info-danger-foreground: hsl(359,calc(var(--saturation-factor, 1)*82.6%),59.4%); - --info-danger-text: #fff; - --info-help-background: hsla(197,calc(var(--saturation-factor, 1)*100%),47.8%,0.1); - --info-help-foreground: hsl(197,calc(var(--saturation-factor, 1)*100%),47.8%); - --info-help-text: #fff; - --status-positive-background: hsl(139,calc(var(--saturation-factor, 1)*47.1%),33.3%); - --status-positive-text: #fff; - --status-warning-background: hsl(38,calc(var(--saturation-factor, 1)*95.7%),54.1%); - --status-warning-text: #000;*/ - --status-danger-background: $red; - --status-danger-text: $text; - --status-danger: $red; - --status-positive: $green; - --status-warning: $peach; - --button-danger-background: $red; - --button-danger-background-hover: hoverButtonBG($red); - --button-danger-background-active: selectedButtonBG($red); - --button-danger-background-disabled: disabledButtonBG($red); - --button-positive-background: $green; - --button-positive-background-hover: hoverButtonBG($green); - --button-positive-background-active: selectedButtonBG($green); - --button-positive-background-disabled: disabledButtonBG($green); - --button-secondary-background: $surface0; - --button-secondary-background-hover: $surface1; - --button-secondary-background-active: $surface2; - --button-secondary-background-disabled: red; - --button-outline-danger-text: $text; - --button-outline-danger-border: $red; - --button-outline-danger-background: $red; - --button-outline-danger-background-hover: hoverButtonBG($red); - --button-outline-danger-text-hover: $base; - --button-outline-danger-border-hover: hoverButtonBG($red); - --button-outline-danger-background-active: selectedButtonBG($red); - --button-outline-danger-text-active: $base; - --button-outline-danger-border-active: selectedButtonBG($red); - --button-outline-positive-text: #fff; - /*--button-outline-positive-border: hsl(139,calc(var(--saturation-factor, 1)*47.3%),43.9%); - --button-outline-positive-background: hsla(0,0%,100%,0); - --button-outline-positive-background-hover: hsl(139,calc(var(--saturation-factor, 1)*47.1%),33.3%); - --button-outline-positive-text-hover: #fff; - --button-outline-positive-border-hover: hsl(139,calc(var(--saturation-factor, 1)*47.1%),33.3%); - --button-outline-positive-background-active: hsl(138,calc(var(--saturation-factor, 1)*46.8%),24.3%); - --button-outline-positive-text-active: #fff; - --button-outline-positive-border-active: hsl(138,calc(var(--saturation-factor, 1)*46.8%),24.3%); - --button-outline-brand-text: #fff; - --button-outline-brand-border: hsl(235,calc(var(--saturation-factor, 1)*85.6%),64.7%); - --button-outline-brand-background: hsla(0,0%,100%,0); - --button-outline-brand-background-hover: hsl(235,calc(var(--saturation-factor, 1)*85.6%),64.7%); - --button-outline-brand-text-hover: #fff; - --button-outline-brand-border-hover: hsl(235,calc(var(--saturation-factor, 1)*85.6%),64.7%); - --button-outline-brand-background-active: hsl(235,calc(var(--saturation-factor, 1)*51.4%),52.4%); - --button-outline-brand-text-active: #fff; - --button-outline-brand-border-active: hsl(235,calc(var(--saturation-factor, 1)*51.4%),52.4%);*/ - --button-outline-primary-text: #fff; - --button-outline-primary-border: #4f545c; - --button-outline-primary-background: hsla(0,0%,100%,0); - --button-outline-primary-background-hover: #4f545c; - --button-outline-primary-text-hover: #fff; - --button-outline-primary-border-hover: #4f545c; - --button-outline-primary-background-active: #686d73; - --button-outline-primary-text-active: #fff; - --button-outline-primary-border-active: #686d73; - --modal-background: $mantle; - --modal-footer-background: $crust; - --scrollbar-thin-thumb: $surface0; - --scrollbar-thin-track: transparent; - --scrollbar-auto-thumb: $surface0; - --scrollbar-auto-track: transparent; - --scrollbar-auto-scrollbar-color-thumb: $surface0; - --scrollbar-auto-scrollbar-color-track: transparent; - --input-background: $surface0; - --input-placeholder-text: $overlay1; - --elevation-stroke: 0 0 0 1px rgba(4,4,5,0.15); - --elevation-low: 0 1px 0 rgba(4,4,5,0.2),0 1.5px 0 rgba(6,6,7,0.05),0 2px 0 rgba(4,4,5,0.05); - --elevation-medium: 0 4px 4px rgba(0,0,0,0.16); - --elevation-high: 0 8px 16px rgba(0,0,0,0.24); - --logo-primary: #fff; - //--control-brand-foreground: hsl(235,calc(var(--saturation-factor, 1)*86.1%),77.5%); - //--control-brand-foreground-new: hsl(235,calc(var(--saturation-factor, 1)*86.1%),77.5%); - --background-mentioned: alpha($yellow, 0.1); - --background-mentioned-hover: alpha($yellow, 0.08); - --background-message-hover: alpha($mantle, 0.25); - //--background-message-automod: hsla(359,calc(var(--saturation-factor, 1)*82.6%),59.4%,0.05); - //--background-message-automod-hover: hsla(359,calc(var(--saturation-factor, 1)*82.6%),59.4%,0.1);*/ - --channels-default: $overlay1; - --channel-icon: $subtext0; - --channel-text-area-placeholder: #72767d; - --guild-header-text-shadow: 0 1px 1px rgba(0,0,0,0.4); - --channeltextarea-background: $surface0; - --activity-card-background: #202225; - --textbox-markdown-syntax: #8e9297; - --spoiler-revealed-background: #292b2f; - --spoiler-hidden-background: #202225; - --android-navigation-bar-background: #121315; - --deprecated-card-bg: $mantle; - --deprecated-card-editable-bg: rgba(32,34,37,0.3); - --deprecated-store-bg: #36393f; - --deprecated-quickswitcher-input-background: #72767d; - --deprecated-quickswitcher-input-placeholder: hsla(0,0%,100%,0.3); - --deprecated-text-input-bg: #202225; - --deprecated-text-input-border: rgba(0,0,0,0.3); - --deprecated-text-input-border-hover: #040405; - --deprecated-text-input-border-disabled: #202225; - --deprecated-text-input-prefix: #dcddde; - } - - /* Reactions */ - .reaction-3vwAF2 { - background-color: $surface0; - } - - .reaction-3vwAF2:hover { - background-color: $surface1; - } - - /* Buttons */ - .lookFilled-yCfaCM.colorBrand-I6CyqQ, - .lookFilled-yCfaCM.colorRed-rQXKgM - .lookFilled-yCfaCM.colorGreen-3y-Z79, - .selected-2Uns2B, - .colorDefault-CDqZdO.focused-3qFvc8, - .barButtonBase-Sk2mdB{ - color: $base; - } - - .colorDanger-3n-KnP:active:not(.hideInteraction-2jPGL_) { - background-color: $red; - color: $base - } - - .lookFilled-yCfaCM.colorPrimary-2AuQVo { - background-color: $surface0; - color: $text; - } - - /* Checkbox */ - .checked-25WXMf { - background-color: $green !important; - } - - /* Bot tag */ - .botTagRegular-kpctgU { - color: $base; - } - - /* Message hover buttons */ - .wrapper-2vIMkT { - background-color: $surface0; - } - - /* DMs page */ - .container-2cd8Mz { - background-color: $base !important; - } - - /* Delete message pupup */ - .theme-dark .message-G6O-Wv { - background-color: $crust - } - - if (singleRoleColour) { - .username-h_Y3Us, - .username-i5-wv- > span { - color: $rosewater !important; - } - } - - // Mention - .mention:hover { - background: hoverButtonBG($rosewater); - color: $base; - text-decoration: none !important; - } - - // Autocomplete - .autocomplete-3NRXG8 { - background: $base !important; - } - - .categoryHeader-OpJ1Ly { - background: $mantle; - } - - // Status badges - rect[fill^="hsl(139"] { // Online - fill: $green; - } - - rect[fill^="hsl(38"] { // Away - fill: $yellow; - } - - rect[fill^="hsl(359"] { // Do Not Disturb - fill: $red; - } - - rect[fill^="hsl(214"] { // Offline - fill: $subtext0; - } - - // Status badge selector - div[style^="background-color: hsl(139"] { // Online - background-color: $green !important; - } - - div[style^="background-color: hsl(38"] { // Away - background-color: $yellow !important; - } - - div[style^="background-color: hsl(359"] { // Do Not Disturb - background-color: $red !important; - } - - div[style^="background-color: hsl(214"] { // Offline - background-color: $subtext0 !important; - } - - // Flat colors - if (flatAppearance) { - .container-1NXEtd, - .panels-3wFtMD, - .scroller-3X7KbA, - .container-2o3qEW, - .scroller-WSmht3{ - background-color: $base; - } - - .container-3wLKDe, - .homeContainer-r4Hvv1 { - background: $mantle !important; - } - - .title-31SJ6t, - .authBox-1HR6Ha, - .scroller-3j5xK2 { - background-color: $base !important; - } - - .members-3WRCEx > div { - background-color: $base; - } - - .members-3WRCEx, .members-3WRCEx > div { - background-color: $base - } + if (theme=="Mocha") { + @import url("https://catppuccin.github.io/discord/dist/catppuccin-mocha.theme.css"); } }