fix(ui): some dark mode fixes (#714)

* Make login screen respect system dark mode preference

* Make loading/connection interruption reflect dark mode preference

client/src/javascript/ui/components/Panel.tsx

@@ -1,23 +1,23 @@
 import classnames from 'classnames';
 import {FC, ReactNode} from 'react';
+import ConfigStore from '@client/stores/ConfigStore';
 
 interface PanelProps {
   children: ReactNode;
-  theme?: 'light' | 'dark';
   spacing?: 'small' | 'medium' | 'large';
   transparent?: boolean;
 }
 
-const Panel: FC<PanelProps> = ({children, theme, spacing, transparent}: PanelProps) => {
+const Panel: FC<PanelProps> = ({children, spacing, transparent}: PanelProps) => {
-  const classes = classnames(`panel panel--${theme}`, `panel--${spacing}`, {
+  const classes = classnames(`panel`, `panel--${spacing}`, {
     'panel--transparent': transparent,
+    inverse: ConfigStore.isPreferDark,
   });
 
   return <div className={classes}>{children}</div>;
 };
 
 Panel.defaultProps = {
-  theme: 'light',
   spacing: 'medium',
   transparent: false,
 };

client/src/sass/components/_app-wrapper.scss

@@ -1,9 +1,10 @@
 @use '../tools/colors';
+@use '../tools/themes';
 
 .application {
   &__loading-overlay {
     align-items: center;
-    background: colors.$light-blue;
+    @include themes.theme('background', 'loading--background');
     display: flex;
     flex-direction: column;
     font-size: 0.8em;

client/src/sass/tools/_themes.scss

@@ -33,6 +33,8 @@ $themes: (
       1px 0 colors.$action--border--hover,
       -1px 0 colors.$action--border--hover,
     ),
+    auth-form--background: colors.$light-blue,
+    loading--background: colors.$light-blue,
     torrent-view--background: #e9eef2,
     torrent-list--background: #fff,
     torrent-list--border: -1px 0 0 0 rgba(colors.$sidebar--background, 0.15),
@@ -86,6 +88,9 @@ $themes: (
       0 0 30px rgba(#1a2f3d, 0.2),
       0 0 0 1px rgba(#1a2f3d, 0.1),
     ),
+    panel--background: colors.$white,
+    panel--border: 1px solid colors.$grey--lighter,
+    panel--foreground: inherit,
     progress-bar--fill: colors.$green,
     progress-bar--fill--checking: #8899a8,
     progress-bar--fill--completed: colors.$blue,
@@ -126,6 +131,8 @@ $themes: (
       0px,
       0px,
     ),
+    auth-form--background: colors.$background,
+    loading--background: colors.$background,
     torrent-view--background: colors-dark.$md-surface-dark-e08,
     torrent-list--background: colors-dark.$md-surface-dark,
     torrent-list--border: -1px 0 0 0 rgba(colors.$sidebar--background, 0.15),
@@ -179,6 +186,9 @@ $themes: (
       0 0 30px rgba(#1a2f3d, 0.2),
       0 0 0 1px rgba(#1a2f3d, 0.1),
     ),
+    panel--background: colors.$another-grey,
+    panel--border: 1px solid colors.$dark-grey--light,
+    panel--foreground: color.adjust(#6c7e92, $lightness: 6%),
     progress-bar--fill: colors.$green,
     progress-bar--fill--checking: #8899a8,
     progress-bar--fill--completed: colors.$blue,

client/src/sass/ui/components/panel.scss

@@ -1,4 +1,5 @@
 @use '../../tools/colors';
+@use '../../tools/themes';
 
 @use '../config/border-radius.scss';
 @use '../config/spacing.scss';
@@ -10,9 +11,11 @@ $panel--spacing--horizontal--large: spacing.$spacing--xxx-large;
 $panel--spacing--vertical--large: spacing.$spacing--xx-large;
 
 .panel {
-  border: 1px solid colors.$grey--lighter;
+  @include themes.theme('background', 'panel--background');
+  @include themes.theme('border', 'panel--border');
   border-radius: border-radius.$border-radius--medium;
   box-shadow: panel--box-shadow(colors.$grey--lighter);
+  @include themes.theme('color', 'panel--foreground');
   overflow: hidden;
 
   &--medium {
@@ -105,8 +108,4 @@ $panel--spacing--vertical--large: spacing.$spacing--xx-large;
       border-top: 1px solid colors.$grey--soft;
     }
   }
-
-  &--light {
-    background: #fff;
-  }
 }

client/src/sass/views/_login.scss

@@ -1,4 +1,5 @@
 @use '../tools/colors';
+@use '../tools/themes';
 @use '../tools/variables';
 
 $authentication--form--border: #d4dbe0;
@@ -14,7 +15,7 @@ $authentication--label--foreground: #3a5567;
 .application {
   &__view {
     &--auth-form {
-      background: colors.$light-blue;
+      @include themes.theme('background', 'auth-form--background');
     }
   }
 }