Feat: darkmode

packages/desktop/App.svelte

@@ -99,11 +99,10 @@
     html,
     body {
         @apply bg-white;
+        @apply select-none;
         &.scheme-dark {
-            @apply bg-blue-900;
+            @apply bg-gray-900;
         }
-
-        @apply select-none;
     }
 </style>
 

packages/shared/components/AccountTile.svelte

@@ -23,7 +23,7 @@
 
 <button
     on:click={onClick}
-    class="size-{size} group rounded-2xl bg-gray-200 dark:bg-gray-900 hover:bg-{color}-500 flex flex-col justify-between text-left p-{size === 's' ? '3' : '6'}">
+    class="size-{size} group rounded-2xl bg-gray-200 dark:bg-gray-900 hover:bg-{color}-500 font-400 flex flex-col justify-between text-left p-{size === 's' ? '3' : '6'}">
     <Text smaller={size === 's'} overrideColor classes="mb-2 text-gray-800 dark:text-white group-hover:text-white">{name}</Text>
     <div class="flex flex-row justify-between w-full flex-{size === 'l' ? 'nowrap' : 'wrap'}">
         <Text

packages/shared/components/Button.svelte

@@ -2,7 +2,7 @@
     import { Icon } from 'shared/components'
     import { bindEvents } from 'shared/lib/utils'
     import { onMount } from 'svelte'
-
+    import { appSettings } from 'shared/lib/appSettings'
     export let events = {}
     export let onClick = () => ''
     export let secondary = false
@@ -19,6 +19,7 @@
     export let autofocus = false
 
     let buttonElement
