Full remove scss

src/_variables.scss

@@ -1,13 +0,0 @@
-$background-color: #0d0d0f;
-
-$primary-color: #2e3042;
-$primary-accent-color: #263447;
-
-$secondary-color: #dfdfe9;
-$secondary-accent-color: #adadbb;
-
-$danger-color: #be3329;
-$danger-accent-color: #ddaeb2;
-$danger-active-color: #b69092;
-
-$font-family: Verdana, Geneva, Tahoma, sans-serif;

src/app.scss

@@ -1,35 +0,0 @@
-@use "variables" as *;
-
-body {
-	background-color: $background-color;
-	font-family: $font-family;
-	color: white;
-	margin: 0;
-	padding: 0;
-}
-
-button {
-	font-family: $font-family;
-	background-color: transparent;
-	color: white;
-}
-
-button:hover {
-	cursor: pointer;
-}
-
-a {
-	text-decoration: inherit;
-	color: inherit;
-	cursor: auto;
-}
-
-a:visited {
-	text-decoration: inherit;
-	color: inherit;
-	cursor: auto;
-}
-
-a:hover {
-	cursor: pointer;
-}

src/lib/components/Catalog.svelte

@@ -27,7 +27,7 @@
 	<p>Loading...</p>
 {/if}
 
-<style lang="scss">
+<style>
 	.container {
 		display: flex;
 		flex-direction: row;

src/lib/components/Settings.svelte

@@ -3,6 +3,7 @@
 	import { UserSettingsSolid } from 'flowbite-svelte-icons';
 	import { sineIn } from 'svelte/easing';
 	import { resetSettings, settingsStore, updateSetting } from '$lib/settings';
+	import { promptConfirmation } from '$lib/util';
 
 	let transitionParams = {
 		x: 320,
@@ -32,6 +33,11 @@
 	function onChange(event: Event) {
 		updateSetting('backgroundColor', (event.target as HTMLInputElement).value);
 	}
+
+	function onReset() {
+		hidden = true;
+		promptConfirmation('Restore default settings?', resetSettings);
+	}
 </script>
 
 <Drawer
@@ -40,7 +46,7 @@
 	width="lg:w-1/4 md:w-1/2 w-full"
 	{transitionParams}
 	bind:hidden
-	id="sidebar1"
+	id="settings"
 >
 	<div class="flex items-center">
 		<h5 id="drawer-label" class="inline-flex items-center mb-4 text-base font-semibold">
@@ -62,6 +68,6 @@
 			<Label>Background color:</Label>
 			<Input type="color" on:change={onChange} value={$settingsStore.backgroundColor} />
 		</div>
-		<Button outline on:click={resetSettings}>Reset</Button>
+		<Button outline on:click={onReset}>Reset</Button>
 	</div>
 </Drawer>

src/routes/+layout.svelte

@@ -2,14 +2,13 @@
 	import '../app.postcss';
 	import NavBar from '$lib/components/NavBar.svelte';
 	import Snackbar from '$lib/components/Snackbar.svelte';
-	import '../app.scss';
 	import ConfirmationPopup from '$lib/components/ConfirmationPopup.svelte';
+	import { settingsStore } from '$lib/settings';
 </script>
 
-<NavBar />
+<div class="h-screen text-white" style:background-color={$settingsStore.backgroundColor}>
-<Snackbar />
+	<NavBar />
-<ConfirmationPopup />
+	<Snackbar />
-
+	<ConfirmationPopup />
-<div>
 	<slot />
 </div>

src/routes/[manga]/[volume]/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import Reader from '$lib/components/Reader/Reader.svelte';
-	import { settingsStore } from '$lib/settings';
 </script>
 
-<div style:background-color={$settingsStore.backgroundColor}><Reader /></div>
+<Reader />

svelte.config.js

@@ -1,17 +1,11 @@
-import { vitePreprocess } from '@sveltejs/kit/vite';
 import adapter from '@sveltejs/adapter-auto';
-import preprocess from 'svelte-preprocess';
+import { vitePreprocess } from '@sveltejs/kit/vite';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-	preprocess: [
+	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
-		preprocess({
+	// for more information about preprocessors
-			scss: {
+	preprocess: vitePreprocess(),
-				prependData: `@use './src/variables' as *;`
-			}
-		}),
-		vitePreprocess({})
-	],
 
 	kit: {
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.

tailwind.config.cjs

@@ -3,6 +3,9 @@ const config = {
 	content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}', './node_modules/flowbite-svelte-icons/**/*.{html,js,svelte,ts}'],
 
 	theme: {
+    fontFamily: {
+      'sans': 'Verdana, Geneva, Tahoma, sans-serif'
+    },
 		extend: {
 			colors: {
         primary: {
@@ -24,7 +27,6 @@ const config = {
 	plugins: [require('flowbite/plugin')],
 
   darkMode: 'class',
-	
 };
 
 module.exports = config;