more subtle dark mode design

matryer · Mar 8, 2021 · 5e5b33b · 5e5b33b
1 parent 5733e35
commit 5e5b33b
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 15 deletions.
diff --git a/app/frontend/src/InstalledPluginView.svelte b/app/frontend/src/InstalledPluginView.svelte
@@ -210,7 +210,7 @@
 		{/if}
 	</div>
 	{#if installedPlugin && installedPlugin.vars && installedPlugin.enabled}
-		<div class='shadow-lg'>
+		<div class='shadow-lg dark:shadow-none'>
 			<Variables 
 				on:change={onValuesChanged}
 				variables={installedPlugin.vars} 

diff --git a/app/frontend/src/elements/Breadcrumbs.svelte b/app/frontend/src/elements/Breadcrumbs.svelte
@@ -23,7 +23,13 @@
     @media (prefers-color-scheme: dark) {
         .breadcrumbs {
             background: rgb(55,65,81);
-            background: linear-gradient(90deg, rgba(55,65,81,0.5) 0%, rgba(55,65,81,0) 100%);
+            background: linear-gradient(90deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%);
+        }
+        input:focus, select:focus {
+            outline: rgba(0,0,0,0.5) auto 1px;
+            outline-color: rgba(0,0,0,0.5);
+            outline-style: auto;
+            outline-width: 2px;
         }
     }
 </style>

diff --git a/app/frontend/src/elements/Button.svelte b/app/frontend/src/elements/Button.svelte
@@ -2,8 +2,8 @@
 	export let style = 'default'
 
 	const classes = {
-		'default': 'text-sm rounded shadow-sm px-4 border bg-gray-100 active:bg-gray-300 dark:text-gray-400 dark:bg-gray-700 border-gray-300 dark:border-gray-600 dark:bg-opacity-50 hover:bg-opacity-75',
-		'primary': 'bg-blue-900 active:bg-blue-800 text-sm text-white rounded shadow-sm px-4 border border-blue-900 dark:bg-opacity-50',
+		'default': 'text-sm rounded shadow-sm dark:shadow-none px-4 border bg-gray-100 active:bg-gray-300 dark:text-gray-400 dark:bg-gray-900 border-gray-300 dark:border-gray-600 dark:bg-opacity-50 hover:bg-opacity-75',
+		'primary': 'bg-blue-900 active:bg-blue-800 text-sm text-white rounded shadow-sm dark:shadow-none px-4 border border-blue-900 dark:bg-black dark:border-black dark:bg-opacity-50 hover:bg-opacity-75',
 	}
 
 	$: cssClass = classes[style]

diff --git a/app/frontend/src/elements/PluginCollection.svelte b/app/frontend/src/elements/PluginCollection.svelte
@@ -51,7 +51,7 @@
 	<div class='flex flex-wrap p-3'>
 		{#each plugins as plugin}
 			<div
-				class='flex flex-col bg-white dark:bg-gray-700 bg-opacity-50 m-3 mt-0 mb-6 w-80 rounded shadow-lg'
+				class='flex flex-col bg-white dark:bg-black bg-opacity-25 m-3 mt-0 mb-6 w-80 rounded shadow-lg dark:shadow-none'
 			>
 				<div class='flex-grow'>
 					<h2 class='text-black flex-grow dark:text-white text-lg p-4 pb-0'>

diff --git a/app/frontend/src/elements/PluginDetails.svelte b/app/frontend/src/elements/PluginDetails.svelte
@@ -34,7 +34,7 @@
 </style>
 
 {#if plugin}
-	<div class='flex flex-col bg-white dark:bg-gray-700 bg-opacity-50 mt-0 mb-6 rounded shadow-lg'>
+	<div class='flex flex-col bg-white dark:bg-black bg-opacity-25 mt-0 mb-6 rounded shadow-lg dark:shadow-none'>
 
 		{#if $$slots.action}
 			<div class='pt-4 px-4 flex'>

diff --git a/app/frontend/src/elements/VariableInput.svelte b/app/frontend/src/elements/VariableInput.svelte
@@ -28,7 +28,7 @@
     {#if variable.type === 'string'}
         <input 
             id='{variable.name}'
-            class='border px-2 bg-gray-100 active:bg-gray-300 dark:text-gray-400 dark:bg-gray-700 border-gray-300 dark:border-gray-600 dark:bg-opacity-50'
+            class='border px-2 bg-gray-100 active:bg-gray-300 dark:text-gray-400 dark:bg-black dark:bg-opacity-50 border-gray-300 dark:border-gray-600'
             type='text' 
             bind:value='{ values[variable.name] }'
             disabled={disabled}
@@ -37,7 +37,7 @@
         <label class='flex items-center'>
             <input 
                 id='{variable.name}'
-                class='border px-2 bg-gray-100 active:bg-gray-300 dark:text-gray-400 dark:bg-gray-700 border-gray-300 dark:border-gray-600 dark:bg-opacity-50'
+                class='border px-2 bg-gray-100 active:bg-gray-300 dark:text-gray-400 dark:bg-black dark:bg-opacity-50 border-gray-300 dark:border-gray-600'
                 type='checkbox' 
                 bind:checked='{ values[variable.name] }'
                 disabled={disabled}
@@ -51,15 +51,15 @@
     {:else if variable.type === 'number'}
         <input 
             id='{variable.name}'
-            class='border px-2 bg-gray-100 active:bg-gray-300 dark:text-gray-400 dark:bg-gray-700 border-gray-300 dark:border-gray-600 dark:bg-opacity-50'
+            class='border px-2 bg-gray-100 active:bg-gray-300 dark:text-gray-400 dark:bg-black dark:bg-opacity-50 border-gray-300 dark:border-gray-600'
             type='number' 
             bind:value='{ values[variable.name] }'
             disabled={disabled}
         />
     {:else if variable.type === 'list'}
         <select 
             id='{variable.name}'
-            class='border px-2 bg-gray-100 active:bg-gray-300 dark:text-gray-400 dark:bg-gray-700 border-gray-300 dark:border-gray-600 dark:bg-opacity-50'
+            class='border px-2 bg-gray-100 active:bg-gray-300 dark:text-gray-400 dark:bg-black dark:bg-opacity-50 border-gray-300 dark:border-gray-600'
             bind:value='{ values[variable.name] }'
             disabled={disabled}
         >

diff --git a/app/frontend/src/styles.css b/app/frontend/src/styles.css
@@ -10,12 +10,11 @@ html {
 	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
 	-webkit-font-smoothing: subpixel-antialiased;
 	font-size: 13px;
-	background-color: rgba(255, 255, 255, 0.1);
 }
 
 @media (prefers-color-scheme: dark) {
 	html {
-		background-color: rgba(53, 35, 159, 0.1);
+		background-color: #18181C;
 	}
 }
 

diff --git a/app/frontend/tailwind.config.js b/app/frontend/tailwind.config.js
@@ -1,3 +1,6 @@
+
+const colors = require('tailwindcss/colors')
+
 module.exports = {
 	purge: [
 		'./src/**/*.html',
@@ -6,9 +9,12 @@ module.exports = {
 	],
 	darkMode: 'media',
 	theme: {
-		fill: theme => ({
-			gray: theme('colors.warmGray')
-		})
+		colors: {
+			gray: colors.trueGray,
+			blue: colors.blue,
+			black: colors.black,
+			white: colors.white,
+		},
 	},
 	variants: {
 		extend: {},