+    let darkModeEnabled = $appSettings.darkMode
 
     onMount(() => {
         if (autofocus) {
@@ -34,19 +35,34 @@
         span {
             @apply text-white;
         }
-        &:not(.with-icon):hover,
-        &:not(.with-icon):focus {
-            @apply bg-blue-600;
-        }
-        &:not(.with-icon):active {
-            @apply bg-blue-700;
-        }
-
-        &:disabled {
-            @apply pointer-events-none;
-            @apply bg-gray-200;
-            span {
-                @apply text-gray-500;
+        &:not(.with-icon) {
+            &:hover,
+            &:focus {
+                @apply bg-blue-600;
+            }
+            &:active {
+                @apply bg-blue-700;
+            }
+            &.warning {
+                @apply bg-red-500;
+                min-width: 100px;
+                span {
+                    @apply text-white;
+                }
+                &:hover {
+                    @apply bg-red-600;
+                }
+                &:active,
+                &:focus {
+                    @apply bg-red-700;
+                }
+                &:disabled {
+                    @apply pointer-events-none;
+                    @apply bg-gray-200;
+                    span {
+                        @apply text-gray-500;
+                    }
+                }
             }
         }
         &.secondary {
@@ -57,12 +73,12 @@
             span {
                 @apply text-blue-500;
             }
-            &:hover,
-            &:focus {
+            &:hover {
                 @apply bg-blue-50;
                 @apply border-blue-200;
             }
-            &:active {
+            &:active,
+            &:focus {
                 @apply bg-blue-100;
                 @apply border-blue-400;
                 @apply text-blue-600;
@@ -75,29 +91,36 @@
                     @apply text-gray-500;
                 }
             }
-        }
-        &.warning {
-            @apply bg-red-500;
-            min-width: 100px;
-            span {
-                @apply text-white;
-            }
-            &:hover {
-                @apply bg-red-600;
-            }
-            &:active {
-                @apply bg-red-700;
-            }
-
-            &:disabled {
-                @apply pointer-events-none;
-                @apply bg-gray-200;
+            &.darkmode {
+                @apply bg-gray-700;
+                @apply border-gray-700;
+                @apply bg-opacity-30;
+                @apply border-opacity-30;
                 span {
-                    @apply text-gray-500;
+                    @apply text-white;
+                }
+                &:hover {
+                    @apply bg-opacity-50;
+                    @apply border-opacity-50;
+                }
+                &:focus,
+                &:active {
+                    @apply bg-opacity-80;
+                    @apply border-opacity-50;
+                }
+                &:disabled {
+                    @apply bg-gray-700;
+                    @apply border-gray-700;
+                    @apply bg-opacity-10;
+                    @apply border-opacity-10;
+                    span {
+                        @apply text-gray-700;
+                    }
                 }
             }
         }
         &.with-icon {
+            min-width: 200px;
             @apply border;
             @apply border-solid;
             @apply border-gray-300;
@@ -116,23 +139,49 @@
             :global(svg.right) {
                 @apply text-gray-500;
             }
+            &:hover,
+            &:focus {
+                @apply border-gray-500;
+            }
+            &:disabled {
+                :global(svg) {
+                    @apply text-gray-500;
+                }
+            }
             &.active {
                 @apply bg-blue-500;
                 span,
                 :global(svg) {
                     @apply text-white;
                 }
             }
-
-            &:hover,
-            &:focus {
-                @apply border-gray-500;
-            }
-
-            &:disabled {
-                :global(svg) {
+            &.darkmode {
+                @apply border-gray-700;
+                @apply bg-transparent;
+                span {
+                    @apply text-white;
+                }
+                :global(svg, svg.right) {
                     @apply text-gray-500;
                 }
+                &:hover,
+                &:focus {
+                    @apply bg-gray-700;
+                    @apply bg-opacity-20;
+                }
+                &:disabled {
+                    :global(svg) {
+                        @apply text-gray-500;
+                    }
+                }
+                &.active {
+                    @apply bg-gray-700;
+                    @apply border-gray-700;
+                    span,
+                    :global(svg) {
+                        @apply text-white;
+                    }
+                }
             }
         }
         &.small {
@@ -166,6 +215,22 @@
             &:active {
                 @apply text-gray-800;
             }
+            &.darkmode {
+                &,
+                &:hover,
+                &:active {
+                    @apply text-white;
+                }
+                &:hover {
+                    @apply bg-blue-900;
+                }
+                &:active {
+                    @apply bg-gray-900;
+                }
+                :global(svg) {
+                    @apply text-blue-500;
+                }
+            }
         }
 
         &:disabled {
@@ -174,6 +239,13 @@
             span {
                 @apply text-gray-500;
             }
+            &.darkmode {
+                @apply bg-gray-700;
+                @apply bg-opacity-10;
+                span {
+                    @apply text-gray-700;
+                }
+            }
         }
     }
 </style>
@@ -188,6 +260,7 @@
         class:secondary
         class:active
         class:with-icon={icon}
+        class:darkmode={darkModeEnabled}
         {disabled}
         bind:this={buttonElement}>
         <Icon classes="mb-1" {icon} />
@@ -208,6 +281,7 @@
         class:with-icon={icon}
         class:iconReverse
         class:active
+        class:darkmode={darkModeEnabled}
         {disabled}
         bind:this={buttonElement}>
         {#if icon}
@@ -216,7 +290,7 @@
                     <div class="relative flex flex-row justify-between">
                         <div class="relative flex items-center flex-1">
                             <div class="absolute left-0 flex items-center">
-                                <Icon width={16} height={16} classes="mr-4" {icon} />
+                                <Icon width="16" height="16" classes="mr-4" {icon} />
                             </div>
                             <span class="font-bold text-12 leading-140"><slot /></span>
                         </div>
@@ -226,7 +300,7 @@
                         <div class="relative flex items-center flex-1">
                             <span class="font-bold text-12 leading-140"><slot /></span>
                             <div class="absolute right-0 flex items-center">
-                                <Icon width={16} height={16} classes="ml-4" {icon} />
+                                <Icon width="16" height="16" classes="ml-4" {icon} />
                             </div>
                         </div>
                     </div>
@@ -235,7 +309,7 @@
                 <div class="relative flex flex-row justify-between">
                     <div class="relative flex items-center flex-1">
                         <div class="absolute left-0 flex items-center">
-                            <Icon width={16} height={16} classes="mr-4" {icon} />
+                            <Icon classes="mr-4" {icon} />
                         </div>
                         <span class="font-bold text-12 leading-140"><slot /></span>
                     </div>

packages/shared/components/DashboardPane.svelte

@@ -4,7 +4,7 @@
 
 <style>
     div {
-        box-shadow: 0px 1px 2px 2px rgba(154, 173, 206, 0.1);
+        box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
     }
 </style>
 

packages/shared/components/HR.svelte

@@ -0,0 +1,6 @@
+<script lang="typescript">
+    export let classes: string = ''
+    export let overrideColor: boolean = false
+</script>
+
+<hr class="border-t border-solid {!overrideColor && 'border-gray-200 dark:border-gray-700'} {classes}" />

packages/shared/components/Link.svelte

@@ -9,14 +9,8 @@
     export let ghost = false
 </script>
 
-<style type="text/scss">
-    a {
-        color: var(--text-highlighted-color); // TODO: tailwindify
-    }
-</style>
-
 <a
-    class="text-12 leading-140 cursor-pointer"
+    class="text-12 leading-140 cursor-pointer text-blue-500"
     data-label="link"
     use:bindEvents={events}
     {href}

packages/shared/components/Logo.svelte

@@ -1,15 +1,28 @@
 <script lang="typescript">
+    import { appSettings } from 'shared/lib/appSettings'
+
     export let logo = undefined
     export let width = undefined
     export let height = undefined
     export let classes = ''
 
-    $: selected = logos[logo]
+    let darkModeEnabled = $appSettings.darkMode
+
+    $: selected = logos[logo]?.[darkModeEnabled ? 'darkmode' : 'default']
 
     const logos = {
-        'logo-firefly-full': 'firefly_logo_full.svg',
-        'logo-firefly': 'firefly_logo.svg',
-        'profile-picture': 'profile_picture.svg', // TODO: remove
+        'logo-firefly-full': {
+            default: 'firefly_logo_full.svg',
+            darkmode: 'firefly_logo_full_darkmode.svg',
+        },
+        'logo-firefly': {
+            default: 'firefly_logo.svg',
+            darkmode: 'firefly_logo.svg',
+        },
+        'logo-stronghold': {
+            default: 'stronghold.svg',
+            darkmode: 'stronghold_darkmode.svg',
+        }
     }
 </script>