gorb/frontend
4
0
Fork 0
Code Issues 6 Pull requests 1 Projects Releases Packages 1 Wiki Activity Actions

Merge pull request 'feat: Add theming' (#8) from theming into main
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
Details

Browse source 
Reviewed-on: #8
Reviewed-by: SauceyRed <saucey@saucey.red>
This commit is contained in:
JustTemmie 2025-07-03 17:14:06 +00:00
commit fea11660c3
13 changed files with 104 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

30
app.vue
View file

@ -9,21 +9,29 @@
const banner = useState("banner", () => false); const banner = useState("banner", () => false);
let current_theme = "dark" // default theme
const saved_theme = localStorage.getItem("selectedTheme");
if (saved_theme) {
current_theme = saved_theme;
}
useHead({
link: [
{
rel: "stylesheet",
href: `/themes/${current_theme}.css`
}
]
})
</script> </script>
<style> <style>
:root {
--background-color: rgb(30, 30, 30);
--main-text-color: rgb(190, 190, 190);
--outline-border: 1px solid rgb(150, 150, 150);
}
html, html,
body { body {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box; box-sizing: border-box;
color: rgb(190, 190, 190); color: var(--text-color);
background-color: rgb(30, 30, 30); background-color: var(--chat-background-color);
margin: 0; margin: 0;
} }
@ -40,15 +48,15 @@ a {
} }
.bottom-border { .bottom-border {
border-bottom: 1px solid rgb(70, 70, 70); border-bottom: 1px solid var(--padding-color);
} }
.left-border { .left-border {
border-left: 1px solid rgb(70, 70, 70); border-left: 1px solid var(--padding-color);
} }
.right-border { .right-border {
border-right: 1px solid rgb(70, 70, 70); border-right: 1px solid var(--padding-color);
} }
.rounded-corners { .rounded-corners {

19
components/Button.vue
View file

@ -18,8 +18,8 @@ const props = defineProps<{
.button { .button {
cursor: pointer; cursor: pointer;
background-color: #b35719; background-color: var(--primary-color);
color: #ffffff; color: var(--text-color);
padding: 0.7dvh 1.2dvw; padding: 0.7dvh 1.2dvw;
font-size: 1.1em; font-size: 1.1em;
@ -30,15 +30,22 @@ const props = defineProps<{
display: inline-block; display: inline-block;
} }
.button:hover {
background-color: var(--primary-highlighted-color);
}
.scary-button { .scary-button {
background-color: red; background-color: red;
} }
.scary-button:hover {
background-color: red;
}
.neutral-button { .neutral-button {
background-color: grey; background-color: var(--accent-color);
}
.neutral-button:hover {
background-color: var(--accent-highlighted-color);
} }
.button:hover {
background-color: #934410;
}
</style> </style>

2
components/Channel.vue
View file

@ -36,6 +36,6 @@ const isCurrentChannel = props.uuid == props.currentUuid;
} }
.current-channel { .current-channel {
background-color: rgb(70, 70, 70); background-color: var(--sidebar-highlighted-background-color);
} }
</style> </style>

4
components/Message.vue
View file

@ -88,7 +88,7 @@ onMounted(async () => {
} }
.message:hover { .message:hover {
background-color: rgb(20, 20, 20); background-color: var(--chat-highlighted-background-color);
} }
.normal-message { .normal-message {
@ -142,7 +142,7 @@ onMounted(async () => {
.message-date { .message-date {
font-size: .7em; font-size: .7em;
color: rgb(150, 150, 150); color: var(--secondary-text-color);
cursor: default; cursor: default;
} }

10
components/MessageArea.vue
View file

@ -251,7 +251,7 @@ router.beforeEach((to, from, next) => {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-content: center; align-content: center;
border: 1px solid rgb(70, 70, 70); border: 1px solid var(--padding-color);
padding-bottom: 1dvh; padding-bottom: 1dvh;
padding-top: 1dvh; padding-top: 1dvh;
margin-bottom: 1dvh; margin-bottom: 1dvh;
@ -266,7 +266,7 @@ router.beforeEach((to, from, next) => {
#message-box-input { #message-box-input {
width: 80%; width: 80%;
background-color: rgb(50, 50, 50); background-color: var(--sidebar-background-color);
border: none; border: none;
color: inherit; color: inherit;
padding-left: 1dvw; padding-left: 1dvw;
@ -284,11 +284,13 @@ router.beforeEach((to, from, next) => {
#submit-button { #submit-button {
background-color: inherit; background-color: inherit;
border: none; border: none;
color: rgb(200, 200, 200); color: var(--primary-color);
transition: color 100ms;
font-size: 1.5em; font-size: 1.5em;
} }
#submit-button:hover { #submit-button:hover {
color: rgb(255, 255, 255); color: var(--primary-highlighted-color);
cursor: pointer;
} }
</style> </style>

4
components/Settings/UserSettings/Account.vue
View file

@ -145,8 +145,8 @@ const deleteAccount = async () => {
font-size: 1em; font-size: 1em;
border-radius: 8px; border-radius: 8px;
border: none; border: none;
color: white; color: var(--text-color);
background-color: #54361b; background-color: var(--accent-color);
} }
.profile-popup { .profile-popup {

10
components/UserPopup.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div id="profile-popup"> <div id="profile-popup">
<img v-if="props.user.avatar" id="avatar" :src="props.user.avatar" alt="profile avatar"> <img v-if="props.user.avatar" id="avatar" :src="props.user.avatar" alt="profile avatar">
<div id="cover-colour"></div> <div id="cover-color"></div>
<div id="main-body"> <div id="main-body">
<p id="display-name"> <p id="display-name">
<strong>{{ props.user.display_name }}</strong> <strong>{{ props.user.display_name }}</strong>
@ -38,17 +38,17 @@ const props = defineProps<{
flex-direction: column; flex-direction: column;
} }
#cover-colour { #cover-color {
border-radius: 12px 12px 0 0; border-radius: 12px 12px 0 0;
min-height: 60px; min-height: 60px;
background-color: #442505; background-color: var(--primary-color);
} }
#main-body { #main-body {
border-radius: 0 0 12px 12px; border-radius: 0 0 12px 12px;
padding: 12px; padding: 12px;
min-height: 280px; min-height: 280px;
background-color: #4b3018; background-color: var(--accent-color);
overflow-wrap: break-word; overflow-wrap: break-word;
hyphens: manual; hyphens: manual;
} }
@ -75,7 +75,7 @@ const props = defineProps<{
} }
#about-me { #about-me {
background-color: #34200f; background-color: var(--secondary-color);
border-radius: 12px; border-radius: 12px;
margin-top: 32px; margin-top: 32px;

10
layouts/client.vue
View file

@ -55,12 +55,13 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
align-items: center; align-items: center;
background-color: var(--topbar-background-color);
padding-left: 5dvw; padding-left: 5dvw;
padding-right: 5dvw; padding-right: 5dvw;
} }
#client-root>div:nth-child(-n+4) { #client-root>div:nth-child(-n+4) {
border-bottom: 1px solid rgb(70, 70, 70); border-bottom: 1px solid var(--padding-color);
} }
#__nuxt { #__nuxt {
@ -93,18 +94,19 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
gap: 2dvh; gap: 2dvh;
padding-left: .5dvw; padding-left: .5dvw;
padding-right: .5dvw; padding-right: .5dvw;
border-right: 1px solid rgb(70, 70, 70); border-right: 1px solid var(--padding-color);
background-color: var(--sidebar-background-color);
padding-top: 1.5dvh; padding-top: 1.5dvh;
} }
#middle-left-column { #middle-left-column {
padding-left: 1dvw; padding-left: 1dvw;
padding-right: 1dvw; padding-right: 1dvw;
border-right: 1px solid rgb(70, 70, 70); border-right: 1px solid var(--padding-color);
} }
#home-button { #home-button {
border-bottom: 1px solid rgb(70, 70, 70); border-bottom: 1px solid var(--padding-color);
padding-bottom: 1dvh; padding-bottom: 1dvh;
} }

5
pages/servers/[serverId]/channels/[channelId].vue
View file

@ -85,14 +85,15 @@ function toggleInvitePopup(e: Event) {
#middle-left-column { #middle-left-column {
padding-left: 1dvw; padding-left: 1dvw;
padding-right: 1dvw; padding-right: 1dvw;
border-right: 1px solid rgb(70, 70, 70); border-right: 1px solid var(--padding-color);
background-color: var(--sidebar-background-color);
} }
#members-container { #members-container {
padding-top: 1dvh; padding-top: 1dvh;
padding-left: 1dvw; padding-left: 1dvw;
padding-right: 1dvw; padding-right: 1dvw;
border-left: 1px solid rgb(70, 70, 70); border-left: 1px solid var(--padding-color);
} }
#members-list { #members-list {

10
pages/settings.vue
View file

@ -98,8 +98,8 @@ function selectCategory(page: Page) {
#sidebar { #sidebar {
min-width: 25dvw; min-width: 25dvw;
max-width: 25dvw; max-width: 25dvw;
background-color: #2f3136; background-color: var(--sidebar-background-color);
color: white; color: var(--text-color);
padding: 1dvh 1dvw; padding: 1dvh 1dvw;
margin-left: auto; margin-left: auto;
@ -127,11 +127,11 @@ function selectCategory(page: Page) {
} }
.sidebar-focus { .sidebar-focus {
background-color: #383B41; background-color: var(--sidebar-highlighted-background-color);
} }
#sidebar li:hover { #sidebar li:hover {
background-color: #40444b; background-color: var(--sidebar-highlighted-background-color);
} }
#sub-page { #sub-page {
@ -149,7 +149,7 @@ function selectCategory(page: Page) {
height: 0.2dvh; height: 0.2dvh;
display: block; display: block;
margin: 0.8dvh 1dvw; margin: 0.8dvh 1dvw;
background-color: #2c2e32; background-color: var(--spacing-color);
} }
/* applies to child pages too */ /* applies to child pages too */

