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

feat: add more colours to dark theme
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
Details

Browse source
This commit is contained in:
Twig 2025-08-05 03:51:20 +02:00
parent 5a8ce74d04
commit cb61754c0a
Signed by: twig
SSH key fingerprint: SHA256:nBO+OwpTkd8LYhe38PIqdxmDvkIg9Vw2EbrRZM97dkU
5 changed files with 13 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

2
components/Guild/GuildDropdown.vue
View file

@ -27,7 +27,7 @@ const props = defineProps<{ options: DropdownOption[] }>();
} }
.dropdown-option { .dropdown-option {
border: .09rem solid rgb(70, 70, 70); border: .09rem solid var(--padding-color);
} }
.dropdown-button { .dropdown-button {

6
components/Message.vue
View file

@ -270,11 +270,11 @@ function getDayDifference(date1: Date, date2: Date) {
*/ */
.mentioned { .mentioned {
background-color: rgba(0, 255, 166, 0.123); background-color: var(--chat-important-background-color);
} }
.mentioned:hover { .mentioned:hover {
background-color: rgba(90, 255, 200, 0.233); background-color: var(--chat-important-hightlighted-background-color);
} }
.message-reply-svg { .message-reply-svg {
@ -299,7 +299,7 @@ function getDayDifference(date1: Date, date2: Date) {
<style> <style>
.replying-to { .replying-to {
background-color: var(--primary-highlighted-color); background-color: var(--chat-featured-message-color);
} }
</style> </style>

4
components/UserInterface/ContextMenu.vue
View file

@ -50,7 +50,7 @@ function runCallback(item: ContextMenuItem) {
height: 2rem; height: 2rem;
width: 100%; width: 100%;
color: var(--text-color); color: var(--text-color);
background-color: var(--sidebar-highlighted-background-color); background-color: var(--popup-background-color);
border: none; border: none;
text-align: left; text-align: left;
padding-left: 1rem; padding-left: 1rem;
@ -58,7 +58,7 @@ function runCallback(item: ContextMenuItem) {
} }
.context-menu-item:hover { .context-menu-item:hover {
background-color: rgb(50, 50, 50); background-color: var(--popup-highlighted-background-color);
} }
.context-menu-item-danger { .context-menu-item-danger {

2
components/UserInterface/MessageReply.vue
View file

@ -58,7 +58,7 @@ function scrollToReply(e: MouseEvent) {
console.log("scrolling into view"); console.log("scrolling into view");
reply.scrollIntoView({ behavior: "smooth", block: "center" }); reply.scrollIntoView({ behavior: "smooth", block: "center" });
reply.style.transition = "background-color .3s"; reply.style.transition = "background-color .3s";
reply.style.backgroundColor = "var(--primary-highlighted-color)"; reply.style.backgroundColor = "var(--chat-featured-message-color)";
setTimeout(() => { setTimeout(() => {
reply.style.backgroundColor = ""; reply.style.backgroundColor = "";
}, 1000); }, 1000);

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

@ -12,6 +12,12 @@ complementaryColor = white
--chat-background-color: #1f1e1d; --chat-background-color: #1f1e1d;
--chat-highlighted-background-color: #2f2b28; --chat-highlighted-background-color: #2f2b28;
--chat-important-background-color: #ffc44f2f;
--chat-important-hightlighted-background-color: #ffa45f4a;
--chat-featured-message-color: #4f2f1f58;
--popup-background-color: #2f1f1f;
--popup-highlighted-background-color: #3f2f2f;
--sidebar-background-color: #2e2a27; --sidebar-background-color: #2e2a27;
--sidebar-highlighted-background-color: #36322b; --sidebar-highlighted-background-color: #36322b;
--topbar-background-color: #2a2723; --topbar-background-color: #2a2723;