diff --git a/src/lib/components/DarkModeSwitcher.svelte b/src/lib/components/DarkModeSwitcher.svelte deleted file mode 100644 index 21a882d..0000000 --- a/src/lib/components/DarkModeSwitcher.svelte +++ /dev/null @@ -1,42 +0,0 @@ - - - - - -
- -
- - diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte index df71151..59803bf 100644 --- a/src/lib/components/Footer.svelte +++ b/src/lib/components/Footer.svelte @@ -16,13 +16,17 @@ + + - \ No newline at end of file diff --git a/src/lib/stores/darkModeStore.js b/src/lib/stores/darkModeStore.js deleted file mode 100644 index 2f0404d..0000000 --- a/src/lib/stores/darkModeStore.js +++ /dev/null @@ -1,3 +0,0 @@ -import { writable } from 'svelte/store'; - -export let isDarkMode = writable(false); diff --git a/src/lib/styles/style.css b/src/lib/styles/style.css index d53f7ff..f9dd16c 100644 --- a/src/lib/styles/style.css +++ b/src/lib/styles/style.css @@ -11,6 +11,22 @@ } +:root { + --background-color: #16181c; + --container-background-color: #26292f; + --text-color: #fff; + --link-text-color: #afb9c4; +} + +@media (prefers-color-scheme: light) { + :root { + --background-color: #eee; + --container-background-color: #d9d6d0; + --text-color: #000; + --link-text-color: #50463b; + } +} + @font-face { font-family: 'inter-semibold'; src: url('/font/Inter-SemiBold.woff2'); @@ -19,20 +35,21 @@ html { /*font-family: 'sary_soft_semiboldregular';*/ font-family: 'inter-semibold'; + background-color: var(--background-color); } body { margin: 0; padding: 0; background: #eee; - color: #fff; - background-color: #16181c; + color: var(--text-color); + background-color: var(--background-color); } main { padding: 2rem; margin: 2rem; - background-color: #26292f; + background-color: var(--container-background-color); border-radius: 0.5rem; float: left; overflow: hidden; @@ -44,7 +61,7 @@ main { flex-grow: 0; height: auto; margin: 2rem; - background-color: #26292f; + background-color: var(--container-background-color); border-radius: 0.5rem; overflow:visible; } @@ -82,14 +99,10 @@ main { } a { - color: #afb9c4; + color: var(--link-text-color); text-decoration: none; } a:hover { - color: #fff; + color: var(--text-color); } - - .invert { - filter: invert(1); - } \ No newline at end of file diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 385e28b..ca0a830 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -2,32 +2,20 @@ import Header from '$lib/components/Header.svelte'; import Footer from '$lib/components/Footer.svelte'; import Navbar from '$lib/components/Navbar.svelte'; - import { isDarkMode } from '$lib/stores/darkModeStore'; - import '$lib/styles/style.css'; - - //change background color based on dark mode - //$: document.body.style.backgroundColor = $isDarkMode ? '#fff' : '#16181c'; - -
-
-
-
-
-
- - -

YOU CANT SEE THIS YOU CANT SEE THIS YOU CANT SEE THIS YOU CANT SEE THIS

-
-
+
+
+
+
+
+
+ + +

YOU CANT SEE THIS YOU CANT SEE THIS YOU CANT SEE THIS YOU CANT SEE THIS

+
+
- - -
-
-
-
- - +