Add dark mode

src/app.css

@@ -1,8 +1,56 @@
 @import 'tailwindcss';
 
+:root
+{
+	--primary: #f3f4ff;
+	--secondary: white;
+	--hover: #f4f5fa;
+	--text-primary: #303037;
+	--text-secondary: #9b9aa7;
+	--point-color: #3131ff1e;
+	--shadow-light: #00008036;
+	--shadow-medium: #00008041;
+	--shadow-dark: #00022d;
+	--popup-shadow: #01012640;
+	--popup-bg-overlay: #01012629;
+	--input-border: #dbdbe8;
+	--input-border-focus: rgb(173, 173, 194);
+	--input-bg: #fbfbfd;
+	--input-text: rgb(77, 77, 92);
+	--input-placeholder: rgb(173, 173, 194);
+	--disabled-bg: #f0f0f7;
+	--disabled-border: #d3d4e8;
+	--disabled-text: #9b9bb7;
+}
+
+.dark
+{
+	--primary: oklch(0.141 0.005 285.823);
+	--secondary: oklch(0.141 0.005 285.823);
+	--hover: oklch(0.18 0.01 285.823);
+	--text-primary: oklch(0.985 0 0);
+	--text-secondary: oklch(0.7 0 0);
+	--point-color: oklch(0.25 0.05 285.823);
+	--shadow-light: rgba(49, 49, 255, 0.2);
+	--shadow-medium: rgba(49, 49, 255, 0.25);
+	--shadow-dark: rgba(0, 2, 45, 0.8);
+	--popup-shadow: rgba(0, 0, 0, 0.5);
+	--popup-bg-overlay: rgba(0, 0, 0, 0.4);
+	--input-border: oklch(0.3 0.01 285.823);
+	--input-border-focus: oklch(0.4 0.02 285.823);
+	--input-bg: oklch(0.16 0.005 285.823);
+	--input-text: oklch(0.85 0 0);
+	--input-placeholder: oklch(0.5 0 0);
+	--disabled-bg: oklch(0.2 0.005 285.823);
+	--disabled-border: oklch(0.25 0.01 285.823);
+	--disabled-text: oklch(0.5 0 0);
+}
+
 html, body
 {
-	background-color: #f3f4ff;
+	background-color: var(--primary);
+	color: var(--text-primary);
+	transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 *:focus
@@ -78,3 +126,24 @@ html, body
 {
 	@apply flex flex-col justify-center items-center;
 }
+
+.bg-card
+{
+	background-color: white;
+}
+
+.dark .bg-card
+{
+	background-color: var(--secondary);
+}
+
+input, textarea, select
+{
+	background-color: var(--secondary);
+	color: var(--text-primary);
+}
+
+input::placeholder, textarea::placeholder
+{
+	color: var(--text-secondary);
+}

src/lib/display/buttons/default.svelte

@@ -96,7 +96,7 @@
 
 	.download-button, .edit-button-container
 	{
-		filter: drop-shadow(0em 0.1em 1.4em #00008041);
+		filter: drop-shadow(0em 0.1em 1.4em var(--shadow-medium));
 		transform: translateZ(0);
 	}
 
@@ -149,7 +149,7 @@
 		display: none;
 		left: 50%;
 		top: 50%;
-		filter: drop-shadow(0 0.1em 1em #00008036);
+		filter: drop-shadow(0 0.1em 1em var(--shadow-light));
 		transform: translateZ(0);
 		z-index: 100;
 	}

src/lib/display/buttons/edit.svelte

@@ -45,7 +45,7 @@
 
 	.button-container
 	{
-		filter: drop-shadow(0em 0.1em 1.4em #00008041);
+		filter: drop-shadow(0em 0.1em 1.4em var(--shadow-medium));
 		transform: translateZ(0);
 	}
 

src/lib/display/details/info_bubble.svelte

@@ -74,12 +74,12 @@
 
 <div class="info absolute cursor-auto" bind:this={info}>
 	<div
-		class="arrow absolute bg-white"
+		class="arrow absolute bg-card"
 		style="top: {arrow_top}; transform: rotate({arrow_rotation}deg);"
 	>
 	</div>
 	<div
-		class="info-container absolute bg-white" bind:clientHeight={info_height}
+		class="info-container absolute bg-card" bind:clientHeight={info_height}
 		style="left: {info_left}; top: {info_top}; padding: {journal ? '1.3em 1.5em 1.1em 1.5em' : '1em 1.2em 1.1em 1.2em'};"
 	>
 		{#if text !== undefined}
@@ -100,7 +100,7 @@
 <style>
 	.info
 	{
-		filter: drop-shadow(0 0.1em 1em #00008036);
+		filter: drop-shadow(0 0.1em 1em var(--shadow-light));
 		transform: translateZ(0);
 		z-index: 1000;
 		left: 50%;

src/lib/display/details/paper_bubble.svelte

@@ -81,13 +81,13 @@
 	style="{mobile_mode ?  `bottom: ${details_height}px; width: 100%;` : 'top: 0em;'}"
 >
 	<div
-		class="arrow absolute bg-white"
+		class="arrow absolute bg-card"
 		style="{mobile_mode ? 'display: none;' : ''} left: {arrow_left}; top: {point.y}px; transform: {arrow_rotation};"
 	>
 		<div class="hitbox"></div>
 	</div>
 	<div
-		class="details-container absolute bg-white {mobile_mode ? 'mobile-radius' : ''}" bind:clientHeight={details_height} bind:this={details}
+		class="details-container absolute bg-card {mobile_mode ? 'mobile-radius' : ''}" bind:clientHeight={details_height} bind:this={details}
 		style="{mobile_mode ? `--details-width: ${width}px;` : `left: ${details_left}; top: ${details_top}; --details-width: ${details_width}em;`}"
 	>
 		<Content {emojis} {map} {journals} {paper} {width} {height} bind:journal_info_open={journal_info_open} {edit_mode}/>
@@ -97,14 +97,14 @@
 <style>
 	.details
 	{
-		filter: drop-shadow(0 0.1em 1.25em #00008036);
+		filter: drop-shadow(0 0.1em 1.25em var(--shadow-light));
 		transform: translateZ(0);
 		z-index: 1000;
 	}
 
 	.details.mobile-shadow
 	{
-		filter: drop-shadow(0 0em 15em #00022d);
+		filter: drop-shadow(0 0em 15em var(--shadow-dark));
 		transform: translateZ(0);
 	}
 

src/lib/display/edit/add.svelte

@@ -1105,7 +1105,7 @@
 
 	h1
 	{
-		color: #303037;
+		color: var(--text-primary);
 		font-size: 1.25em;
 		font-family: Satoshi-Variable, sans-serif;
 		font-weight: 500;
@@ -1141,7 +1141,7 @@
 		flex-direction: column;
 		justify-content: start;
 		align-items: start;
-		color: #303037;
+		color: var(--text-primary);
 		gap: 0.5em;
 	}
 

src/lib/display/edit/search.svelte

@@ -196,7 +196,7 @@
 
 	h1
 	{
-		color: #303037;
+		color: var(--text-primary);
 		font-size: 1.25em;
 		font-family: Satoshi-Variable, sans-serif;
 		font-weight: 500;
@@ -257,7 +257,7 @@
 		flex-direction: column;
 		justify-content: start;
 		align-items: start;
-		color: #303037;
+		color: var(--text-primary);
 	}
 
 	.input .label

src/lib/display/edit/send.svelte

@@ -164,7 +164,7 @@
 
 	h1
 	{
-		color: #303037;
+		color: var(--text-primary);
 		font-size: 1.25em;
 		font-family: Satoshi-Variable, sans-serif;
 		font-weight: 500;
@@ -200,7 +200,7 @@
 		flex-direction: column;
 		justify-content: start;
 		align-items: start;
-		color: #303037;
+		color: var(--text-primary);
 	}
 
 	.input .label

src/lib/display/graph/graph.svelte

@@ -67,10 +67,10 @@
 
 <svg viewBox="0 0 {width} {height}" xmlns="http://www.w3.org/2000/svg">
 	<g class="background unselectable">
-		<rect x=0 y=0 width={width} height={height} fill={bg.BACKGROUND_COLOR}/>
+		<rect x=0 y=0 width={width} height={height} class="bg-rect"/>
 		<g class="points">
 			{#each background_points as point}
-				<circle cx={point.x} cy={point.y} r={point.size} fill={bg.POINTS_COLOR} opacity={bg.POINTS_OPACITY}/>
+				<circle cx={point.x} cy={point.y} r={point.size} class="bg-point"/>
 			{/each}
 		</g>
 	</g>
@@ -135,14 +135,14 @@
 			{#each x_axis as tick}
 				{#if tick.type !== null}
 					<line
-						x1={tick.start.x} y1={tick.start.y} x2={tick.end.x} y2={tick.end.y} stroke={bg.AXIS_COLOR}
+						x1={tick.start.x} y1={tick.start.y} x2={tick.end.x} y2={tick.end.y} class="axis-line"
 						stroke-width={tick.width} stroke-linecap="round" stroke-linejoin="round" opacity={tick.opacity}
 					/>
 				{/if}
 				{#if tick.label !== null}
 					<text
 						x={tick.label.x} y={tick.label.y}
-						fill={bg.AXIS_COLOR} font-family="Satoshi-Bold" font-size={tick.label.font_size}
+						class="axis-text" font-family="Satoshi-Bold" font-size={tick.label.font_size}
 						text-anchor="middle" alignment-baseline="auto" dominant-baseline="auto"
 					>
 						{tick.label.text}
@@ -151,7 +151,7 @@
 			{/each}
 			<text
 				x={x_title.x} y={x_title.y}
-				fill={bg.AXIS_COLOR} font-family="Satoshi-Bold" font-size={x_title.font_size}
+				class="axis-text" font-family="Satoshi-Bold" font-size={x_title.font_size}
 				text-anchor="middle" alignment-baseline="auto" dominant-baseline="auto"
 			>
 				{x_title.text}
@@ -161,14 +161,14 @@
 			{#each y_axis as tick}
 				{#if tick.type !== null}
 					<line
-						x1={tick.start.x} y1={tick.start.y} x2={tick.end.x} y2={tick.end.y} stroke={bg.AXIS_COLOR}
+						x1={tick.start.x} y1={tick.start.y} x2={tick.end.x} y2={tick.end.y} class="axis-line"
 						stroke-width={tick.width} stroke-linecap="round" stroke-linejoin="round" opacity={tick.opacity}
 					/>
 				{/if}
 				{#if tick.label !== null}
 					<text
 						x={tick.label.x} y={tick.label.y}
-						fill={bg.AXIS_COLOR} font-family="Satoshi-Bold" font-size={tick.label.font_size}
+						class="axis-text" font-family="Satoshi-Bold" font-size={tick.label.font_size}
 						text-anchor="start" alignment-baseline="central" dominant-baseline="central"
 					>
 						{tick.label.text}
@@ -178,7 +178,7 @@
 			<text
 				x={y_title.x} y={y_title.y}
 				transform="rotate(90, {y_title.x}, {y_title.y})"
-				fill={bg.AXIS_COLOR} font-family="Satoshi-Bold" font-size={y_title.font_size}
+				class="axis-text" font-family="Satoshi-Bold" font-size={y_title.font_size}
 				text-anchor="middle" alignment-baseline="auto" dominant-baseline="auto"
 			>
 				{y_title.text}
@@ -188,6 +188,26 @@
 </svg>
 
 <style>
+	.bg-rect
+	{
+		fill: var(--primary);
+	}
+
+	.bg-point
+	{
+		fill: var(--point-color);
+	}
+
+	.axis-line
+	{
+		stroke: var(--text-primary);
+	}
+
+	.axis-text
+	{
+		fill: var(--text-primary);
+	}
+
 	.dot
 	{
 		transition: transform 0.2s ease-in-out;

src/lib/display/overview.svelte

@@ -162,7 +162,7 @@
 	.bar
 	{
 		height: 0.8em;
-		box-shadow: 0em 0.1em 1em #00008036;
+		box-shadow: 0em 0.1em 1em var(--shadow-light);
 	}
 
 	.bar-hitbox

src/lib/display/title.svelte

@@ -129,7 +129,7 @@
 		placeholder={display_text} bind:value={search} bind:this={input_element}
 		style="width: {input_width}; {search_element?.shown() ? 'border-radius: 1.575em 1.575em 0em 0em;' : 'border-radius: 1.575em;'}"
 	/>
-	<div class="search absolute w-full bg-white" style="display: {search_element?.shown() ? 'block' : 'none'};">
+	<div class="search absolute w-full bg-card" style="display: {search_element?.shown() ? 'block' : 'none'};">
 		<Search {emojis} {map} {maps} {search} new_map={to_new_map} bind:this={search_element}/>
 	</div>
 </div>
@@ -166,12 +166,11 @@
 		padding: 0.85em 1.45em 0.8em 3.05em;
 		font-weight: 575;
 		letter-spacing: 0.005em;
-		background-color: white;
 	}
 
 	input::placeholder
 	{
-		color: black;
+		/* color: black; */
 		pointer-events: none;
 		user-select: none;
 		-moz-user-select: none;

src/lib/home/background.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { BACKGROUND_COLOR, POINTS_COLOR } from '$lib/display/graph/background';
 	import { clamp } from '$lib/utils';
 
 	const { width, height }: { width: number, height: number } = $props();
@@ -13,15 +12,15 @@
 		const background_size = `${dots_gap}px ${dots_gap}px`;
 		const dots_width = `${width + (dots_gap - width % dots_gap)}px`;
 		const dots_height = `${height + (dots_gap - height % dots_gap)}px`;
-		const background_image = `radial-gradient(circle ${dots_size}px, ${POINTS_COLOR}1e 0%, ${POINTS_COLOR}1e 80%, transparent 100%)`;
+		const background_image = `radial-gradient(circle ${dots_size}px, var(--point-color) 0%, var(--point-color) 80%, transparent 100%)`;
 
 		return `background-size: ${background_size}; width: ${dots_width}; height: ${dots_height}; background-image: ${background_image};`;
 	});
 </script>
 
 <div class="main-background absolute left-0 top-0 w-full h-full">
 	<div class="dots absolute w-full h-full z-[2]" style="{dots_style}"></div>
-	<div class="back-color absolute left-0 top-0 w-full h-full z-[1]" style="background-color: {BACKGROUND_COLOR};"></div>
+	<div class="back-color absolute left-0 top-0 w-full h-full z-[1]"></div>
 </div>
 
 <style>