Improve dark mode styling

.editorconfig

@@ -4,7 +4,7 @@ root = true
 insert_final_newline = true
 max_line_length = 100
 
-[*.{cs,cshtml,html,xml,js,css,csproj,json,md}]
+[*.{cs,cshtml,html,xml,js,css,csproj,json,md,scss}]
 indent_style = tab
 tab_width = 4
 trim_trailing_whitespace = true

Start/Client/Sass/app.scss

@@ -1,14 +1,22 @@
-/* Validation */
+@import "./spectre/_variables";
+@import "./spectre/mixins/_shadow";
+
+/* Validation */
 .valid.modified:not([type=checkbox]) {
 	outline: 1px solid #26b050;
 }
 
 .invalid {
-    outline: 1px solid red;
+	background: lighten($error-color, 53%);
+	border-color: $error-color;
+
+	&:focus {
+		@include control-shadow($error-color);
+	}
 }
 
 .validation-message {
-    color: red;
+	color: $error-color;
 }
 
 
@@ -119,15 +127,17 @@
 
 		.tab-item a {
 			padding: .6rem .4rem .6rem .4rem;
+			cursor: pointer;
 		}
 	}
 }
 
 #bookmarkGroups {
 	margin-top: 1em;
+	margin-bottom: 3em;
 	margin-left: auto;
 	margin-right: auto;
-    max-width: 1280px;
+	max-width: 1440px;
 	display: grid;
 	grid-column-gap: 1.25rem;
 	grid-row-gap: 1.25rem;
@@ -150,9 +160,12 @@
 
 .bookmarkGroup {
 	width: 100%;
+	border-radius: 0.5em;
+	box-shadow: 0 0.1rem 0.3rem rgba(48, 55, 66, 0.1);
 
 	.card-header {
 		padding-top: 0;
+		border-radius: 0.4em 0.4em 0 0;
 	}
 
 	.card-title {
@@ -161,6 +174,10 @@
 
 	.card-body {
 		padding: 0;
+
+		.empty {
+			border-radius: 0 0 0.4em 0.4em;
+		}
 	}
 
 	.card-body:last-child {
@@ -185,10 +202,3 @@ ul.bookmarks {
 button.addBookmarkButton {
 	width: 100%;
 }
-
-@media screen and (prefers-color-scheme: dark) {
-    body {
-        color: #fafafa;
-        background-color: #111111;
-    }
-}

Start/Client/Sass/dark-mode.scss

@@ -0,0 +1,127 @@
+@import "./spectre/_variables";
+
+$dark-primary-color: $primary-color-light;
+$dark-primary-color-dark: $primary-color;
+$dark-text-color: $light-color;
+$dark-bg-color: $dark-color;
+$dark-bg-color-dark: darken($dark-color, 3%);
+$dark-border-color: darken($dark-color, 10%);
+
+@media screen and (prefers-color-scheme: dark) {
+	// Base
+	body {
+		color: $dark-text-color;
+		background-color: $dark-color;
+	}
+
+	a {
+		color: $primary-color-light;
+
+		&:focus,
+		&:hover,
+		&:active,
+		&.active {
+			color: $primary-color;
+		}
+
+		&:visited {
+			color: $link-color-dark;
+		}
+	}
+
+	// Buttons
+	.btn {
+		color: $dark-primary-color;
+		background-color: $dark-bg-color;
+
+		&:hover {
+			background-color: $dark-bg-color-dark;
+		}
+
+		&.btn-link {
+			color: $dark-primary-color;
+
+			&:hover {
+				color: $dark-primary-color-dark;
+			}
+		}
+	}
+
+	// Off canvas
+	.off-canvas {
+		.off-canvas-sidebar {
+			color: $dark-text-color;
+			background-color: $dark-bg-color-dark;
+			box-shadow: 2px 0 2px rgba(0, 0, 0, 0.1);
+		}
+
+		.off-canvas-overlay {
+			background: rgba($dark-color, .2);
+		}
+	}
+
+
+	// Tabs
+	.tab {
+		border-bottom-color: $dark-border-color;
+
+		.tab-item.active {
+			color: $dark-primary-color;
+		}
+	}
+
+
+	// Cards
+	.card {
+		border-color: $dark-border-color;
+	}
+
+
+	// Empty
+	.empty {
+		color: $dark-text-color;
+		background: $dark-bg-color-dark;
+	}
+
+
+	// Modals
+	.modal-container {
+		color: $dark-text-color;
+		background-color: $dark-bg-color;
+		box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.1);
+
+		.modal-header {
+			color: $dark-text-color;
+		}
+	}
+
+	.modal {
+		&:target, &.active {
+			.modal-overlay {
+				background: rgba($dark-bg-color, .75);
+			}
+		}
+	}
+
+
+	// Forms
+	.form-input {
+		background-color: $dark-bg-color;
+
+		&:focus {
+			border-color: $dark-primary-color;
+		}
+	}
+
+	.form-select {
+		&:not([multiple]):not([size]) {
+			background-color: $dark-bg-color;
+		}
+	}
+
+
+	// Custom
+	#sidebar .accountActions {
+		border-top-color: $dark-border-color;
+	}
+}

Start/Client/Start.Client.csproj

@@ -30,6 +30,11 @@
           <command>sass ${ProjectDir}/Sass/app.scss ${ProjectDir}/wwwroot/css/app.css</command>
           <workingdir>${ProjectDir}</workingdir>
         </Command>
+        <Command>
+          <type>BeforeBuild</type>
+          <command>sass ${ProjectDir}/Sass/dark-mode.scss ${ProjectDir}/wwwroot/css/dark-mode.css</command>
+          <workingdir>${ProjectDir}</workingdir>
+        </Command>
       </CustomCommands>
     </CustomCommands>
   </PropertyGroup>
@@ -56,6 +61,11 @@
           <command>sass --style=compressed ${ProjectDir}/Sass/app.scss ${ProjectDir}/wwwroot/css/app.css</command>
           <workingdir>${ProjectDir}</workingdir>
         </Command>
+        <Command>
+          <type>BeforeBuild</type>
+          <command>sass --style=compressed ${ProjectDir}/Sass/dark-mode.scss ${ProjectDir}/wwwroot/css/dark-mode.css</command>
+          <workingdir>${ProjectDir}</workingdir>
+        </Command>
       </CustomCommands>
     </CustomCommands>
   </PropertyGroup>

Start/Client/wwwroot/index.html

@@ -13,7 +13,7 @@
     <link href="css/spectre/spectre-exp.css" rel="stylesheet" />
     <link href="css/spectre/spectre-icons.css" rel="stylesheet" />
     <link href="css/app.css" rel="stylesheet" />
-    <link href="Start.Client.styles.css" rel="stylesheet" />
+    <link href="css/dark-mode.css" rel="stylesheet" />
 
     <link href="manifest.json" rel="manifest" />
     <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />