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

refactor: use HSL colours over hex in dark theme
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
Details
ci/woodpecker/pr/build-and-publish Pipeline was successful
Details

Browse source
This commit is contained in:
Temmie 2025-08-17 02:33:17 +02:00
commit e3b6995249
Signed by: temmie
SSH key fingerprint: SHA256:nBO+OwpTkd8LYhe38PIqdxmDvkIg9Vw2EbrRZM97dkU
12 changed files with 46 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

1
app/components/Guild/GuildSidebar.vue
View file

@ -56,7 +56,6 @@ function toggleGuildSettings(e: Event) {
position: relative;
border-bottom: 1px solid var(--padding-color);
background-color: var(--topbar-background-color);
}
#guild-name {

2
app/components/Me/AddFriend.vue
View file

@ -41,7 +41,7 @@ async function sendRequest() {
padding: .3em .3em;
border-radius: 1em;
border: 1px solid var(--accent-color);
border: 1px solid var(--secondary-color);
}
#add-friend-search-input {

2
app/components/Me/FriendsList.vue
View file

@ -43,7 +43,7 @@ const props = defineProps<{
width: 100%;
border-radius: 1em;
border: 1px solid var(--accent-color);
border: 1px solid var(--secondary-color);
box-sizing: border-box;

4
app/components/Modal/ProfilePopup.vue
View file

@ -157,8 +157,8 @@ function buttonEditProfile() {
width: 6em;
height: 6em;
background-color: var(--accent-color);
border: .15em solid var(--accent-color);
background-color: var(--secondary-color);
border: .15em solid var(--secondary-color);
}
#profile-sub-header {

2
app/components/Settings/AppSettings/Appearance.vue
View file

@ -228,7 +228,7 @@ function changeTheme(themeType: StyleLayout, theme: Theme) {
.theme-instance:hover .layout-preview {
border: .1em solid var(--primary-color);
filter: drop-shadow(0 0 .2em var(--secondary-color));
filter: drop-shadow(0 0 .2em var(--accent-color));
transform: translate(3.5em, -4em);
height: 40dvw;

2
app/components/Settings/UserSettings/Account.vue
View file

@ -92,6 +92,6 @@ async function deleteAccount() {
border-radius: 8px;
border: none;
color: var(--text-color);
background-color: var(--accent-color);
background-color: var(--secondary-color);
}
</style>

2
app/components/Settings/UserSettings/Profile.vue
View file

@ -157,7 +157,7 @@ function handleAboutMeKeyUp(event: KeyboardEvent) {
border-radius: 8px;
border: none;
color: var(--text-color);
background-color: var(--accent-color);
background-color: var(--secondary-color);
}
.profile-textarea-input {

6
app/components/User/UserPopup.vue
View file

@ -49,7 +49,7 @@ const props = defineProps<{
border-radius: 0 0 12px 12px;
padding: 12px;
min-height: 280px;
background-color: var(--accent-color);
background-color: var(--secondary-color);
overflow-wrap: break-word;
hyphens: manual;
}
@ -58,7 +58,7 @@ const props = defineProps<{
width: 96px;
height: 96px;
border: 5px solid #4b3018;
background-color: var(--secondary-color);
background-color: var(--accent-color);
border-radius: 100%;
position: absolute;
left: 16px;
@ -78,7 +78,7 @@ const props = defineProps<{
}
#about-me {
background-color: var(--secondary-color);
background-color: var(--accent-color);
border-radius: 12px;
margin-top: 32px;

8
app/components/UserInterface/Button.vue
View file

@ -39,17 +39,17 @@ const props = defineProps<{
}
.scary-button {
background-color: red;
background-color: var(--danger-text-color);
}
.scary-button:hover {
background-color: red;
background-color: var(--danger-text-highlighted-color);
}
.neutral-button {
background-color: var(--accent-color);
background-color: var(--secondary-color);
}
.neutral-button:hover {
background-color: var(--accent-highlighted-color);
background-color: var(--secondary-highlighted-color);
}
.stealth-button {

6
app/components/UserInterface/RadioButtons.vue
View file

@ -98,15 +98,15 @@ function selectButton(button: Element) {
}
.radio-button:hover {
background-color: var(--secondary-highlighted-color);
background-color: var(--accent-highlighted-color);
}
.selected-radio-button {
background-color: var(--accent-color);
background-color: var(--secondary-color);
}
.selected-radio-button:hover {
background-color: var(--accent-highlighted-color);
background-color: var(--secondary-highlighted-color);
}
.radio-button-radio, .selected-radio-button-radio {

2
app/pages/register.vue
View file

@ -72,6 +72,8 @@
</template>
<script lang="ts" setup>
import Button from '~/components/UserInterface/Button.vue';
definePageMeta({
layout: "auth"
});

52
public/themes/style/dark.css
View file

@ -5,31 +5,33 @@ complementaryColor = white
*/
:root {
--text-color: #f7eee8;
--secondary-text-color: #f0e8e4;
--reply-text-color: #969696;
--danger-text-color: #ff0000;
--text-color: hsl(5, 95%, 95%);
--secondary-text-color: hsl(195, 2%, 80%);
--reply-text-color: hsl(0, 0%, 50%);
--danger-text-color: hsl(0, 80%, 55%);
--danger-text-highlighted-color: hsl(0, 100%, 50%);
--chat-background-color: #282624;
--chat-highlighted-background-color: #383430;
--chat-important-background-color: #ffc44f2f;
--chat-important-highlighted-background-color: #ffa45f4a;
--chat-featured-message-color: #4f2f1f58;
--popup-background-color: #2f1f1f;
--popup-highlighted-background-color: #3f2f2f;
--modal-background-color: #28241f;
--chat-background-color: hsl(28, 3%, 14%);
--chat-highlighted-background-color: hsl(28, 6%, 17%);
--chat-important-background-color: hsl(28, 50%, 50%, 0.20);
--chat-important-highlighted-background-color: hsl(28, 75%, 60%, 0.25);
--chat-featured-message-color: hsl(28, 100%, 60%, 0.35);
--popup-background-color: hsl(20, 3%, 14%);
--popup-highlighted-background-color: hsl(20, 6%, 20%);
--modal-background-color: hsl(28, 5%, 12%);
--sidebar-background-color: #1f1e1d;
--sidebar-highlighted-background-color: #2f2b28;
--topbar-background-color: #1f1e1e;
--chatbox-background-color: #1a1713;
--sidebar-background-color: hsl(30, 5%, 12%);
--sidebar-highlighted-background-color: hsl(30, 12%, 16%);
--topbar-background-color: hsl(30, 2%, 12%);
--chatbox-background-color: hsl(210, 1%, 6%);
--padding-color: hsl(0, 0%, 25%);
--primary-color: hsl(22, 85%, 55%);
--primary-highlighted-color: hsl(22, 100%, 58%);
--secondary-color: hsl(19, 78%, 42%);
--secondary-highlighted-color: hsl(19, 85%, 50%);
--accent-color: hsl(24, 90%, 37%);
--accent-highlighted-color: hsl(24, 100%, 42%);
}
--padding-color: #484848;
--primary-color: #f4741f;
--primary-highlighted-color: #f68a3f;
--secondary-color: #7c4018;
--secondary-highlighted-color: #8f5b2c;
--accent-color: #b35719;
--accent-highlighted-color: #c76a2e;
}