diff --git a/app/src/app.html b/app/src/app.html index 2dd8b2ea0d..7f54db459c 100644 --- a/app/src/app.html +++ b/app/src/app.html @@ -1,5 +1,5 @@ - + diff --git a/app/src/lib/components/connect/connect.svelte b/app/src/lib/components/connect/connect.svelte index 1e2aaa72ab..5d5a210690 100644 --- a/app/src/lib/components/connect/connect.svelte +++ b/app/src/lib/components/connect/connect.svelte @@ -13,6 +13,9 @@ import { cosmosStore, cosmosWalletsInformation } from "$lib/wallet/cosmos/index. import { Switch } from "$lib/components/ui/switch" import { Label } from "$lib/components/ui/label" import { showUnsupported } from "$lib/stores/user.ts" +import Sun from "virtual:icons/lucide/sun" +import Moon from "virtual:icons/lucide/moon" +import { toggleMode } from "mode-watcher" let buttonText: string @@ -93,11 +96,21 @@ $: if ($navigating) sheetOpen = false onConnectClick={cosmosStore.connect} onDisconnectClick={cosmosStore.disconnect} /> -
- - +
+
+ + +
+
- diff --git a/app/src/lib/components/connect/connection.svelte b/app/src/lib/components/connect/connection.svelte index b15c82505a..eae586ba64 100644 --- a/app/src/lib/components/connect/connection.svelte +++ b/app/src/lib/components/connect/connection.svelte @@ -105,7 +105,7 @@ let metamaskAlertDialogOpen = false "capitalize justify-start h-12 text-lg ring-0 focus:ring-0 ring-transparent", connectStatus === "connected" && connectedWalletId === id && "border-border", (connectStatus === "disconnected" || connectStatus == undefined) && - "opacity-75 hover:opacity-100", + "opacity-75 hover:opacity-100 dark:hover:text-black", hoverState === "hover" && connectedWalletId === id && "hover:text-destructive border-destructive hover:bg-transparent", diff --git a/app/src/lib/components/footer.svelte b/app/src/lib/components/footer.svelte index e22ba5879c..91397e6a6e 100644 --- a/app/src/lib/components/footer.svelte +++ b/app/src/lib/components/footer.svelte @@ -41,19 +41,19 @@ let buttons = [ 'flex flex-col text-xs gap-px h-16 w-full', isCurrentPage(button.href) ? 'bg-foreground text-primary-foreground hover:bg-foreground hover:text-primary-foreground' - : 'bg-transparent', + : 'bg-transparent dark:hover:text-black', )} >
{button.displayName}
{/each}
@@ -774,7 +774,7 @@ const resetInput = () => {
{/if} - +
Amount { bind:value={amount} class={cn( !balanceCoversAmount && amount ? 'border-red-500' : '', - 'focus:ring-0 focus-visible:ring-0', + 'focus:ring-0 focus-visible:ring-0 disabled:bg-black/30', )} disabled={!$asset} maxlength={64} @@ -806,7 +806,7 @@ const resetInput = () => { autocomplete="off" autocorrect="off" bind:value={address} - class="disabled:opacity-100 disabled:bg-black/20" + class="disabled:bg-black/30" disabled={inputState === 'locked'} id="address" on:input={handleInput} diff --git a/app/src/styles/crt.css b/app/src/styles/crt.css index 43dddf095c..bbe5bf8006 100644 --- a/app/src/styles/crt.css +++ b/app/src/styles/crt.css @@ -218,6 +218,24 @@ } } +body * { + text-shadow: 0 0 5px #00000050; +} + +/*!* Light theme *!*/ +/*@media (prefers-color-scheme: light) {*/ +/* body * {*/ +/* text-shadow: 0 0 5px #00000050;*/ +/* }*/ +/*}*/ + +/*!* Dark theme *!*/ +/*@media (prefers-color-scheme: dark) {*/ +/* body * {*/ +/* text-shadow: 0 0 5px #ffffff50;*/ +/* }*/ +/*}*/ + /* .jpg { */ /* background: url("https://pompompom.mehdi.cc/crt-art-for-scanlines.jpg") no-repeat; */ /* background-size: cover; */ diff --git a/app/src/styles/tailwind.css b/app/src/styles/tailwind.css index c053661350..43e38d1aed 100644 --- a/app/src/styles/tailwind.css +++ b/app/src/styles/tailwind.css @@ -87,11 +87,11 @@ --radius: 0.5rem; } - /* .dark { - --background: 240 10% 3.9%; + .dark { + --background: 240 3.7% 15%; --foreground: 0 0% 98%; - --muted: 240 3.7% 15.9%; + --muted: 240 3.7% 10%; --muted-foreground: 240 5% 64.9%; --popover: 240 10% 3.9%; @@ -100,7 +100,7 @@ --card: 240 10% 3.9%; --card-foreground: 0 0% 98%; - --border: 240 3.7% 15.9%; + --border: 240 3.7% 30%; --input: 240 3.7% 15.9%; --primary: 0 0% 98%; @@ -109,14 +109,14 @@ --secondary: 240 3.7% 18.9%; --secondary-foreground: 0 0% 98%; - --accent: 240 3.7% 15.9%; + --accent: 191 96% 81%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 85.7% 97.3%; - --ring: 240 3.7% 15.9%; - } */ + --ring: 240 3.7% 30%; + } } @layer base { * { diff --git a/app/tailwind.config.ts b/app/tailwind.config.ts index ddf327c5c3..70bcabbb58 100644 --- a/app/tailwind.config.ts +++ b/app/tailwind.config.ts @@ -22,8 +22,8 @@ export default ({ matchVariant: true, optimizeUniversalDefaults: true }, - safelist: ["light"], - darkMode: ["variant", "&:not(.light *)"], + safelist: ["dark", "light"], + darkMode: "class", theme: { screens: _ => fluidScreens, fontSize: _ => fluidFontSize,