19
public/themes/dark.css Normal file
View file

@ -0,0 +1,19 @@
:root {
--text-color: #f7eee8;
--secondary-text-color: #f0e8e4;
--chat-background-color: #1f1e1d;
--chat-highlighted-background-color: #2f2b28;
--sidebar-background-color: #2e2a27;
--sidebar-highlighted-background-color: #36322b;
--topbar-background-color: #2a2723;
--padding-color: #484848;
--primary-color: #f4741f;
--primary-highlighted-color: #f68a3f;
--secondary-color: #7c4018;
--secondary-highlighted-color: #8f5b2c;
--accent-color: #b35719;
--accent-highlighted-color: #c76a2e;
}

4
public/themes/default-themes.json Normal file
View file

@ -0,0 +1,4 @@
[
"dark.css",
"light.css"
]

19
public/themes/light.css Normal file
View file

@ -0,0 +1,19 @@
:root {
--text-color: #170f08;
--secondary-text-color: #2f2b28;
--chat-background-color: #f0ebe8;
--chat-highlighted-background-color: #e8e4e0;
--sidebar-background-color: #dbd8d4;
--sidebar-highlighted-background-color: #d4d0ca;
--topbar-background-color: #dfdbd6;
--padding-color: #484848;
--primary-color: #df5f0b;
--primary-highlighted-color: #ef6812;
--secondary-color: #e8ac84;
--secondary-highlighted-color: #f8b68a;
--accent-color: #e68b4e;
--accent-highlighted-color: #f69254;
}