diff --git a/themes/Gruvbox-Gold/README.md b/themes/Gruvbox-Gold/README.md new file mode 100644 index 0000000..8f2bce8 --- /dev/null +++ b/themes/Gruvbox-Gold/README.md @@ -0,0 +1,16 @@ +# Gruvbox-Gold + +## Screenshots + +![Gruvbox-Gold](screenshot.png) + +## More +* Feel free to change the gold (FABD2F in color.ini) to a different accent color + +## Credits + +Theme created by Greyowl + +## Gruvbox + +Inspired by [gruvbox](https://github.com/morhetz/gruvbox) diff --git a/themes/Gruvbox-Gold/color.ini b/themes/Gruvbox-Gold/color.ini new file mode 100644 index 0000000..1b92dac --- /dev/null +++ b/themes/Gruvbox-Gold/color.ini @@ -0,0 +1,20 @@ +[Base] + +main_fg = EBDBB2 +secondary_fg = A89984 +main_bg = 282828 +sidebar_and_player_bg = 1D2021 +cover_overlay_and_shadow = 282828 +indicator_cfg_and_button_bg = FABD2F +pressing_fg = A89984 +slider_bg = 282828 +sidebar_indicator_and_hover_button_bg = FABD2f +scrollbar_fg_and_selected_row_bg = 1D2021 +pressing_button_fg = FABD2f +pressing_button_bg = 1D2021 +selected_button = FABD2F +miscellaneous_bg = 1D2021 +miscellaneous_hover_bg = 1D2021 +preserve_1 = EBDBB2 +indicator_fg_and_button_bg = A89984 +rgb_indicator_fg_and_button_bg = A89984 diff --git a/themes/Gruvbox-Gold/screenshot.png b/themes/Gruvbox-Gold/screenshot.png new file mode 100644 index 0000000..29b995c Binary files /dev/null and b/themes/Gruvbox-Gold/screenshot.png differ diff --git a/themes/Gruvbox-Gold/user.css b/themes/Gruvbox-Gold/user.css new file mode 100644 index 0000000..b191473 --- /dev/null +++ b/themes/Gruvbox-Gold/user.css @@ -0,0 +1,11 @@ +/*Thinner scrollbar*/ +/* ::-webkit-scrollbar { + height: 6px !important; + width: 0px !important; + background-color: transparent; +} */ + +.TableCellSong__label { + color: var(--modspotify_main_fg); + border: 1px solid var(--modspotify_main_fg); +} diff --git a/themes/duvbox.css b/themes/duvbox.css new file mode 100644 index 0000000..1ab4356 --- /dev/null +++ b/themes/duvbox.css @@ -0,0 +1,796 @@ +//META{"name":"Duvbox","description":"A Discord theme based on Gruvbox, a Vim theme","author":"CircuitRCAY","version":"1.6.0"}*// +/** + Duvbox - adapted for Discord + + Made by CircuitRCAY (Circuit#2816) +*/ + +/* Iosevka, codeblock font */ + +@import url("https://cdn.jsdelivr.net/npm/@typopro/web-iosevka@3.7.5/TypoPRO-Iosevka.css"); + +code { + font-family: "TypoPRO Iosevka Term", monospace; + font-weight: 400; +} + +/* Iosevka on Powercord */ +pre > code { + font-family: "TypoPRO Iosevka Term", monospace; + font-weight: 400; +} + + +/** End Iosevka */ + +.theme-dark { + --background-primary: #282828; + --background-secondary: #3c3836; + --background-tertiary: #504945; + --background-accent: #32302f; + --text-normal: #ebdbb2; + --text-spotify: #fbf1c7; + --text-muted: #bdae93; + --text-link: #458588; + --background-floating: #3c3836; + --header-primary: #ebdbb2; + --header-secondary: #bdae93; + --header-spotify: #b8bb26; + --interactive-normal: #ebdbb2; + --interactive-hover: #bdae93; + --interactive-active: #fbf1c7; + +} + +.theme-light { + --background-primary: #fbf1c7; + --background-secondary: #ebdbb2; + --background-tertiary: #d5c4a1; + --background-accent: #f2e5bc; + --text-normal: #3c3836; + --text-muted: #504945; + --text-link: #076678; + --header-primary: #3c3836; + --header-secondary: #504945; + --header-spotify: #98971a; + --background-floating: #ebdbb2; + --interactive-normal: #665c54; + --interactive-muted: #928374; + --interactive-hover: #504945; + --interactive-active: #7c6f64; +} + +::-webkit-scrollbar, +::-webkit-scrollbar-track, +::-webkit-scrollbar-track-piece { + background: transparent !important; + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + box-shadow: none !important; + border: none !important; + width:5px !important; +} +::-webkit-scrollbar-thumb { + background: var(--background-accent) !important; + width:5px !important; + border:none !important; + border-radius: 0px !important; +} + +/* Guild menu (discord forces light theme) */ +div[class*="wrapper"][class*="fixClipping"]{ + background-color: var(--background-accent); +} + +/* New Messages Bar */ +div[class*="newMessagesBar"] { + background-color: var(--background-accent); +} + +/* Hide the action bar nametag and status */ +section > div[class*="container"] > [class*='nameTag-'] { + display:none; +} + +/* Center buttons in the panels container */ +div[class*="sidebar"] > [class*='panels-'] [class*='container-']{ + display:flex; + flex-flow:row wrap; + justify-content: center; +} + +/* Credit to craftxbox */ + +/* Mentions (channel, user) */ +span[class*="mention"][class*="interactive"] { + color: var(--text-link); +} + +/* Mentions (role) */ +span[class*="mention"] { + color: var(--text-link); +} + +div[class^="scrollableContainer"] { + background-color: var(--background-secondary); +} + +div[class^="name"] > span { + color: var(--text-normal); +} + +h1, h2, h3 { + color: var(--text-normal); +} + +h3[class^="title"] { + color: var(--text-normal); +} + +div[class^="panels"] > div[class^="container"] { + background-color: var(--background-secondary); +} + +div[class^="wrapper"] > div[class^="container"] { + background-color: var(--background-tertiary); +} + +section[class^="panels"] > div[class^="container"] > div[class^="nameTag"] > * { + color: var(--text-normal); +} + +section[class^="panels"] > div[class^="container"] { + background-color: var(--background-secondary); +} + +div.userSettingsAccount-2eMFVR > div > div { + background-color: var(--background-primary); +} + +* > div[class^="contents"] { + color: var(--text-normal) +} + +div[class^="size14"] { + color: var(--text-normal); +} + +div[class^="topic"] { + color: var(--text-muted); +} + +div[class^="friendsTable"] { + background-color: var(--background-primary); +} + +[class^="input"] { + background-color: var(--background-primary); +} + +div[class^="uploadModal"] > div[class^="inner"], div[class^="inner"] > div[class^="uploadModal"], div[class^="uploadModal"] > div[class^="footer"] { + background-color: var(--background-primary); +} + +[class^="usernameContainer"]:not([style]){ + color: var(--text-normal) +} + +div[class^="username"] { + background-color: inherit; +} + +span[class^="wrapperHover"][role="button"] { + color: var(--text-link) +} + +[class^="autocompleteInner"] { + background-color: var(--background-secondary) +} + + +a[class^="wrapper"] { + color: var(--text-normal) +} + +[class^="tooltipRight"] { + color: var(--text-normal) +} + +div[role="dialog"] { + color: var(--background-primary) +} + +div[class*="activityPanel"] { + background-color: var(--background-secondary) +} + +div[class^="text"] { + color: var(--text-normal) +} + +div[class^="side"] > div[class^="item"] { + background-color: var(--background-secondary) +} + +[class^="userInfoViewing"] { + background-color: var(--background-secondary); +} + +[class*="lookFilled"][class*="colorBrand"] { + background-color: var(--text-link); +} + +div[class*="tooltip"] { + background-color: var(--background-secondary); +} +div[class*="contextMenu"] { + background-color: var(--background-secondary); +} + +div[class*="header"] { + background-color: var(--background-secondary) +} + +div[class*="details"] { + color: var(--text-normal); +} + +div[class*="headerTextNormal"] { + background-color: var(--background-secondary); +} + +span { + color: var(--text-normal) +} + +span[class*="headerName"] { + color: var(--text-normal) +} + +div[class*="userPopout"] > div[class*="footer"] { + background-color: var(--background-primary) +} + +div[class*="scrollerWrap"][class*="body"] > div[class*="scroller"] { + background-color: var(--background-primary) +} + +[class*="footer"] > [class*="quickMessage"] { + background-color: var(--background-primary) +} + +div[class^="topSectionPlaying"] > header[class^="header"] { + background-color: var(--background-secondary); +} + +header[class^="title"] { + color: var(--text-normal) +} + +div[class^="tabBody"] { + background-color: var(--background-primary); +} + +div[class^="topSectionNormal"] > header > div[class^="headerInfo"]{ + background-color: inherit; +} + +div[class^="topSectionSpotify"] > header > div[class^="headerInfo"]{ + background-color: inherit; +} + +div[class^="topSectionSpotify"] { + background-color: var(--header-spotify); +} + +div[class*="nameNormal"][class*="ellipsis"][class*="textRow"][class*="weightSemiBold"] > a { + color: var(--text-normal) +} + +div[class*="detailsWrap"][class*="textRow"] > span > a { + color: var(--text-normal); +} + +div[class*="state"][class*="ellipsis"][class*="textRow"] > span > a { + color: var(--text-normal); +} + +div[class^="headerTextNormal"][class*="headerText"][class*="small"][class*="marginBottom8"][class*="weightBold"] { + color: var(--text-normal); + background-color: var(--background-secondary); + background: transparent !important; +} + +div[class*="details"][class*="ellipsis"][class*="textRow"] { + color: var(--text-normal) +} + +div[class*="timestamp"] { + color: var(--text-normal) +} + +section[class^="section"] { + background-color: var(--background-secondary); +} + +div[class*="container"] > div[class*="contentWrapper"] { + background-color: var(--background-secondary); +} + +div[class*="selectorSelected"][class*="selector"] { + background-color: var(--background-tertiary); +} + +div[class*="selectorSelected"][class*="selector"] > * > div[class*="marginLeft"] { + color: var(--text-normal) +} + +div[class*="selectorSelected"][class*="selector"] > * > div[class*="colorStandard"] { + color: var(--text-muted); +} + +[class*="selector"] > * > div[class*="marginLeft"] { + color: var(--text-normal) +} + +[class*="selector"] > * > div[class*="colorStandard"] { + color: var(--text-muted); +} + + + +div[class*="infoBar"] { + background-color: var(--background-tertiary); +} + +div[class*="body"][class*="scrollerBase"][class*="thin"] { + background-color: var(--background-primary); +} + +/* Fix text colour when Spotify is playing */ +div[class*="topSectionSpotify"] > header > div[class*="headerInfo"] > div[class*="nameTag"] > * { + color: var(--text-spotify); +} + +/* Fix button colours */ +div[class*="topSectionSpotify"] > header > button[class*="actionButton"] { + background-color: var(--background-tertiary); +} + +div[class*="topSectionNormal"] > header > button[class*="actionButton"] { + background-color: var(--background-secondary); +} + +div[class*="topSectionPlaying"] > header > button[class*="actionButton"] { + background-color: var(--background-tertiary); +} + +/** Search **/ +div[class*="resultsGroup"] { + background-color: var(--background-secondary); +} + +div[class*="resultsGroup"] > div[class*="option"]::after { + background-color: var(--background-secondary); + background: transparent +} + +div[class*="resultsGroup"] > div[class*="option"]:hover { + background-color: var(--background-primary); +} + +/** Channel topic **/ +div[class*="layerContainer"] > div[class*="layer"] > div[class*="focusLock"] > div[class*="modal"] > div[class*="content"] { + background-color: var(--background-secondary); + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; +} + +/** Playing statuses */ +* > div[class*="activityText"] { + color: var(--text-muted); +} + +* > svg { + color: var(--interactive-hover) +} + +/** Header fixes */ +* > span[class*="activityName"] { + color: var(--text-normal) +} + +div[class*="activityUserPopout"] > h3[class*="headerTextNormal"][class*="headerText"] { + color: var(--text-normal); +} + +/** Role names */ +div[class*="roleName"] { + color: var(--text-normal); +} + +/** That discord icon on the top left */ +.wrapper-1BJsBx.selected-bZ3Lue .childWrapper-anI2G9 { + background-color: var(--background-primary); +} +.wrapper-1BJsBx .childWrapper-anI2G9 { + background-color: var(--background-primary); +} + +/** and the pill beside it */ +div[class*="pill"] > span[class*="item"] { + background-color: var(--background-primary) +} + +/** Deleted Messages */ +div[class*="focusLock"] > div[class*="root"] > div[class*="content"] { + background-color: var(--background-secondary); +} +div[class*="focusLock"] > div[class*="root"] > div[class*="content"] > div[class*="message"] { + background-color: var(--background-tertiary); +} + +div[class*="focusLock"] > div[class*="root"] > div[class*="flex"] { + background-color: var(--background-secondary); +} + +/** Bot Tags */ +span[class*="botTag"] { + background-color: var(--text-link) +} + +/** Discover Guilds */ +div[class*="circleIconButton"][class*="selected"] { + background-color: var(--background-secondary); +} + +div[class*="dragRegion"] { + background-color: var(--background-secondary); +} + +div[class*="container"] > div[class*="base"] > div[class*="content"] div[class*="scroller"][class*="auto"] { + background-color: var(--background-primary); +} + +section[class*="guildListSection"] > div[class*="guildList"] > div[class*="loaded"] > div[class*="card"] { + background-color: var(--background-tertiary); +} + +div[class*="searchBox"] { + border-color: var(--background-secondary); +} + +div[class*="searchBox"] > div[class*="inputWrapper"] { + background-color: var(--background-tertiary); + +} + +div[class*="headerContentWrapper"] { + background-color: var(--background-primary); +} + +div[class*="headerContentWrapper"] > div[class*="headerContent"] { + background-color: var(--background-primary); +} + +div[class*="container"] > div[class*="search"] { + border-color: var(--background-primary); + color: var(--background-primary); +} + +div[class*="headerContentWrapper"] > div[class*="headerContent"] > * { + color: var(--text-normal) +} + +div[class*="categoryItem"][class*="selected"] > div[class*="itemInner"] { + background-color: var(--text-link); +} +div[class*="categoryItem"][class*="selected"] > div[class*="itemInner"] > * { + color: var(--text-normal) +} + +/* Support new integrations menu */ +div[class*="flex"][class*="justifyStart"] > button[class*="copyButton"] { + background-color: var(--background-tertiary); +} + +div[class*="flex"][class*="vertical"][class*="directionColumn"] > div[class*="body"] { + background-color: var(--background-secondary); +} + +/* Fix Invites */ +div[class*="customScroller"] > div[class*="listContent"] > div[class*="headerSection"] { + background-color: var(--background-primary); +} + +div[class*="flexChild"] > h4[class*="title"] { + color: var(--text-muted); +} +div[class*="flexChild"] > div[class*="text"] { + color: var(--text-muted); +} + +/* Fix Nickname Menu */ +div[class*="root"] > form > div[class*="content"] { + background-color: var(--background-secondary); +} + +div[class*="root"] > form > div[class*="content"] > div[class*="input"] > h5[class*="colorStandard"] { + background-color: var(--background-secondary); + margin: 0; + color: var(--text-normal); +} + + +div[class*="root"] > form > div[class*="content"] > div[class*="input"] > div[class*="inputWrapper"] > input { + background-color: var(--background-tertiary); +} + +div[class*="flex"][class*="horizontalReverse"][class*="directionRowReverse"] { + background-color: var(--background-floating); +} + +/* Fix "Listen Along" */ + +/* Modal */ +div[class*="modal"] > div[class*="inner"] > div[class*="modal"] > div[class*="content"] { + background-color: var(--background-secondary); +} + +div[class*="modal"] > div[class*="inner"] > div[class*="modal"] > div[class*="content"] > div[class*="invite"] { + background-color: var(--background-primary); +} + +div[class*="header"][class*="inFront"] { + background-color: var(--background-primary); + color: var(--text-muted); +} + +div[class*="flex"][class*="directionRow"][class*="alignEnd"] > div > button { + background-color: var(--text-link); +} + +div[class*="content"][class*="thin"] > div[class*="textArea"] > div[class*="scrollableContainer"] { + background-color: var(--background-primary); +} + +/* Embed */ +div[id*="messages"] > div[class*="container"] > div[class*="invite"] { + background-color: var(--background-secondary); +} + +div[id*="messages"] > div[class*="container"] > div[class*="invite"] > * > * > div[class*="header"] { + background-color: var(--background-secondary); +} + +div[class*="details"] > a[class*="anchor"] { + color: var(--text-normal); +} + +div[class*="state"] { + color: var(--text-normal); +} + +div[class*="state"] > span > a[class*="anchor"] { + color: var(--text-normal); +} + +/* Tooltip fix */ +div[class*="tooltipContent"] { + color: var(--text-normal); +} + +/* MessageBox fix */ +div[class*="markdown"] { + color: var(--text-normal); +} + +/* Spotify in Powercord */ +div[class="powercord-spotify"] { + background-color: var(--background-secondary); +} + +div[class="powercord-spotify hover"] { + background-color: var(--background-secondary); +} + +/** Change Progress Bar colour */ +div[class="powercord-spotify"] > div[class*="spotify-seek"] > div[class*="spotify-seek-bar"] > * { + background-color: var(--header-spotify); +} + +/** Change Progress Bar colour */ +div[class="powercord-spotify hover"] > div[class*="spotify-seek"] > div[class*="spotify-seek-bar"] > * { + background-color: var(--header-spotify); +} + +/* BetterDiscord toasts */ +/* TODO: Fix shadows of toasts */ +div[class="bd-toast"] { + background: var(--background-floating); + color: var(--text-normal); +} +/* Sadly colors of other toasts(toast-info, toast-success, toast-warning, toast-error) can't be overridden */ + +/* Fix a.k.a [nickname] */ +div[class*="nicknames"][class*="overflow"] > div[class*="tooltip"] { + background-color: var(--background-primary); +} + +/* Fix slash commands */ +* > div[class*="categorySection"] > div[class*="wrapper"] { + background-color: var(--background-secondary); +} + +div[class*="itemWrapper"] > div[class*="base"][class*="selectable"][class*="selected"] { + background-color: var(--background-tertiary); +} + +div[class*="usageWrapper"] > div[class*="colorHeaderPrimary"] { + background-color: var(--background-accent); + color: var(--text-muted); +} + +/* Fix emoji picker */ +div[class*="emojiPicker"] > div[class*="inspector"] { + background-color: var(--background-tertiary); +} + +/* Finally fix server info */ +div[class*="container"] > * > * > div[class*="content"] { + background-color: var(--background-secondary); + margin: 0; +} + +div[class*="container"] > * > * > div[class*="flex"][class*="horizontalReverse"] > button { + background-color: var(--background-accent); +} + +div[class*="container"] > * > * > div[class*="flex"][class*="horizontalReverse"] > button { + background-color: var(--background-accent); +} + +div[class*="container"] > * > * > div > div[class*="content"][class*="scrollerBase"] { + background-color: var(--background-secondary); +} + +div[class*="container"] > * > * > div > div[class*="content"][class*="scrollerBase"] > form[class*="inputForm"] > div { + background-color: var(--background-secondary); +} + +/* Fix private channel settings on an empty channel */ +div[class*="contents"] > div[class*="flex"] > div[class*="size16"] { + background-color: var(--background-primary); +} + +div[class*="contents"] > div[class*="flex"] { + background-color: var(--background-primary); +} + +div[class*="members"] > button[class*="role"][class*="button"] > div[class*="contents"] > div[class*="role"] { + background-color: var(--background-secondary); +} + +/* Support new role list */ +div[class*="contentContainer"] > div[class*="scroller"] > div[class*="contentWidth"] > div[class*="header"] { + background-color: var(--background-primary); +} + +div[class*="contentContainer"] > div[class*="scroller"] > div[class*="contentWidth"] > div[class*="header"] > div[class*="tabBar"] > div[class*="item"] { + background-color: var(--background-secondary); +} + +/** Gruvbox (dark) Highlight.js theme. Ported from https://github.com/highlightjs/highlight.js/blob/master/src/styles/gruvbox-dark.css */ +.theme-dark .hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: #282828; +} + +.theme-dark .hljs, +.hljs-subst { + color: #ebdbb2; +} + +/* Gruvbox Red */ +.theme-dark +.hljs-deletion, +.hljs-formula, +.hljs-keyword, +.hljs-link, +.hljs-selector-tag { + color: #fb4934; +} + +/* Gruvbox Blue */ +.theme-dark +.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 */ +.theme-dark +.hljs-builtin-name, +.hljs-doctag, +.hljs-literal, +.hljs-number { + color: #8f3f71; +} + +/* Gruvbox Orange */ +.theme-dark +.hljs-code, +.hljs-meta, +.hljs-regexp, +.hljs-selector-id, +.hljs-template-variable { + color: #fe8019; +} + +/* Gruvbox Green */ +.theme-dark +.hljs-addition, +.hljs-meta-string, +.hljs-section, +.hljs-selector-attr, +.hljs-selector-class, +.hljs-string, +.hljs-symbol { + color: #b8bb26; +} + +/* Gruvbox Aqua */ +.theme-dark +.hljs-attribute, +.hljs-bullet, +.hljs-class, +.hljs-function, +.hljs-function .hljs-keyword, +.hljs-meta-keyword, +.hljs-selector-pseudo, +.hljs-tag { + color: #8ec07c; +} + +/* Gruvbox Gray */ +.theme-dark, +.hljs-comment { + color: #928374; +} + +/* Gruvbox Purple */ +.theme-dark +.hljs-link_label, +.hljs-literal, +.hljs-number { + color: #d3869b; +} + +.theme-dark +.hljs-comment, +.hljs-emphasis { + font-style: italic; +} + +.theme-dark +.hljs-section, +.hljs-strong, +.hljs-tag { + font-weight: bold; +} +