Styling

src/frontend/color_scheme.scss

@@ -1,43 +1,50 @@
+@use "sass:list";
 @use "sass:color";
 
-// https://coolors.co/25a35a-3c91e6-f50000-f2f4ff-e9ce2c
-$text-color-light: rgba(7, 59, 58, 1);
 $background-color-light: hsla(272, 32%, 97%, 1);
+$text-color-light: rgba(7, 59, 58, 1);
 $green-light: hsla(145, 63%, 50%, 1);
 $red-light: hsla(0, 100%, 48%, 1);
+$border-color-light: color.invert($background-color-light, $weight: 100%);
 
 $background-color-dark: hsla(222, 19%, 27%, 1);
 $text-color-dark: hsla(60, 15%, 95%, 1);
 $green-dark: color.scale($green-light, $lightness: -20%);
 $red-dark: color.scale($red-light, $lightness: -20%);
+$border-color-dark: color.invert($background-color-dark, $weight: 100%);
 
-:root {
+$light-theme: (
+	"background-color" $background-color-light -5%,
+	"green" $green-light -5%,
+	"red" $red-light -4%,
+	"text-color" $text-color-light 5%,
+	"border-color" $border-color-light -5%
+);
+
+$dark-theme: (
+	"background-color" $background-color-dark -13%,
+	"green" $green-dark -5%,
+	"red" $red-dark -5%,
+	"text-color" $text-color-dark -5%,
+	"border-color" $border-color-dark -5%
+);
+
+//Takes a list of three values(name, color and lightness step) and emits 4 css(not sass) variables for each step
+@mixin theme($theme) {
 	@for $i from 0 to 4 {
-		--background-color-#{$i+1}: #{color.scale(
+		@each $value in $theme {
-				$background-color-light,
+			$name: list.nth($value, 1);
-				$lightness: -$i * 5%
+			$color: list.nth($value, 2);
-			)};
+			$step: list.nth($value, 3);
-		--text-color-#{$i+1}: #{color.scale(
+			--#{$name}-#{$i+1}: #{color.scale($color, $lightness: $i * $step)};
-				$text-color-light,
-				$lightness: $i * 10%
-			)};
-
-		--green-#{$i+1}: #{color.scale($green-light, $lightness: -$i * 10%)};
-		--red-#{$i+1}: #{color.scale($red-light, $lightness: -$i * 10%)};
-	}
-
-	@media (prefers-color-scheme: dark) {
-		@for $i from 0 to 4 {
-			--background-color-#{$i+1}: #{color.scale(
-					$background-color-dark,
-					$lightness: $i * 10%
-				)};
-			--text-color-#{$i+1}: #{color.scale(
-					$text-color-dark,
-					$lightness: -$i * 10%
-				)};
-			--green-#{$i+1}: #{color.scale($green-dark, $lightness: -$i * 10%)};
-			--red-#{$i+1}: #{color.scale($red-dark, $lightness: -$i * 10%)};
 		}
 	}
 }
+
+:root {
+	@include theme($light-theme);
+
+	@media (prefers-color-scheme: dark) {
+		@include theme($dark-theme);
+	}
+}

src/frontend/content_script/Translated.svelte

@@ -32,20 +32,19 @@
 		min-width: 9ch;
 		border-radius: 2px;
 		min-height: 100%;
-	}
 
-	.remove {
+		cursor: pointer;
-		background-color: var(--red-1);
-		&:hover {
-			background-color: var(--red-2);
-		}
-	}
-
-	.add {
 		background-color: var(--green-1);
 		&:hover {
 			background-color: var(--green-2);
 		}
+
+		&.enabled {
+			background-color: var(--red-1);
+			&:hover {
+				background-color: var(--red-2);
+			}
+		}
 	}
 </style>
 
@@ -53,13 +52,13 @@
 	<span>{trans.result}</span>
 
 	{#if !card}
-		<button on:click={addFlashcard} class="add">
+		<button on:click={addFlashcard}>
 			Add
 			<br />
 			card
 		</button>
 	{:else}
-		<button on:click={removeFlashcard} class="remove">
+		<button on:click={removeFlashcard} class="enabled">
 			Remove
 			<br />
 			card

src/frontend/content_script/tippy.scss

@@ -7,6 +7,7 @@
 	tippy-svg-arrow {
 		fill: var(--background-color-1);
 	}
+	border: 2px solid var(--border-color-1);
 
 	.tippy-content {
 		user-select: none;

src/frontend/popup/LanguageSelection.svelte

@@ -15,7 +15,7 @@
 		--itemIsActiveBG: var(--background-color-4);
 		--itemHoverBG: var(--background-color-3);
 		--listBackground: var(--background-color-2);
-		--inputColor: var(--text-color-1);
+		--inputColor: var(--text-color-4) !important;
 		--itemIsActiveColor: var(--text-color-3);
 		--border: none;
 	}

src/frontend/popup/Popup.svelte

@@ -26,6 +26,8 @@
 		width: 387px;
 		background-color: var(--background-color-1);
 		padding: 3vh 3vh;
+
+		color: var(--text-color-1);
 	}
 
 	input {
@@ -39,11 +41,11 @@
 		align-self: center;
 		width: 70%;
 		height: 8vh;
-		cursor: pointer;
 		border-radius: 10vw;
 
 		font-weight: 500;
 
+		cursor: pointer;
 		background-color: var(--green-1);
 		&:hover {
 			background-color: var(--green-2);