guz013/frappuccino-theme
Archived
1
0
Fork 0
Code Activity

feat: update stylus theme to v0.2.0 (#55)

Browse Source
This commit is contained in:
rubyowo
2022-11-03 22:41:15 +04:00
committed by GitHub
parent 06f41a15a4
commit 403dac7797
2 changed files with 8 additions and 431 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@@ -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)
 

438
discord.user.css
View File

@@ -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");
}
}