From 24d8905ef2f6ea406f5e7a8732f59add8c012ce2 Mon Sep 17 00:00:00 2001 From: JustTemmie <47639983+JustTemmie@users.noreply.github.com> Date: Sun, 6 Jul 2025 02:20:11 +0200 Subject: [PATCH 1/5] feat: woke theme --- app.vue | 1 + layouts/client.vue | 3 ++- nuxt.config.ts | 2 +- .../[serverId]/channels/[channelId].vue | 1 + pages/settings.vue | 2 ++ public/themes/woke.css | 24 +++++++++++++++++++ public/themes/woke.json | 6 +++++ 7 files changed, 37 insertions(+), 2 deletions(-) create mode 100644 public/themes/woke.css create mode 100644 public/themes/woke.json diff --git a/app.vue b/app.vue index a0a0ed6..7af306b 100644 --- a/app.vue +++ b/app.vue @@ -33,6 +33,7 @@ body { font-family: Arial, Helvetica, sans-serif; box-sizing: border-box; color: var(--text-color); + background: var(--optional-chat-background); background-color: var(--chat-background-color); margin: 0; } diff --git a/layouts/client.vue b/layouts/client.vue index 4a6ac73..a1ee86d 100644 --- a/layouts/client.vue +++ b/layouts/client.vue @@ -40,7 +40,6 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds"); grid-template-columns: 1fr 4fr 18fr 4fr; grid-template-rows: 4dvh auto; text-align: center; - } .hidden { @@ -58,6 +57,7 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds"); display: flex; justify-content: space-evenly; align-items: center; + background: var(--optional-topbar-background); background-color: var(--topbar-background-color); padding-left: 5dvw; padding-right: 5dvw; @@ -98,6 +98,7 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds"); padding-left: .5dvw; padding-right: .5dvw; border-right: 1px solid var(--padding-color); + background: var(--optional-sidebar-background); background-color: var(--sidebar-background-color); padding-top: 1.5dvh; } diff --git a/nuxt.config.ts b/nuxt.config.ts index 489e1b8..380fcae 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -31,7 +31,7 @@ export default defineNuxtConfig({ buildTimeString: new Date().toISOString(), gitHash: process.env.GIT_SHORT_REV || "N/A", defaultThemes: [ - "light", "ash", "dark" + "light", "ash", "dark", "woke" ] } }, diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue index 01e89f0..6bdcc7c 100644 --- a/pages/servers/[serverId]/channels/[channelId].vue +++ b/pages/servers/[serverId]/channels/[channelId].vue @@ -86,6 +86,7 @@ function handleMemberClick(member: GuildMemberResponse) { padding-left: 1dvw; padding-right: 1dvw; border-right: 1px solid var(--padding-color); + background: var(--optional-channel-list-background); background-color: var(--sidebar-background-color); } diff --git a/pages/settings.vue b/pages/settings.vue index 17558b1..c3db3d1 100644 --- a/pages/settings.vue +++ b/pages/settings.vue @@ -124,6 +124,7 @@ onMounted(() => { #sidebar { min-width: 25dvw; max-width: 25dvw; + background: var(--optional-channel-list-background); background-color: var(--sidebar-background-color); color: var(--text-color); padding: 1dvh 1dvw; @@ -157,6 +158,7 @@ onMounted(() => { } .sidebar-focus { + background: var(--optional-topbar-background); background-color: var(--sidebar-highlighted-background-color); } diff --git a/public/themes/woke.css b/public/themes/woke.css new file mode 100644 index 0000000..9f6eb98 --- /dev/null +++ b/public/themes/woke.css @@ -0,0 +1,24 @@ +:root { + --text-color: #161518; + --secondary-text-color: #2b2930; + + --chat-background-color: #808080; + --chat-highlighted-background-color: #808080; + --sidebar-background-color: #808080; + --sidebar-highlighted-background-color: #808080; + --topbar-background-color: #808080; + + --padding-color: #80808000; + + --primary-color: #21b1ff80; + --primary-highlighted-color: #18a0df80; + --secondary-color: #ffd80080; + --secondary-highlighted-color: #dfb80080; + --accent-color: #ff218c80; + --accent-highlighted-color: #df1b6f80; + + --optional-chat-background: linear-gradient(45deg, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #f35b2280, #f9962180, #f5c11e80, #f1eb1b80, #f1eb1b80, #f1eb1b80, #63c72080, #0c9b4980, #21878d80, #3954a580, #61379b80, #93288e80); + --optional-topbar-background: linear-gradient(-12.5deg, cyan, pink, white, pink, cyan); + --optional-sidebar-background: linear-gradient(90deg, #55cdfc, #f7a8b8, #ffffff, #f7a8b8, #55cdfc); + --optional-channel-list-background: linear-gradient(82deg, #d52c00b0, #e29688b0, #ffffffb0, #d27fa4b0, #a20062b0); +} \ No newline at end of file diff --git a/public/themes/woke.json b/public/themes/woke.json new file mode 100644 index 0000000..0fe2071 --- /dev/null +++ b/public/themes/woke.json @@ -0,0 +1,6 @@ +{ + "displayName": "Woke", + "previewGradient": "45deg, #ed2224, #ed2224, #f35b22, #f99621, #f5c11e, #f1eb1b 27%, #f1eb1b, #f1eb1b 33%, #63c720, #0c9b49, #21878d, #3954a5, #61379b, #93288e, #93288e", + "complementaryColor": "white", + "themeUrl": "woke.css" +} \ No newline at end of file From 11209e0618fc1ef53e7637a69a1e6b41913c7fdb Mon Sep 17 00:00:00 2001 From: JustTemmie <47639983+JustTemmie@users.noreply.github.com> Date: Sun, 6 Jul 2025 02:21:23 +0200 Subject: [PATCH 2/5] fix: highlight colours --- public/themes/woke.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/public/themes/woke.css b/public/themes/woke.css index 9f6eb98..e777114 100644 --- a/public/themes/woke.css +++ b/public/themes/woke.css @@ -2,11 +2,11 @@ --text-color: #161518; --secondary-text-color: #2b2930; - --chat-background-color: #808080; - --chat-highlighted-background-color: #808080; - --sidebar-background-color: #808080; - --sidebar-highlighted-background-color: #808080; - --topbar-background-color: #808080; + --chat-background-color: #80808000; + --chat-highlighted-background-color: #ffffff20; + --sidebar-background-color: #80808000; + --sidebar-highlighted-background-color: #ffffff20; + --topbar-background-color: #80808000; --padding-color: #80808000; From 936d036253289e5fe4d38577b4705cf497d4705a Mon Sep 17 00:00:00 2001 From: JustTemmie <47639983+JustTemmie@users.noreply.github.com> Date: Sun, 6 Jul 2025 02:22:24 +0200 Subject: [PATCH 3/5] fix: remove weird gradient --- pages/settings.vue | 1 - 1 file changed, 1 deletion(-) diff --git a/pages/settings.vue b/pages/settings.vue index c3db3d1..1380283 100644 --- a/pages/settings.vue +++ b/pages/settings.vue @@ -158,7 +158,6 @@ onMounted(() => { } .sidebar-focus { - background: var(--optional-topbar-background); background-color: var(--sidebar-highlighted-background-color); } From b1ae35c43bc21c544de315680c2bce5b623aa202 Mon Sep 17 00:00:00 2001 From: JustTemmie <47639983+JustTemmie@users.noreply.github.com> Date: Sun, 6 Jul 2025 02:27:47 +0200 Subject: [PATCH 4/5] fix: make woke theme server list less jaring --- public/themes/woke.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/themes/woke.css b/public/themes/woke.css index e777114..8aeffc8 100644 --- a/public/themes/woke.css +++ b/public/themes/woke.css @@ -19,6 +19,6 @@ --optional-chat-background: linear-gradient(45deg, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #f35b2280, #f9962180, #f5c11e80, #f1eb1b80, #f1eb1b80, #f1eb1b80, #63c72080, #0c9b4980, #21878d80, #3954a580, #61379b80, #93288e80); --optional-topbar-background: linear-gradient(-12.5deg, cyan, pink, white, pink, cyan); - --optional-sidebar-background: linear-gradient(90deg, #55cdfc, #f7a8b8, #ffffff, #f7a8b8, #55cdfc); + --optional-sidebar-background: linear-gradient(90deg, #55cdfcd0, #f7a8b8d0, #ffffffd0, #f7a8b8d0, #55cdfcd0); --optional-channel-list-background: linear-gradient(82deg, #d52c00b0, #e29688b0, #ffffffb0, #d27fa4b0, #a20062b0); } \ No newline at end of file From 5c852a2df7d9e971be0b29baecaf24fb33bec795 Mon Sep 17 00:00:00 2001 From: JustTemmie <47639983+JustTemmie@users.noreply.github.com> Date: Sun, 6 Jul 2025 02:35:21 +0200 Subject: [PATCH 5/5] refactor: change internal woke ID to rainbow-capitalism --- nuxt.config.ts | 2 +- public/themes/{woke.css => rainbow-capitalism.css} | 0 public/themes/{woke.json => rainbow-capitalism.json} | 2 +- 3 files changed, 2 insertions(+), 2 deletions(-) rename public/themes/{woke.css => rainbow-capitalism.css} (100%) rename public/themes/{woke.json => rainbow-capitalism.json} (85%) diff --git a/nuxt.config.ts b/nuxt.config.ts index 380fcae..46890d1 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -31,7 +31,7 @@ export default defineNuxtConfig({ buildTimeString: new Date().toISOString(), gitHash: process.env.GIT_SHORT_REV || "N/A", defaultThemes: [ - "light", "ash", "dark", "woke" + "light", "ash", "dark", "rainbow-capitalism" ] } }, diff --git a/public/themes/woke.css b/public/themes/rainbow-capitalism.css similarity index 100% rename from public/themes/woke.css rename to public/themes/rainbow-capitalism.css diff --git a/public/themes/woke.json b/public/themes/rainbow-capitalism.json similarity index 85% rename from public/themes/woke.json rename to public/themes/rainbow-capitalism.json index 0fe2071..e110ea2 100644 --- a/public/themes/woke.json +++ b/public/themes/rainbow-capitalism.json @@ -2,5 +2,5 @@ "displayName": "Woke", "previewGradient": "45deg, #ed2224, #ed2224, #f35b22, #f99621, #f5c11e, #f1eb1b 27%, #f1eb1b, #f1eb1b 33%, #63c720, #0c9b49, #21878d, #3954a5, #61379b, #93288e, #93288e", "complementaryColor": "white", - "themeUrl": "woke.css" + "themeUrl": "rainbow-capitalism.css" } \ No newline at end of file