Support dynamic dark/light themes

svelte/src/file_viewer/AdLeaderboard.svelte

@@ -1,5 +1,6 @@
 <script>
 import { onMount } from "svelte"
+import { color_by_name_no_prefix } from "../util/Util.svelte";
 import * as head from "./AdHead.svelte"
 
 let container
@@ -114,7 +115,7 @@ head.valueimpression_loaded.subscribe(v => {
 	{:else if ad_type === "aads"}
 		<iframe bind:this={banner} class="banner"
 			data-aa="73974"
-			src="//ad.a-ads.com/73974?size=728x90&background_color={window.style.bodyColor}&text_color={window.style.bodyTextColor}&title_color={window.style.highlightColor}&title_hover_color={window.style.highlightColor}&link_color={window.style.highlightColor}&link_hover_color={window.style.highlightColor}"
+			src="//ad.a-ads.com/73974?size=728x90&background_color={color_by_name_no_prefix('body_color')}&text_color={color_by_name_no_prefix('body_text_color')}&title_color={color_by_name_no_prefix('highlight_color')}&title_hover_color={color_by_name_no_prefix('highlight_color')}&link_color={color_by_name_no_prefix('highlight_color')}&link_hover_color={color_by_name_no_prefix('highlight_color')}"
 			style="width:728px; height:90px; border:0px; padding:0; overflow:hidden; background-color: transparent;"
 			title="A-ads advertisement">
 		</iframe>

svelte/src/file_viewer/AdSkyscraper.svelte

@@ -1,5 +1,6 @@
 <script>
 import { createEventDispatcher, onMount, tick } from "svelte"
+import { color_by_name_no_prefix } from "../util/Util.svelte";
 import * as head from "./AdHead.svelte"
 
 let dispatch = createEventDispatcher()
@@ -91,7 +92,7 @@ head.valueimpression_loaded.subscribe(v => {
 			{#if ad_type === "aads"}
 				<iframe
 					data-aa="1811738"
-					src="//ad.a-ads.com/1811738?size=160x600&background_color={window.style.bodyColor}&text_color={window.style.bodyTextColor}&title_color={window.style.highlightColor}&title_hover_color={window.style.highlightColor}&link_color={window.style.highlightColor}&link_hover_color={window.style.highlightColor}"
+					src="//ad.a-ads.com/1811738?size=160x600&background_color={color_by_name_no_prefix('body_color')}&text_color={color_by_name_no_prefix('body_text_color')}&title_color={color_by_name_no_prefix('highlight_color')}&title_hover_color={color_by_name_no_prefix('highlight_color')}&link_color={color_by_name_no_prefix('highlight_color')}&link_hover_color={color_by_name_no_prefix('highlight_color')}"
 					style="width:160px; height:600px; border:0px; padding:0; overflow:hidden; background-color: transparent;"
 					title="A-ads advertisement">
 				</iframe>

svelte/src/file_viewer/DetailsWindow.svelte

@@ -1,7 +1,7 @@
 <script>
 import { onMount } from "svelte";
 import { formatDataVolume, formatDate, formatThousands } from "../util/Formatting.svelte"
-import { domain_url } from "../util/Util.svelte";
+import { color_by_name, domain_url } from "../util/Util.svelte";
 import Chart from "../util/Chart.svelte";
 
 export let file = {
@@ -75,15 +75,15 @@ onMount(() => {
 			label: "Views",
 			borderWidth: 2,
 			pointRadius: 0,
-			borderColor: "#"+window.style.highlightColor,
-			backgroundColor: "#"+window.style.highlightColor,
+			borderColor: color_by_name("highlight_color"),
+			backgroundColor: color_by_name("highlight_color"),
 		},
 		{
 			label: "Downloads",
 			borderWidth: 2,
 			pointRadius: 0,
-			borderColor: "#"+window.style.dangerColor,
-			backgroundColor: "#"+window.style.dangerColor,
+			borderColor: color_by_name("danger_color"),
+			backgroundColor: color_by_name("danger_color"),
 		},
 	];
 })

svelte/src/file_viewer/FileViewer.svelte

@@ -410,7 +410,9 @@ const keyboard_event = evt => {
 			bind:this={list_navigator}
 			files={list.files}
 			shuffle={list_shuffle}
-			on:set_file={e => { open_file_index(e.detail) }}>
+			on:set_file={e => open_file_index(e.detail)}
+			on:toggle_gallery={toggle_gallery}
+		>
 		</ListNavigator>
 	{/if}
 
@@ -423,17 +425,6 @@ const keyboard_event = evt => {
 				<hr/>
 			{/if}
 
-			{#if is_list}
-				<button
-					on:click={toggle_gallery}
-					class="toolbar_button"
-					class:button_highlight={view === "gallery"}
-					title="Opens a gallery view of the album">
-					<i class="icon">photo_library</i>
-					Gallery
-				</button>
-			{/if}
-
 			{#if file.abuse_type === "" && view === "file"}
 				<button
 					on:click={downloader.download_file}

svelte/src/file_viewer/GalleryView.svelte

@@ -178,7 +178,7 @@ const drop = (e, index) => {
 	overflow: hidden;
 	border-radius: 8px;
 	box-shadow: 1px 1px 4px -1px var(--shadow_color);
-	background-color: var(--input_background);
+	background: var(--input_background);
 	word-break: break-all;
 	text-align: center;
 	line-height: 1.2em;
@@ -187,8 +187,12 @@ const drop = (e, index) => {
 	text-decoration: none;
 	vertical-align: top;
 	color: var(--body_text_color);
+	transition: background 0.2s;
 }
-.file:hover, .highlight {
+.file:hover {
+	background: var(--input_hover_background);
+}
+.highlight {
 	box-shadow: 0 0 2px 2px var(--highlight_color);
 	text-decoration: none;
 }

svelte/src/file_viewer/IntroPopup.svelte

@@ -57,7 +57,7 @@ onMount(() => {
 	height: auto;
 	padding: 8px;
 	background-color: var(--popout_color);
-	box-shadow: 2px 2px 16px var(--shadow_color);
+	box-shadow: 1px 1px 10px -2px var(--shadow_color);
 	border-radius: 20px;
 	z-index: 50;
 	transition: opacity .4s, left .5s, top .5s;

svelte/src/file_viewer/ListNavigator.svelte

@@ -18,6 +18,9 @@ export const next = () => {
 export const prev = () => {
 	dispatch("set_file", selected_file_index-1)
 }
+export const toggle_gallery = () => {
+	dispatch("toggle_gallery")
+}
 
 let history = []
 export const rand_item = () => {
@@ -69,8 +72,9 @@ export const set_item = idx => {
 </script>
 
 <div class="nav_container">
-	<button class="nav_button" style="margin-right: 0;" on:click={prev} title="Open the previous file">
-		<i class="icon">chevron_left</i>
+	<button class="nav_button" on:click={toggle_gallery} title="Opens a gallery view of the album">
+		<i class="icon">photo_library</i><br/>
+		Gallery
 	</button>
 	<div bind:this={file_list_div} class="list_navigator">
 		{#each files as file, index (file)}
@@ -84,9 +88,6 @@ export const set_item = idx => {
 			</a>
 		{/each}
 	</div>
-	<button class="nav_button" style="margin-left: 0;" on:click={next} title="Open the next file">
-		<i class="icon">chevron_right</i>
-	</button>
 </div>
 
 <style>
@@ -104,7 +105,6 @@ export const set_item = idx => {
 .nav_button{
 	flex-grow: 0;
 	flex-shrink: 0;
-	height: 2.6em;
 	margin-top: 8px;
 }