Start working on a color scheme

src/frontend/color_scheme.scss

@@ -0,0 +1,49 @@
+@use "sass:color";
+
+// https://coolors.co/25a35a-3c91e6-f50000-f2f4ff-e9ce2c
+$text-color-light: rgba(7, 59, 58, 1);
+$background-color-light: white;
+
+$green: hsla(145, 63%, 39%, 1);
+$blue: hsla(210, 77%, 57%, 1);
+$red: hsla(0, 100%, 48%, 1);
+$yellow: hsla(51, 81%, 54%, 1);
+
+$background-color-dark: hsla(222, 19%, 27%, 1);
+$text-color-dark: hsla(60, 15%, 95%, 1);
+
+:root {
+	@for $i from 0 to 3 {
+		--background-color-#{$i+1}: #{color.scale(
+				$background-color-light,
+				$lightness: -$i * 5%
+			)};
+		--text-color-#{$i+1}: #{color.scale(
+				$text-color-light,
+				$lightness: $i * 10%
+			)};
+
+		--green-#{$i+1}: #{color.scale($green, $lightness: -$i * 10%)};
+		--red-#{$i+1}: #{color.scale($red, $lightness: -$i * 10%)};
+	}
+
+	--blue: #{$blue};
+	--yellow: #{$yellow};
+
+	@media (prefers-color-scheme: dark) {
+		@for $i from 0 to 3 {
+			--background-color-#{$i+1}: #{color.scale(
+					$background-color-dark,
+					$lightness: $i * 10%
+				)};
+			--text-color-#{$i+1}: #{color.scale(
+					$text-color-dark,
+					$lightness: -$i * 10%
+				)};
+		}
+	}
+}
+
+* {
+	color: var(--text-color-1);
+}

src/frontend/content_script/Translated.svelte

@@ -16,6 +16,13 @@
 </script>
 
 <style lang="scss">
+	:global(:root) {
+		--background-color: $blackish;
+		--green: $green;
+		--blue: $blue;
+		--yellow: $yellow;
+	}
+
 	.translatedContainer {
 		display: flex;
 		align-items: center;

src/frontend/popup/LanguageSelection.svelte

@@ -8,6 +8,20 @@
 		label.toLowerCase().startsWith(filterText.toLowerCase());
 </script>
 
+<style lang="scss">
+	@use "../color_scheme.scss";
+	.select-styling {
+		--background: var(--background-color-3);
+		--itemIsActiveBG: var(--background-color-1);
+		--itemHoverBG: var(--background-color-3);
+		--listBackground: var(--background-color-2);
+		--inputColor: var(--text-color-1);
+		--itemIsActiveColor: var(--text-color-3);
+		--border: none;
+	}
+</style>
+
+<div class="select-styling">
 	<Select
 		items={langs}
 		getOptionLabel={getLabel}
@@ -16,3 +30,4 @@
 		{itemFilter}
 		isClearable={false}
 		bind:selectedValue />
+</div>

src/frontend/popup/Popup.svelte

@@ -5,7 +5,6 @@
 	Communicator.getEnabled().then((v) => (enabled = v));
 
 	let enabled: boolean;
-	$: console.log(enabled);
 	$: if (enabled !== undefined) Communicator.setEnabled(enabled);
 
 	const langPromise = Communicator.getLanguages();
@@ -18,25 +17,42 @@
 </script>
 
 <style lang="scss">
+	@use "../color_scheme.scss";
+
 	#container {
-		width: 387px;
+		display: flex;
+		flex-direction: column;
 		height: 600px;
+		width: 387px;
+		background-color: var(--background-color-1);
+		padding: 3vh 3vh;
 	}
+
+	input {
+		display: none;
+	}
+
 	label {
-		display: block;
+		display: flex;
-		width: 100%;
+		align-items: center;
-		text-align: center;
+		justify-content: center;
+
+		align-self: center;
+		width: 70%;
+		height: 8vh;
 		cursor: pointer;
-		border: 1px solid #d8dbdf;
+		border-radius: 10vw;
+		background-color: var(--green-1);
+		&:hover {
+			background-color: var(--green-2);
 		}
-	label:hover {
+
-		border-color: #b2b8bf;
+		&.enabled {
+			background-color: var(--red-1);
+			&:hover {
+				background-color: var(--red-2);
 			}
-	label {
-		background-color: red;
 		}
-	.enabled {
-		background-color: green;
 	}
 </style>