271 lines
7.4 KiB
CSS
271 lines
7.4 KiB
CSS
//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 <ethan@tague.me>
|
|
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;
|
|
} |