From 432671d11c71f980276c4666f23760e712159ddc Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Mon, 17 Mar 2025 11:09:04 +0100
Subject: [PATCH] Add color scheme detection
---
index.html | 2 +-
src/App.vue | 11 ++++++++++-
src/components/sidebar/AppSidebar.vue | 10 +++++-----
src/components/ui/sidebar/index.ts | 2 +-
src/components/utilcards/AuthorityCard.vue | 2 +-
.../utilcards/ConfirmAccountUpdateCard.vue | 2 +-
.../utilcards/ConfirmCreateAccountCard.vue | 2 +-
src/components/utilcards/MemoEncryptCard.vue | 2 +-
.../utilcards/SignTransactionCard.vue | 2 +-
src/style.css | 17 +++++++++--------
10 files changed, 31 insertions(+), 21 deletions(-)
diff --git a/index.html b/index.html
index f875fc8..435899f 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hive Bridge</title>
</head>
- <body class="dark">
+ <body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
diff --git a/src/App.vue b/src/App.vue
index 39b0508..8e91d24 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -17,6 +17,15 @@ onMounted(() => {
hasUser.value = settingsStore.settings.account !== undefined;
if (hasUser.value)
void walletStore.createWalletFor(settingsStore.settings);
+
+ if (window.matchMedia) {
+ const media = window.matchMedia('(prefers-color-scheme: dark)');
+ if (media.matches)
+ document.documentElement.classList.add('dark');
+ media.addEventListener('change', event => {
+ document.documentElement.classList[event.matches ? 'add' : 'remove']('dark');
+ });
+ }
});
const complete = (data: { account: string; wallet: UsedWallet }) => {
hasUser.value = true;
@@ -35,7 +44,7 @@ const complete = (data: { account: string; wallet: UsedWallet }) => {
<SidebarProvider>
<AppSidebar/>
<!-- <AppHeader/> -->
- <main class="w-full">
+ <main class="w-full bg-background">
<ToggleSidebar class="m-3" />
<RouterView />
</main>
diff --git a/src/components/sidebar/AppSidebar.vue b/src/components/sidebar/AppSidebar.vue
index 377339a..7fb651a 100644
--- a/src/components/sidebar/AppSidebar.vue
+++ b/src/components/sidebar/AppSidebar.vue
@@ -49,7 +49,7 @@ const items = [
<template>
<Sidebar>
<SidebarHeader class="pb-0">
- <div class="flex items-center rounded-lg p-2 mt-1 mx-1 bg-black/40 border" v-if="settingsStore.isLoaded && hasUser">
+ <div class="flex items-center rounded-lg p-2 mt-1 mx-1 bg-background/40 border" v-if="settingsStore.isLoaded && hasUser">
<Avatar class="w-8 h-8 mr-2">
<AvatarImage src="https://github.com/unovue.png" alt="@unovue" />
<AvatarFallback>{{ settingsStore.settings.account?.slice(0, 2) }}</AvatarFallback>
@@ -59,14 +59,14 @@ const items = [
</SidebarHeader>
<SidebarContent>
<SidebarGroup>
- <SidebarGroupLabel>Hive Bridge</SidebarGroupLabel>
+ <SidebarGroupLabel class="text-foreground/60">Hive Bridge</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
<SidebarMenuItem v-for="item in items" :key="item.title">
<SidebarMenuButton asChild>
<RouterLink @click="isMobile && toggleSidebar()" :to="item.url">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path style="fill: hsl(var(--foreground))" :d="item.icon"/></svg>
- <span>{{item.title}}</span>
+ <span class="text-foreground/80">{{item.title}}</span>
</RouterLink>
</SidebarMenuButton>
</SidebarMenuItem>
@@ -75,7 +75,7 @@ const items = [
</SidebarGroup>
</SidebarContent>
<SidebarFooter>
- <Button class="bg-black/40" variant="outline" v-if="settingsStore.isLoaded && hasUser" @click="logout">
+ <Button class="bg-background/40" variant="outline" v-if="settingsStore.isLoaded && hasUser" @click="logout">
<img v-if="hasUser" :src="getWalletIcon(settingsStore.settings.wallet!)" class="h-6 w-6" />
<span class="font-bold">Disconnect</span>
</Button>
@@ -86,6 +86,6 @@ const items = [
<style>
[data-sidebar="sidebar"] {
backdrop-filter: blur(20px);
- background-color: rgba(0, 0, 0, 0.4);
+ background-color: hsla(var(--background) / 70%);
}
</style>
diff --git a/src/components/ui/sidebar/index.ts b/src/components/ui/sidebar/index.ts
index e238e44..5bd36ee 100644
--- a/src/components/ui/sidebar/index.ts
+++ b/src/components/ui/sidebar/index.ts
@@ -40,7 +40,7 @@ export const sidebarMenuButtonVariants = cva(
{
variants: {
variant: {
- default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+ default: 'hover:bg-sidebar-accent/50 hover:text-sidebar-accent-foreground',
outline:
'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
},
diff --git a/src/components/utilcards/AuthorityCard.vue b/src/components/utilcards/AuthorityCard.vue
index 0004f92..c7d6f1b 100644
--- a/src/components/utilcards/AuthorityCard.vue
+++ b/src/components/utilcards/AuthorityCard.vue
@@ -40,7 +40,7 @@ onMounted(() => {
</script>
<template>
- <Card class="w-full max-w-[600px] bg-black/40 backdrop-blur-sm">
+ <Card class="w-full max-w-[600px] bg-foreground/10 backdrop-blur-sm">
<CardHeader>
<CardTitle class="inline-flex items-center justify-between">
<span>Authority info</span>
diff --git a/src/components/utilcards/ConfirmAccountUpdateCard.vue b/src/components/utilcards/ConfirmAccountUpdateCard.vue
index be8c5d8..9eb9573 100644
--- a/src/components/utilcards/ConfirmAccountUpdateCard.vue
+++ b/src/components/utilcards/ConfirmAccountUpdateCard.vue
@@ -65,7 +65,7 @@ const updateAuthority = async() => {
</script>
<template>
- <Card class="w-full max-w-[600px] bg-black/40 backdrop-blur-sm">
+ <Card class="w-full max-w-[600px] bg-foreground/10 backdrop-blur-sm">
<CardHeader>
<CardTitle class="inline-flex items-center justify-between">
<span>Process Authority Update</span>
diff --git a/src/components/utilcards/ConfirmCreateAccountCard.vue b/src/components/utilcards/ConfirmCreateAccountCard.vue
index 9003599..ba0859f 100644
--- a/src/components/utilcards/ConfirmCreateAccountCard.vue
+++ b/src/components/utilcards/ConfirmCreateAccountCard.vue
@@ -117,7 +117,7 @@ const createAccount = async() => {
</script>
<template>
- <Card class="w-full max-w-[600px] bg-black/40 backdrop-blur-sm">
+ <Card class="w-full max-w-[600px] bg-foreground/10 backdrop-blur-sm">
<CardHeader>
<CardTitle class="inline-flex items-center justify-between">
<span>Process Account Creation</span>
diff --git a/src/components/utilcards/MemoEncryptCard.vue b/src/components/utilcards/MemoEncryptCard.vue
index 3bf1f90..5e7912d 100644
--- a/src/components/utilcards/MemoEncryptCard.vue
+++ b/src/components/utilcards/MemoEncryptCard.vue
@@ -65,7 +65,7 @@ const encryptOrDecrypt = async () => {
</script>
<template>
- <Card class="w-full max-w-[600px] bg-black/40 backdrop-blur-sm">
+ <Card class="w-full max-w-[600px] bg-foreground/10 backdrop-blur-sm">
<CardHeader>
<CardTitle class="inline-flex items-center justify-between">
<span>Memo encryption</span>
diff --git a/src/components/utilcards/SignTransactionCard.vue b/src/components/utilcards/SignTransactionCard.vue
index 5e80639..d96fa68 100644
--- a/src/components/utilcards/SignTransactionCard.vue
+++ b/src/components/utilcards/SignTransactionCard.vue
@@ -84,7 +84,7 @@ onMounted(() => {
</script>
<template>
- <Card class="w-full max-w-[600px] bg-black/40 backdrop-blur-sm">
+ <Card class="w-full max-w-[600px] bg-foreground/10 backdrop-blur-sm">
<CardHeader>
<CardTitle class="inline-flex items-center justify-between">
<span>Transaction signing</span>
diff --git a/src/style.css b/src/style.css
index ad24e92..156e7f0 100644
--- a/src/style.css
+++ b/src/style.css
@@ -21,15 +21,14 @@
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 240 5.9% 90%;
- --input: 240 5.9% 90%;
+ --input: 240 5.9% 60%;
--ring: 240 10% 3.9%;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
- --radius: 0.5rem
- ;
+ --radius: 0.5rem;
--sidebar-background: 0 0% 98%;
--sidebar-foreground: 240 5.3% 26.1%;
--sidebar-primary: 240 5.9% 10%;
@@ -37,7 +36,9 @@
--sidebar-accent: 240 4.8% 95.9%;
--sidebar-accent-foreground: 240 5.9% 10%;
--sidebar-border: 220 13% 91%;
- --sidebar-ring: 217.2 91.2% 59.8%}
+ --sidebar-ring: 217.2 91.2% 59.8%
+ }
+
.dark {
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;
@@ -56,14 +57,13 @@
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 240 3.7% 15.9%;
- --input: 240 3.7% 15.9%;
+ --input: 240 3.7% 45.9%;
--ring: 240 4.9% 83.9%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
- --chart-5: 340 75% 55%
- ;
+ --chart-5: 340 75% 55%;
--sidebar-background: 240 5.9% 10%;
--sidebar-foreground: 240 4.8% 95.9%;
--sidebar-primary: 224.3 76.3% 48%;
@@ -71,7 +71,8 @@
--sidebar-accent: 240 3.7% 15.9%;
--sidebar-accent-foreground: 240 4.8% 95.9%;
--sidebar-border: 240 3.7% 15.9%;
- --sidebar-ring: 217.2 91.2% 59.8%}
+ --sidebar-ring: 217.2 91.2% 59.8%
+ }
}
@layer base {
* {
--
GitLab