Add support for light themes

svelte/src/file_viewer/EmbedWindow.svelte

@@ -161,8 +161,11 @@ const example = () => {
 				<button class:button_highlight={style==="canta"} on:click={() => {set_style("canta")}}>
 					Canta
 				</button>
-				<button class:button_highlight={style==="arc"} on:click={() => {set_style("arc")}}>
-					Arc
+				<button class:button_highlight={style==="nord"} on:click={() => {set_style("nord")}}>
+					Nord
+				</button>
+				<button class:button_highlight={style==="snowstorm"} on:click={() => {set_style("snowstorm")}}>
+					Snowstorm
 				</button>
 				<button class:button_highlight={style==="deepsea"} on:click={() => {set_style("deepsea")}}>
 					Deep sea

svelte/src/file_viewer/GalleryView.svelte

@@ -201,7 +201,7 @@ const drop = (e, index) => {
 	text-align: left;
 }
 .icon_container.editing {
-	box-shadow: inset 0 60px 40px -40px #000000;
+	box-shadow: inset 0 60px 40px -40px var(--shadow_color);
 }
 .icon_container > i:hover {
 	color: var(--highlight_color);

svelte/src/user_file_manager/DirectoryElement.svelte

@@ -385,6 +385,7 @@ const node_click = (index) => {
 	flex-shrink: 0;
 	text-align: left;
 	background-color: var(--layer_1_color);
+	color: var(--layer_1_text_color);
 	padding: 4px;
 }
 

svelte/src/util/Modal.svelte

@@ -71,7 +71,7 @@ const keydown = e => {
 	right: 0;
 	bottom: 0;
 	left: 0;
-	background-color: rgba(0, 0, 0, 0.5);
+	background-color: rgba(0, 0, 0, 0.7);
 }
 .window {
 	position: absolute;
@@ -89,7 +89,7 @@ const keydown = e => {
 	border-radius: 20px 20px 16px 16px;
 	overflow: hidden;
 	text-align: left;
-	box-shadow: var(--shadow_color) 0px 0px 50px;
+	/* box-shadow: var(--shadow_color) 0px 0px 50px; Does not work with light theme */
 }
 .header {
 	flex-grow: 0;
@@ -98,6 +98,7 @@ const keydown = e => {
 	flex-direction: row;
 	padding: 1px;
 	background-color: var(--layer_1_color);
+	color: var(--layer_1_text_color);
 }
 .title {
 	flex-grow: 1;