diff --git a/flavors/spicetify-text.theme.css b/flavors/spicetify-text.theme.css new file mode 100644 index 0000000..f46fe09 --- /dev/null +++ b/flavors/spicetify-text.theme.css @@ -0,0 +1,73 @@ +/** + * @name system24 (spicetify text theme) + * @description A tui-style discord theme. Settings configured to match the spicetify text theme. + * @author refact0r + * @version 1.0.0 + * @invite nz87hXyvcy + * @website https://github.com/refact0r/system24 + * @source https://github.com/refact0r/system24/blob/master/flavors/text.theme.css + * @authorId 508863359777505290 + * @authorLink https://www.refact0r.dev +*/ + +@import url('https://refact0r.github.io/system24/system24.css'); + +/* customize things here */ +:root { + --font: 'DM Mono'; + letter-spacing: 0; + font-weight: 400; + --label-font-weight: 400; + + --corner-text: 'system24'; + + --pad: 16px; + --txt-pad: 10px; + + --bg-0: hsl(0, 0%, 7%); + --bg-1: hsl(0, 0%, 10%); + --bg-2: hsl(0, 0%, 13%); + --bg-3: hsl(0, 0%, 16%); + + --hover: hsla(0, 0%, 40%, 0.1); + --active: hsla(0, 0%, 40%, 0.2); + --selected: var(--active); + + --txt-dark: var(--bg-0); + --txt-link: var(--cyan); + --txt-0: hsl(0, 0%, 100%); + --txt-1: hsl(0, 0%, 70%); + --txt-2: hsl(0, 0%, 50%); + --txt-3: hsl(0, 0%, 30%); + + --acc-0: #1ed760; + --acc-1: #1db954; + --acc-2: var(--purple-2); + + --border-width: 1px; + --border-color: #535353; + --border-hover-color: #1ed760; + --border-transition: 0.2s ease; + + --online-dot: var(--green); + --dnd-dot: var(--pink); + --idle-dot: var(--yellow); + --streaming-dot: var(--purple); + + --mention-txt: var(--acc-0); + --mention-bg: color-mix(in oklch, var(--acc-0), transparent 90%); + --mention-overlay: color-mix(in oklch, var(--acc-0), transparent 90%); + --mention-hover-overlay: color-mix(in oklch, var(--acc-0), transparent 95%); + --reply-overlay: var(--active); + --reply-hover-overlay: var(--hover); + + --pink: oklch(73% 0.12 0); + --pink-1: oklch(63% 0.12 0); + --pink-2: oklch(53% 0.12 0); + --purple: oklch(73% 0.12 300); + --purple-1: oklch(63% 0.12 300); + --purple-2: oklch(53% 0.12 300); + --cyan: oklch(73% 0.12 200); + --yellow: oklch(78% 0.12 80); + --green: oklch(73% 0.12 160); +} diff --git a/system24.css b/system24.css index 3791bda..28e82d5 100644 --- a/system24.css +++ b/system24.css @@ -27,20 +27,13 @@ --txt-2: oklch(60% 0 0); --txt-3: oklch(40% 0 0); - --mention-txt: var(--purple); - --mention-bg: color-mix(in oklch, var(--purple), transparent 90%); - --mention-overlay: color-mix(in oklch, var(--purple), transparent 90%); - --mention-hover-overlay: color-mix( - in oklch, - var(--purple), - transparent 95% - ); - --reply-overlay: var(--active); - --reply-hover-overlay: var(--hover); + --acc-0: var(--purple); + --acc-1: var(--purple-1); + --acc-2: var(--purple-2); --border-width: 2px; --border-color: var(--bg-3); - --border-hover-color: var(--purple); + --border-hover-color: var(--acc-0); --border-transition: 0.2s ease; --online-dot: var(--green); @@ -48,6 +41,13 @@ --idle-dot: var(--yellow); --streaming-dot: var(--purple); + --mention-txt: var(--acc-0); + --mention-bg: color-mix(in oklch, var(--acc-0), transparent 90%); + --mention-overlay: color-mix(in oklch, var(--acc-0), transparent 90%); + --mention-hover-overlay: color-mix(in oklch, var(--acc-0), transparent 95%); + --reply-overlay: var(--active); + --reply-hover-overlay: var(--hover); + --pink: oklch(73% 0.12 0); --pink-1: oklch(63% 0.12 0); --pink-2: oklch(53% 0.12 0); @@ -93,6 +93,11 @@ [class*=embedFull_] /* embed default color */ { border-color: var(--bg-2); } +/* fix text */ +[class^='newChannel_'], +[class^='newBadge_'] { + color: var(--bg-0); +} /* fix white-500 */ [class*=lookFilled_][class*=colorPrimary_] /* neutral buttons (like in account settings) */, #app-mount [class*=lookLink_][class*=colorPrimary_] /* link buttons (like in account settings) */, @@ -125,7 +130,7 @@ } /* accents */ svg[style='color: rgb(88, 101, 242);'] /* folder icons */ { - color: var(--purple) !important; + color: var(--acc-0) !important; } [class^='folderIconWrapper_'][style='background-color: rgba(88, 101, 242, 0.4);'] { background: var(--bg-1) !important; @@ -140,7 +145,7 @@ svg[class^=slider_] > rect[fill='white'] /* settings checkbuttons slider */ { background: var(--txt-1); } [class^=message_][class*=mentioned_]::before /* mention message left bar */ { - background: var(--purple); + background: var(--acc-0); } /* add spacing */ @@ -911,10 +916,10 @@ html.theme-light { --elevation-low: none; - --brand-500: var(--purple); /* unread bar, accent buttons, spotify */ - --brand-530: var(--purple); /* hover highlight in context menu */ - --brand-560: var(--purple-1); /* accent button hover */ - --brand-600: var(--purple-2); /* accent button active */ + --brand-500: var(--acc-0); /* unread bar, accent buttons, spotify */ + --brand-530: var(--acc-0); /* hover highlight in context menu */ + --brand-560: var(--acc-1); /* accent button hover */ + --brand-600: var(--acc-2); /* accent button active */ --primary-500: var(--bg-2); /* neutral button background */ --primary-800: var(--bg-1); /* bot command panel suggestion argument */ @@ -929,5 +934,5 @@ html.theme-light { --green-360: var(--green); /* vc icon on server */ - --twitch: var(--purple-1); + --twitch: var(--acc-1); } diff --git a/system24.theme.css b/system24.theme.css index 5d84c86..20b6b80 100644 --- a/system24.theme.css +++ b/system24.theme.css @@ -40,16 +40,13 @@ --txt-2: oklch(60% 0 0); --txt-3: oklch(40% 0 0); - --mention-txt: var(--purple); - --mention-bg: color-mix(in srgb, var(--purple), transparent 90%); - --mention-overlay: color-mix(in srgb, var(--purple), transparent 90%); - --mention-hover-overlay: color-mix(in srgb, var(--purple), transparent 95%); - --reply-overlay: var(--active); - --reply-hover-overlay: var(--hover); + --acc-0: var(--purple); + --acc-1: var(--purple-1); + --acc-2: var(--purple-2); --border-width: 2px; --border-color: var(--bg-3); - --border-hover-color: var(--purple); + --border-hover-color: var(--acc-0); --border-transition: 0.2s ease; --online-dot: var(--green); @@ -57,6 +54,13 @@ --idle-dot: var(--yellow); --streaming-dot: var(--purple); + --mention-txt: var(--acc-0); + --mention-bg: color-mix(in oklch, var(--acc-0), transparent 90%); + --mention-overlay: color-mix(in oklch, var(--acc-0), transparent 90%); + --mention-hover-overlay: color-mix(in oklch, var(--acc-0), transparent 95%); + --reply-overlay: var(--active); + --reply-hover-overlay: var(--hover); + --pink: oklch(73% 0.12 0); --pink-1: oklch(63% 0.12 0); --pink-2: oklch(53% 0.12 0);