From 4443b8cbeb2143c5b6c10eafb43a7129a47d9a97 Mon Sep 17 00:00:00 2001 From: "Seraphim R. Pardee" Date: Fri, 1 Nov 2024 21:16:06 -0400 Subject: [PATCH] Initial commit, pt. 2 --- themes/Discolored/manifest.json | 1 + themes/Discolored/src.css | 9 + themes/EmojiReplace/manifest.json | 1 + themes/EmojiReplace/src.css | 40 +++++ themes/Gruvbox/src.css | 271 ++++++++++++++++++++++++++++++ themes/RadialStatus/manifest.json | 1 + themes/RadialStatus/src.css | 33 ++++ themes/SoftX/manifest.json | 1 + themes/SoftX/src.css | 201 ++++++++++++++++++++++ 9 files changed, 558 insertions(+) create mode 100644 themes/Discolored/manifest.json create mode 100644 themes/Discolored/src.css create mode 100644 themes/EmojiReplace/manifest.json create mode 100644 themes/EmojiReplace/src.css create mode 100644 themes/Gruvbox/src.css create mode 100644 themes/RadialStatus/manifest.json create mode 100644 themes/RadialStatus/src.css create mode 100644 themes/SoftX/manifest.json create mode 100644 themes/SoftX/src.css diff --git a/themes/Discolored/manifest.json b/themes/Discolored/manifest.json new file mode 100644 index 0000000..e18bc22 --- /dev/null +++ b/themes/Discolored/manifest.json @@ -0,0 +1 @@ +{"theme":"src.css","name":"Discolored","enabled":true,"author":"snapper#0001, Nyria#4198","description":"Colorize Discord's boring SVGs","version":"1.3","supportsLegcordTitlebar":false} \ No newline at end of file diff --git a/themes/Discolored/src.css b/themes/Discolored/src.css new file mode 100644 index 0000000..930522d --- /dev/null +++ b/themes/Discolored/src.css @@ -0,0 +1,9 @@ +/** +* @name Discolored +* @author snapper#0001, Nyria#4198 +* @description Colorize Discord's boring SVGs +* @version 1.3 +*/ + +@import "https://nyri4.github.io/Discolored/main.css"; +@import url("https://nyri4.github.io/donators/donators.css"); diff --git a/themes/EmojiReplace/manifest.json b/themes/EmojiReplace/manifest.json new file mode 100644 index 0000000..4a5986e --- /dev/null +++ b/themes/EmojiReplace/manifest.json @@ -0,0 +1 @@ +{"theme":"src.css","name":"EmojiReplace","enabled":true,"description":"Replaces Discord's Emojis with Emojis of a different Provider (Apple, Facebook...)","author":"DevilBro","version":"1.0.0","authorId":"278543574059057154","invite":"Jx3TjNS","donate":"https://www.paypal.me/MircoWittrien","patreon":"https://www.patreon.com/MircoWittrien","website":"https://mwittrien.github.io/","source":"https://github.com/mwittrien/BetterDiscordAddons/tree/master/Themes/EmojiReplace/","updateSrc":"https://mwittrien.github.io/BetterDiscordAddons/Themes/EmojiReplace/EmojiReplace.theme.css","supportsLegcordTitlebar":false} \ No newline at end of file diff --git a/themes/EmojiReplace/src.css b/themes/EmojiReplace/src.css new file mode 100644 index 0000000..4df394e --- /dev/null +++ b/themes/EmojiReplace/src.css @@ -0,0 +1,40 @@ +/** + * @name EmojiReplace + * @description Replaces Discord's Emojis with Emojis of a different Provider (Apple, Facebook...) + * @author DevilBro + * @version 1.0.0 + * @authorId 278543574059057154 + * @invite Jx3TjNS + * @donate https://www.paypal.me/MircoWittrien + * @patreon https://www.patreon.com/MircoWittrien + * @website https://mwittrien.github.io/ + * @source https://github.com/mwittrien/BetterDiscordAddons/tree/master/Themes/EmojiReplace/ + * @updateUrl https://mwittrien.github.io/BetterDiscordAddons/Themes/EmojiReplace/EmojiReplace.theme.css + */ + +/* + !!READ THIS!! + + This theme lets you swap the default emojis of discord with the emojis of a provider of your choice. + To change the provider simply swap the marked word in the import url down below with a supported provider listed below. + The name of the provider is CASE SENSITIVE, meaning you have to write it exactly like it's written below. + Correct: Apple + False: apple, APPLE, aPpLe + + Supported Providers: + → Apple + → Facebook + → Google + → JoyPixels + → Microsoft + → OpenMoji + → Samsung + → Toss + → WhatsApp +*/ + +/* REPLACE THIS */ +/* ↓↓↓↓↓ */ +@import url(https://mwittrien.github.io/BetterDiscordAddons/Themes/EmojiReplace/base/Samsung.css); +/* ↑↑↑↑↑ */ +/* REPLACE THIS */ \ No newline at end of file diff --git a/themes/Gruvbox/src.css b/themes/Gruvbox/src.css new file mode 100644 index 0000000..b615ce9 --- /dev/null +++ b/themes/Gruvbox/src.css @@ -0,0 +1,271 @@ +//META{"name":"Gruvbox Hard Dark","description":"Themes your Discord using Gruvbox colors.","author":"Ethan McTague","version":"1.0"}*// +/* BetterDiscord Gruvbox Theme - By Ethan McTague + + + Compatible with the latest version of Discord (as of Jan 23, 2020.) + + + Copyright 2020 Ethan McTague + Licensed under the BSD 3-clause license. + + + Based on the Gruvbox color scheme by Pavel Pertsev: https://github.com/morhetz/gruvbox + + + Using CSS from highlight.js themes, to style code blocks: https://highlightjs.org/ + highlight.js is licensed under the BSD 3-clause license - see its section in the code for more details. + + + Be aware: BetterDiscord use is against the discord TOS. + I am not responsible for your use of BetterDiscord or of this theme. + + [ ...discord, if you want to add builtin color scheme support, hmu :) ] + + + Installation: + 1. Install BetterDiscord. + 2. Go to "Themes" in discord's settings. + 3. Select "Open Themes Folder", and save this file there as: gruvbox.theme.css + 4. Go back to discord and switch the theme on! + +*/ + + +/* Set basic color variables. Some parts of Discord don't use these, so we need to do more after... */ +:root { + --interactive-normal: #ebdbb2; + --text-normal: #ebdbb2; + --background-primary: #1d2021; + --background-secondary: #282828; + --background-tertiary: #3c3836; + --channels-default: #d5c4a1; + --deprecated-panel-background: #282828; + --channeltextarea-background: #32302f; + --brand-experiment: var(--background-tertiary); + --text-muted: var(--channels-default); + --gruvbox-aqua: #8ec07c; + --text-positive: var(--gruvbox-aqua); +} + +/* Popout / menu colors. */ +.da-popouts .da-container, .da-friendsTableHeader, .da-friendsTable, .da-autocomplete, .da-themedPopout, .da-header, .da-footer, .da-userPopout > *, .da-systemPad, .da-autocompleteHeaderBackground { + background-color: var(--background-secondary) !important; + border-color: transparent !important; +} + +.theme-dark .da-messageGroupWrapper { + background-color: var(--background-tertiary) !important; + border-color: transparent; +} + +/* Each individual item in popouts has a slight gradient - we clear it here. */ +.theme-dark .da-option:after { + background-image: none !important; +} + +/* Force BetterDiscord settings items to match normal settings items. */ +.theme-dark #bd-settings-sidebar .ui-tab-bar-item { + color: var(--interactive-normal); +} + +/* Recolor BD settings headers, Nitro settings item and Add Channel icon */ +.theme-dark #bd-settings-sidebar .ui-tab-bar-header, div[style*="color: rgb(114, 137, 218);"], .da-addButtonIcon { + color: var(--channels-default) !important; +} + +/* Force BetterDiscord *active* settings items to match normal active settings items. */ +.theme-dark #bd-settings-sidebar .ui-tab-bar-item.selected, .theme-dark .da-autocompleteRow .da-selectorSelected { + background-color: var(--background-modifier-selected); + color: var(--interactive-active); +} + +/* Recolor the emoji button in the chat bar to match the color scheme. */ +.da-emojiButtonNormal .da-contents .da-sprite { + filter: sepia(1) !important; +} + + +/* Recolor scrollbar track. */ +.da-messagesWrapper .da-scroller::-webkit-scrollbar, +.da-messagesWrapper .da-scroller::-webkit-scrollbar-track-piece { + background-color: var(--background-tertiary) !important; + border-color: rgba(0,0,0,0) !important; +} + +/* Recolor scrollbar thumbs. */ +.da-scrollerThemed .da-scroller::-webkit-scrollbar-thumb, +.da-scrollerWrap .da-scroller::-webkit-scrollbar-thumb { + background-color: var(--background-secondary) !important; + border-color: var(--background-tertiary) !important; +} + + + + + +/* CSS below this comment is from highlight.js gruvbox-dark theme. + https://github.com/highlightjs/highlight.js/blob/master/src/styles/gruvbox-dark.css + + This CSS makes code blocks within Discord match gruvbox. + + hightlight.js is copyright 2006 Ivan Sagalaev and licensed under the BSD 3-clause license, + as specified here: https://github.com/highlightjs/highlight.js/blob/master/LICENSE */ + +/* Gruvbox Red */ +.hljs-deletion, +.hljs-formula, +.hljs-keyword, +.hljs-link, +.hljs-selector-tag { + color: #fb4934; +} + +/* Gruvbox Blue */ +.hljs-built_in, +.hljs-emphasis, +.hljs-name, +.hljs-quote, +.hljs-strong, +.hljs-title, +.hljs-variable { + color: #83a598; +} + +/* Gruvbox Yellow */ +.hljs-attr, +.hljs-params, +.hljs-template-tag, +.hljs-type { + color: #fabd2f; +} + +/* Gruvbox Purple */ +.hljs-builtin-name, +.hljs-doctag, +.hljs-literal, +.hljs-number { + color: #8f3f71; +} + +/* Gruvbox Orange */ +.hljs-code, +.hljs-meta, +.hljs-regexp, +.hljs-selector-id, +.hljs-template-variable { + color: #fe8019; +} + +/* Gruvbox Green */ +.hljs-addition, +.hljs-meta-string, +.hljs-section, +.hljs-selector-attr, +.hljs-selector-class, +.hljs-string, +.hljs-symbol { + color: #b8bb26; +} + +/* Gruvbox Aqua */ +.hljs-attribute, +.hljs-bullet, +.hljs-class, +.hljs-function, +.hljs-function .hljs-keyword, +.hljs-meta-keyword, +.hljs-selector-pseudo, +.hljs-tag { + color: var(--gruvbox-aqua); +} + +/* Gruvbox Gray */ +.hljs-comment { + color: #928374; +} + +/* Gruvbox Purple */ +.hljs-link_label, +.hljs-literal, +.hljs-number { + color: #d3869b; +} + +.hljs-comment, +.hljs-emphasis { + font-style: italic; +} + +.hljs-section, +.hljs-strong, +.hljs-tag { + font-weight: bold; +} + +/* custom additions */ +.theme-dark .container_b181b6 { /* forum container */ + background-color: var(--background-tertiary) !important; +} + +.list__5ced9::-webkit-scrollbar { /* forum scrollbar */ + display: none !important; +} + +.container_def45dc, .chat__52833.threadSidebarOpen_fa231d { /* forum side panel view */ + border-radius: 0px !important; +} + +.resizeHandle-PBRzPC { /* -- no clue where this is from, there's 9 css values named this */ + width: 0px !important; +} + +.container__11d72.themed_b152d4{ /* friends bar section */ + background-color: var(--background-tertiary) !important; +} + +.theme-dark .children__32014:after { /* friends bar inside upperContainer */ + display: none !important; +} + +.tabBar__73938 .addFriend__80542.addFriend__80542.addFriend__80542, .tabBar__73938 .addFriend__80542.addFriend__80542.addFriend__80542:hover { /* add friend button */ + background-color: var(--gruvbox-aqua); + color: #3c3836; +} + +.lookFilled__19298.colorRed_d6b062, .liveShapeRound__811c0 { /* live indicator */ + background-color: #cc241d !important; +} + +.border_e782de.speaking__1dd69, #app-mount.avatarSpeaking__61fb1, #app-mount.avatarSpeaking_c95053 { /* speaking indicator */ + box-shadow: inset 0 0 0 2px var(--gruvbox-aqua), inset 0 0 0 3px var(--background-secondary); +} + +.iconBadge_f54f3d.participating__25a2a { /* no clue, can find in css tho */ + background-color: var(--gruvbox-aqua); + color: var(--background-tertiary); +} + +.button-1EGGcP.buttonColor-3bP3fX.buttonActive-Uc1jHx, .button-1EGGcP .buttonColor-3bP3fX.buttonActive-Uc1jHx { + background-color: var(--gruvbox-aqua); + color: var(--background-tertiary); +} + +.button-1EGGcP.buttonColor-3bP3fX.buttonActive-Uc1jHx:hover, .button-1EGGcP .buttonColor-3bP3fX.buttonActive-Uc1jHx:hover, .lookFilled-yCfaCM.colorBrand-I6CyqQ:active { + background-color: #689d6a; +} + +.platform-osx .wrapper_a7e7a8 { /* top of server list */ + margin-top: 16px; +} + +.typeMacOS__496b0 .macDragRegion__754e2 { /* top of server list */ + padding-bottom: 16px; +} + +.theme-dark .spoilerContent__37bfa.hidden_f44e41 { /* spoilered text */ + --__current--spoiler-background-color: #504845; +} + +.theme-dark .spoilerContent__37bfa.hidden_f44e41:hover { /* spoilered text */ + --__current--spoiler-background-color: #665c54; +} \ No newline at end of file diff --git a/themes/RadialStatus/manifest.json b/themes/RadialStatus/manifest.json new file mode 100644 index 0000000..2e5ef4d --- /dev/null +++ b/themes/RadialStatus/manifest.json @@ -0,0 +1 @@ +{"theme":"src.css","name":"RadialStatus","enabled":true,"author":"Gibbu#1211","version":"2.0.0","invite":"ZHthyCw","description":"Changes the status icons to wrap around the avatar. Shape can be changed inside the theme file.","source":"https://github.com/DiscordStyles/RadialStatus","website":"https://www.gibbu.me","supportsLegcordTitlebar":false} \ No newline at end of file diff --git a/themes/RadialStatus/src.css b/themes/RadialStatus/src.css new file mode 100644 index 0000000..102fb10 --- /dev/null +++ b/themes/RadialStatus/src.css @@ -0,0 +1,33 @@ +/** + * @name RadialStatus + * @author Gibbu#1211 + * @version 2.0.0 + * @invite ZHthyCw + * @description Changes the status icons to wrap around the avatar. Shape can be changed inside the theme file. + * @source https://github.com/DiscordStyles/RadialStatus + * @website https://www.gibbu.me +*/ + +@import url("https://discordstyles.github.io/RadialStatus/dist/RadialStatus.css"); + +:root { + --rs-small-spacing: 2px; /* Gap between avatar and status for members list/dms | MUST end in px */ + --rs-medium-spacing: 3px; /* Gap between avatar and status for User popout | MUST end in px */ + --rs-large-spacing: 4px; /* Gap between avatar and status for User profiles | MUST end in px */ + + --rs-small-width: 2px; /* Thickness of status border for members list/dms | MUST end in px */ + --rs-medium-width: 3px; /* Thickness of status border for User popout | MUST end in px */ + --rs-large-width: 4px; /* Thickness of status border for User profile | MUST end in px */ + + --rs-avatar-shape: 50%; /* 50% for round - 0% for square */ + + --rs-online-color: #689d6a; /* Colour for online status */ + --rs-idle-color: #d79921; /* Colour for idle status */ + --rs-dnd-color: #cc241d; /* Colour for dnd status */ + --rs-offline-color: #928374; /* Colour for offline status */ + --rs-streaming-color: #b16286; /* Colour for streaming status */ + --rs-invisible-color: #a89984; /* Colour for invisible status - Note: this will only show for your own invisibility */ + --rs-phone-color: var(--rs-online-color); /* Colour of the ring and phone icon when a user is on their phone | */ + + --rs-phone-visible: block; /* Visibility of the phone icon next to a users avatar. | block = visible | none = hidden */ +} diff --git a/themes/SoftX/manifest.json b/themes/SoftX/manifest.json new file mode 100644 index 0000000..6bf8c48 --- /dev/null +++ b/themes/SoftX/manifest.json @@ -0,0 +1 @@ +{"theme":"src.css","name":"SoftX","enabled":true,"author":"Gibbu","version":"1.0.0","description":"A soft and comfy feel for Discord.","source":"https://github.com/DiscordStyles/SoftX","invite":"ZHthyCw","supportsLegcordTitlebar":false} \ No newline at end of file diff --git a/themes/SoftX/src.css b/themes/SoftX/src.css new file mode 100644 index 0000000..e5534ba --- /dev/null +++ b/themes/SoftX/src.css @@ -0,0 +1,201 @@ +/** + * @name SoftX + * @author Gibbu + * @version 1.0.0 + * @description A soft and comfy feel for Discord. + * @source https://github.com/DiscordStyles/SoftX + * @invite ZHthyCw +*/ + +@import url("https://discordstyles.github.io/SoftX/SoftX.css"); + +/* Google Fonts */ +@import url("https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap"); +/* Theme imports */ +@import url("https://discordstyles.github.io/SoftX/RadialGlow.css"); /* RadialGlow effect for avatars. | Remove this line to disable. */ +/*@import url("https://discordstyles.github.io/SoftX/VerticalUserArea.css"); /* Vertical user area. Moves the mute, defean and settings icons to the server list. | Remove this line to disable. */ +/*@import url("https://discordstyles.github.io/Addons/windows-titlebar.css"); /* Windows titlebar. | Remove this line to disable. */ +:root { + /* + * SoftX variables + */ + --background-image: url("https://i.imgur.com/Nglfni6.png"); /* Background image | URL MUST BE A DIRECT LINK (ending in .jpg, .jpeg, .png, .gif) */ + --background-blur: 0px; /* Blur intensity of --background-image | Must end in px | Default: 0px */ + --accent: 224, 224, 224; /* Colour used around the app. | Values are in R,G,B format. | Default: 0, 231, 169 */ + --channels-width: 300px; /* Width of the channels list. | Default: 300px */ + --guilds-width: 105px; /* Width of the server list. | Default: 105px */ + --members-width: 280px; /* Width of the members list. | Default: 280px */ + --server-size: 50px; /* Size of the servers inside the server list. | Default: 50px */ + --chat-avatar-size: 32px; /* Size of the chat avatars. | Default: 32px */ + --glow-intensity: 1.5; /* Intensity of the glow used around the app. | Set to 0 to disable the glow. | Decimals allowed | Default: 1 */ + --opacity: 0.85; /* Opacity of overall app. | Default: .85 */ + --font: "Noto Serif"; /* Custom font | Default: 'Inter' */ + --avatar-roundness: 50%; /* Roundness for avatars. | 0% = Square, 50% = Circle | Default: 50% */ + --server-roundness: 50%; /* Roundness for servers. | 0% = Square, 50% = Circle | Default: 50% */ + /* + * RadialStatus veriables + */ + --rs-small-spacing: 2px; /* Spacing between profile image and outer ring on small icons (e.g. member list) | Default: 2px */ + --rs-medium-spacing: 4px; /* Spacing between profile image and outer ring on medium icons (e.g. user popout) | Default: 4px */ + --rs-large-spacing: 4px; /* Spacing between profile image and outer ring on medium icons (e.g. user popout fullscreen) | Default: 4px */ + --rs-small-width: 1.5px; /* Ring width (follows same sizing as above) | Default: 1.5px */ + --rs-medium-width: 2px; /* Default: 2px */ + --rs-large-width: 2px; /* Default: 2px */ + /* Customizable colors */ + --rs-online-color: #43b581; /* Default: #43b581 */ + --rs-idle-color: #faa61a; /* Default: #faa61a */ + --rs-dnd-color: #f04747; /* Default: #f04747 */ + --rs-offline-color: #636b75; /* Default: #636b75 */ + --rs-streaming-color: #643da7; /* Default: #643da7 */ + --rs-invisible-color: #747f8d; /* Default: #747f8d */ + --rs-phone-color: var( + --rs-online-color + ); /* Color of the phone for mobile users | Default: var(--rs-online-color) */ + --rs-phone-visible: block; /* Visibility of the phone for mobile users | Default: block */ + + --interactive-normal: #e0e0e0; +} + +/* fix background */ +.bg_d4b6c5 { + background-image: none; + background: radial-gradient( + circle, + rgba(16, 16, 16, 1) 0%, + rgba(16, 16, 16, 1) 25%, + rgba(16, 16, 16, 1) 75%, + rgba(224, 224, 224, 1) 100% + ); +} + +/* smallen window button area */ +.platform-osx .wrapper_fea3ef { + margin-top: 20px; +} + +/* properly round out the server items */ +#app-mount .listItem_c96c45 [class*="pill"] { + left: 50%; + top: unset; + transform: translateX(-53%); + /*transform: translate(-2.25vh, -0.1vh);*/ + width: calc(var(--server-size, 48px)); + height: calc(var(--server-size, 48px)); + overflow: visible; + margin-left: unset; +} + +/* fix default background for users */ +#app-mount .userPopoutOuter_c69a7b { + background: #101010; +} + +/* undo gap to status */ +.biteSizeInnerThemed_c69a7b { + gap: unset; +} + +/* force scrollbar visibility */ +.chatContent_a7d72e [class*="scrollerBase_"]::-webkit-scrollbar { + display: initial; +} + +/* fix displacement of status */ +.custom-profile-theme .visibleContainer_d0a252.biteSize_d0a252 { + top: calc( + -15px + var(--custom-user-banner-height-bite-size) + var(--custom-user-profile-themed-container-user-profile-themed-padding) + ) !important; +} + +/* remove activity */ +h3.membersGroup_cbd271.container_a5ad5c:has(.headerContainer_bc6acb), +div.members_cbd271 > div > div:has(.container_c64476.openOnHover_c64476) { + display: none; +} + +/* discover icon */ +.footer_aa1bff { + width: var(--guilds-width); + background: transparent; + padding-bottom: 0px; + max-height: 45px; +} + +#app-mount + > div.appAsidePanelWrapper_bd26cc + > div.notAppAsidePanel_bd26cc + > div.app_bd26cc + > div + > div.layers_d4b6c5.layers_a01fb1 + > div + > div + > nav + > ul + > div.footer_aa1bff + > div.listItem_c96c45 + > div.listItemWrapper_dfb2f8 + > div, +#app-mount + > div.appAsidePanelWrapper_bd26cc + > div.notAppAsidePanel_bd26cc + > div.app_bd26cc + > div + > div.layers_d4b6c5.layers_a01fb1 + > div + > div + > nav + > ul + > div.footer_aa1bff + > div.listItem_c96c45 + > div.listItemWrapper_dfb2f8 + > div + > svg { + width: 35px; + height: 35px; +} + +div.members_cbd271 > div > div:has(.container_c64476.openOnHover_c64476) { + display: none; +} + +/* unifying role button colors */ +.vc-permviewer-role-button, .userPopoutOuter_c69a7b .roleRemoveButton_f9575e, .pill_e6f2d0, .button_edead5 { + color: var(--interactive-normal); + border-radius: var(--radius-xs); + background: var(--bg-mod-faint); + border: 1px solid var(--profile-body-border-color); +} +.vc-permviewer-role-button, .userPopoutOuter_c69a7b .roleRemoveButton_f9575e, .button_edead5 { + padding: 4px; + height: 24px; +} + +/* sane positioning for remove role icon */ +.roleRemoveIcon_f9575e { + display: none; + width: 8px; + height: 8px; + position: absolute; + top: 50%; + left: 5px; + margin: -7px 0 0 -3px; +} + +/* force remove role icon to be white in all cases */ +// #popout_159 > div > div > div > div > div.body_b8cc6d.thin_c49869.scrollerBase_c49869.fade_c49869 > div.root_e6f2d0 > div:nth-child(2) > div:nth-child(1) > div > svg > path +#popout_159 > div > div > div > div > div.body_b8cc6d.thin_c49869.scrollerBase_c49869.fade_c49869 > div.root_e6f2d0 > div > div > div > svg > path { + fill: var(--white-500); +} + +/* allow for role button colors */ +#app-mount .userPopoutOuter_c69a7b .roleCircle_a26d7b { + z-index: 0; +} +.roleIcon_f9575e { + position: relative; +} + +/* fix background for gif/sticker buttons on hover */ +#app-mount .form_a7d72e .button_dd4f85:not(.attachButton_f298d4).active_f9af59 svg { + background: none !important; +} \ No newline at end of file