feat: Light and Dark themes (#2)

jonas-martinez · Jul 7, 2024 · a6b9781 · a6b9781
1 parent ce4ab3e
commit a6b9781
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 60 deletions.
diff --git a/css/home.css b/css/home.css
@@ -29,7 +29,7 @@ button {
 }
 
 .button-primary {
-    background-color: #54B9AF;
+    background-color: var(--button-background);
     border-radius: 8px;
     color: white;
 
@@ -44,7 +44,7 @@ button {
 }
 
 .shadow {
-    filter: drop-shadow(2px 4px 4px #00000066)
+    filter: drop-shadow(2px 4px 4px #00000066);
 }
 
 body {
@@ -55,7 +55,7 @@ body {
     padding: 24px 32px;
 }
 
-body > nav > div > aside {
+body>nav>div>aside {
     position: absolute;
     top: 0;
     left: -200px;
@@ -66,7 +66,7 @@ body > nav > div > aside {
 
     padding: 32px;
 
-    background-color: white;
+    background-color: var(--background-color);
 
     border-right: 1px solid lightgray;
 
@@ -83,11 +83,11 @@ body > nav > div > aside {
     }
 }
 
-body > nav > div > #openMenu:checked ~ aside {
+body>nav>div>#openMenu:checked~aside {
     left: 0px;
 }
 
-body > nav {
+body>nav {
     display: flex;
     width: 100%;
     justify-content: space-between;
@@ -96,16 +96,24 @@ body > nav {
         width: 40px;
     }
 
+    @media (prefers-color-scheme: dark) {
+        &>a>img.shadow {
+            filter: invert(99%) sepia(9%) saturate(674%) hue-rotate(178deg) brightness(99%) contrast(94%);
+        }
+    }
+
     &>div {
         align-content: center;
-        
+
         &>label>img {
             cursor: pointer;
+
+            filter: invert(99%) sepia(9%) saturate(674%) hue-rotate(178deg) brightness(99%) contrast(94%);
         }
     }
 }
 
-body > section:first-of-type {
+body>section:first-of-type {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -132,7 +140,7 @@ body > section:first-of-type {
     }
 }
 
-body > section:nth-of-type(2) {
+body>section:nth-of-type(2) {
     text-align: center;
 
     display: flex;
@@ -148,5 +156,11 @@ body > section:nth-of-type(2) {
         flex-direction: row;
         gap: 16px;
         justify-content: center;
+
+        @media (prefers-color-scheme: dark) {
+            &>a>img {
+                filter: brightness(0) saturate(100%) invert(99%) sepia(9%) saturate(674%) hue-rotate(178deg) brightness(99%) contrast(94%);;
+            }
+        }
     }
 }
diff --git a/css/index.css b/css/index.css
@@ -0,0 +1,55 @@
+body {
+    background-color: #10141a;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    height: 100vh;
+    margin: 0;
+    padding: 0 24px;
+
+    &>p {
+        color: white;
+        text-transform: uppercase;
+        text-align: center;
+
+        font-family: Arial, Helvetica, sans-serif;
+        font-weight: bold;
+        font-size: 2em;
+        letter-spacing: 2px;
+
+        &>span:nth-of-type(1) {
+            animation: 2s linear(1, 0, 0, 0) infinite wip-dot;
+        }
+
+        &>span:nth-of-type(2) {
+            animation: 2s linear(1, 1, 0, 0) infinite wip-dot;
+        }
+
+        &>span:nth-of-type(3) {
+            animation: 2s linear(1, 1, 1, 0) infinite wip-dot;
+        }
+    }
+}
+
+@media all and (max-width: 480px) {
+    body>p{
+        word-spacing: 100vw;
+    }
+
+    body>p>span:first-of-type::before {
+        /* This inserts a line break */
+        content: "\A";
+    }
+}
+
+@keyframes wip-dot {
+    from {
+        color: white;
+    }
+
+    to {
+        color: transparent;
+    }
+}
diff --git a/css/main.css b/css/main.css
@@ -1,55 +1,13 @@
-body {
-    background-color: #10141a;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    height: 100vh;
-    margin: 0;
-    padding: 0 24px;
-
-    &>p {
-        color: white;
-        text-transform: uppercase;
-        text-align: center;
-
-        font-family: Arial, Helvetica, sans-serif;
-        font-weight: bold;
-        font-size: 2em;
-        letter-spacing: 2px;
-
-        &>span:nth-of-type(1) {
-            animation: 2s linear(1, 0, 0, 0) infinite wip-dot;
-        }
+:root {
+    color-scheme: light dark;
 
-        &>span:nth-of-type(2) {
-            animation: 2s linear(1, 1, 0, 0) infinite wip-dot;
-        }
+    --background-color: light-dark(#FFFFFF, #191d26);
+    --text-color: light-dark(#000000, #f0f1f5);
 
-        &>span:nth-of-type(3) {
-            animation: 2s linear(1, 1, 1, 0) infinite wip-dot;
-        }
-    }
+    --button-background: #54B9AF;
 }
 
-@media all and (max-width: 480px) {
-    body>p{
-        word-spacing: 100vw;
-    }
-
-    body>p>span:first-of-type::before {
-        /* This inserts a line break */
-        content: "\A";
-    }
-}
-
-@keyframes wip-dot {
-    from {
-        color: white;
-    }
-
-    to {
-        color: transparent;
-    }
+body {
+    color: var(--text-color);
+    background-color: var(--background-color);
 }
diff --git a/home.html b/home.html
@@ -6,6 +6,7 @@
     <meta http-equiv='X-UA-Compatible' content='IE=edge'>
     <title>Jonas Martinez | Fullstack Developer</title>
     <meta name='viewport' content='width=device-width, initial-scale=1'>
+    <link rel='stylesheet' type='text/css' media='screen' href='css/main.css'>
     <link rel='stylesheet' type='text/css' media='screen' href='css/home.css'>
 </head>
 

diff --git a/index.html b/index.html
@@ -6,7 +6,7 @@
     <meta http-equiv='X-UA-Compatible' content='IE=edge'>
     <title>Jonas Martinez's Portfolio</title>
     <meta name='viewport' content='width=device-width, initial-scale=1'>
-    <link rel='stylesheet' type='text/css' media='screen' href='css/main.css'>
+    <link rel='stylesheet' type='text/css' media='screen' href='css/index.css'>
 </head>
 
 <body>