feat: Apply themes on specific events (#227)

Signed-off-by: oSumAtrIX <johan.melkonyan1@web.de>

src/lib/components/Button.svelte

@@ -35,7 +35,7 @@
 		min-width: max-content;
 		font-size: 0.95rem;
 		text-decoration: none;
-		color: var(--white);
+		color: var(--text-one);
 		font-weight: 600;
 		border: none;
 		border-radius: 100px;
@@ -51,11 +51,11 @@
 	}
 
 	.button-filled {
-		background-color: var(--accent-color);
-		color: var(--grey-four);
+		background-color: var(--primary);
+		color: var(--text-three);
 	}
 	.button-tonal {
-		background-color: var(--grey-two);
+		background-color: var(--surface-four);
 	}
 
 	.button-filled,
@@ -65,7 +65,7 @@
 
 	.button-text {
 		background-color: transparent;
-		color: var(--accent-color);
+		color: var(--primary);
 		font-weight: 500;
 		letter-spacing: 0.01rem;
 	}

src/lib/components/Dialogue.svelte

@@ -92,7 +92,7 @@
 		align-items: center;
 		gap: 1rem;
 		width: 100%;
-		background-color: var(--grey-six);
+		background-color: var(--surface-seven);
 	}
 
 	.buttons {
@@ -119,7 +119,7 @@
 		left: 50%;
 		transform: translate(-50%, -50%);
 		border-radius: 26px;
-		background-color: var(--grey-six);
+		background-color: var(--surface-seven);
 		display: flex;
 		gap: 5%;
 		white-space: normal;
@@ -170,7 +170,7 @@
 	}
 
 	.fullscreen.scrolled .title {
-		border-bottom: 1px solid var(--grey-three);
+		border-bottom: 1px solid var(--border);
 	}
 
 	.slot {

src/lib/components/FilterChip.svelte

@@ -18,9 +18,9 @@
 	button {
 		font-family: var(--font-two);
 		border: none;
-		border: 1.5px solid var(--grey-three);
+		border: 1.5px solid var(--border);
 		background-color: transparent;
-		color: var(--grey-five);
+		color: var(--text-four);
 		height: 32px;
 		padding: 0 16px;
 		border-radius: 8px;
@@ -32,8 +32,8 @@
 	}
 
 	.selected {
-		background-color: var(--accent-low-opacity);
-		color: var(--accent-color);
+		background-color: var(--tertiary);
+		color: var(--primary);
 	}
 
 	img {

src/lib/components/Search.svelte

@@ -67,29 +67,29 @@
 		display: flex;
 		padding: 1rem 3.25rem;
 		width: 100%;
-		color: var(--accent-color-two);
+		color: var(--secondary);
 		font-weight: 500;
 		font-size: 0.92rem;
 		border-radius: 100px;
 		border: none;
-		background-color: var(--grey-ten);
+		background-color: var(--surface-nine);
 		outline: none;
 
 		transition: background-color 0.3s var(--bezier-one);
 		&:hover {
-			background-color: var(--grey-three);
+			background-color: var(--surface-five);
 		}
 
 		&:focus::placeholder {
-			color: var(--accent-color);
+			color: var(--primary);
 		}
 		&:focus {
-			background-color: var(--bg-color);
+			background-color: var(--surface-two);
 		}
 	}
 
 	input::placeholder {
-		color: var(--grey-five);
+		color: var(--text-four);
 		font-size: 0.9rem;
 		font-weight: 500;
 		transition: all 0.2s var(--bezier-one);

src/lib/components/Snackbar.svelte

@@ -46,13 +46,13 @@
 		left: 0;
 		right: 0;
 		bottom: 2rem;
-		background-color: var(--white);
+		background-color: var(--surface-one);
 		transition: all 0.4s var(--bezier-one);
 		box-shadow: var(--drop-shadow-one);
 	}
 
 	.text {
-		color: var(--grey-two);
+		color: var(--text-two);
 		font-weight: 500;
 		font-size: 14px;
 	}

src/lib/components/Spinner.svelte

@@ -24,7 +24,7 @@
 		height: 100%;
 		border-radius: 50%;
 		border: 4.5px solid transparent;
-		border-top-color: var(--accent-color);
+		border-top-color: var(--primary);
 		animation: spinner 0.6s linear infinite;
 	}
 </style>

src/lib/components/Wave.svelte

@@ -15,7 +15,7 @@
 		animation: wave-anim 40s;
 		animation-timing-function: linear;
 		animation-iteration-count: infinite;
-		fill: var(--accent-color);
+		fill: var(--primary);
 	}
 
 	@keyframes wave-anim {