Add light theme

otaviocv · Dec 8, 2024 · 3d3c228 · 3d3c228
1 parent 213a1a6
commit 3d3c228
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 11 deletions.
diff --git a/src/app.html b/src/app.html
@@ -8,9 +8,52 @@
 			* {
 				margin: 0px;
 			}
+
+			:root {
+  			/* dark theme config */
+  			--dark-theme-backgroung-color: #000;
+  			--dark-theme-green: #00FF55;
+  			--dark-theme-yellow: #FFB800;
+  			--dark-theme-purple: #CC00FF;
+  			--dark-theme-blue: #00A3FF;
+  			--dark-theme-pink: #FF006B;
+  			--dark-theme-text-color: var(--dark-theme-green);
+
+  			/* light theme config */
+  			--light-theme-backgroung-color: #FFF6DF;
+  			--light-theme-green: #006A24;
+  			--light-theme-yellow: #CA9100;
+  			--light-theme-purple: #A300CC;
+  			--light-theme-blue: #008DDC;
+  			--light-theme-pink: #CF0057;
+  			--light-theme-text-color: var(--light-theme-green);
+
+  			/* default config */
+  			--theme-backgroung-color: var(--dark-theme-backgroung-color);
+  			--theme-green: var(--dark-theme-green);
+  			--theme-yellow: var(--dark-theme-yellow);
+  			--theme-purple: var(--dark-theme-purple);
+  			--theme-blue: var(--dark-theme-blue);
+  			--theme-pink: var(--dark-theme-pink);
+  			--theme-text-color: var(--dark-theme-green);
+			}
+
+			@media (prefers-color-scheme: light) {
+				:root {
+  				--theme-backgroung-color: var(--light-theme-backgroung-color);
+  				--theme-green: var(--light-theme-green);
+  				--theme-yellow: var(--light-theme-yellow);
+  				--theme-purple: var(--light-theme-purple);
+  				--theme-blue: var(--light-theme-blue);
+  				--theme-pink: var(--light-theme-pink);
+  				--theme-text-color: var(--light-theme-green);
+				}
+			}
+
 			body::-webkit-scrollbar {
 				display: none;
 			}
+
 		</style>
 		%sveltekit.head%
 	</head>

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,4 +1,8 @@
+<script>
+</script>
+
 <div class="app">
+
   <div class="content">
       <br>
 
@@ -16,9 +20,9 @@
       </p>
       <p class="right">
         ───────── <br>
-        <a class="bold darkblue" href="https://x.com/otaviocv">twitter</a><br>
-        <a class="bold darkred" href="https://www.youtube.com/@otaviocv">youtube</a><br>
-        <a class="bold darkpurple" href="https://www.linkedin.com/in/otaviocv/">linkedin</a><br>
+        <a class="bold blue" href="https://x.com/otaviocv">twitter</a><br>
+        <a class="bold pink" href="https://www.youtube.com/@otaviocv">youtube</a><br>
+        <a class="bold purple" href="https://www.linkedin.com/in/otaviocv/">linkedin</a><br>
         ─────────
       </p>
 
@@ -93,8 +97,8 @@ a:link, a:visited, a:hover, a:active {
   font-size: 2em;
   width: 100%;
   display: content;
-  background: #000;
-  color: #00ff00;
+  background: var(--theme-backgroung-color);
+  color: var(--theme-text-color);
 }
 
 h1 {
@@ -123,16 +127,16 @@ h1 {
 	font-weight: 700;
 }
 
-.darkblue {
-  color: #00A3FF;
+.blue {
+  color: var(--theme-blue);
 }
 
-.darkred {
-  color: #FF006B;
+.pink {
+  color: var(--theme-pink);
 }
 
-.darkpurple {
-  color: #CC00FF;
+.purple {
+  color: var(--theme-purple);
 }