Added a dark theme switcher (#1)

* Removed duplicated PackageReference * Deleted a duplicated image * Deleted Privacy Policy statement inside the card-body * Added a new list * Changed the header from h2 to h1 * Added a button for dark mode switching * Revamped dark mode switcher button * Changed the color property for dark mode * Replaced some images to a transparent background * Changed the images to a transparent background * Transparent images
AvogatoWizardWhisker · Aug 22, 2024 · f782ffc · f782ffc
1 parent 3722b05
commit f782ffc
Show file tree

Hide file tree

Showing 15 changed files with 87 additions and 40 deletions.
diff --git a/MyPersonalSite/MyPersonalSite.csproj b/MyPersonalSite/MyPersonalSite.csproj
@@ -12,9 +12,4 @@
     <PackageReference Include="Microsoft.FluentUI.AspNetCore.Components.Icons" Version="4.9.3" />
   </ItemGroup>
 
-  <ItemGroup>
-    <PackageReference Include="Microsoft.FluentUI.AspNetCore.Components" Version="4.9.3" />
-    <PackageReference Include="Microsoft.FluentUI.AspNetCore.Components.Icons" Version="4.9.3" />
-  </ItemGroup>
-
 </Project>
diff --git a/MyPersonalSite/Pages/Contacts.cshtml b/MyPersonalSite/Pages/Contacts.cshtml
@@ -3,7 +3,7 @@
 @{
     ViewData["Title"] = "My social media accounts";
 }
-<h2 class="text-black text-center">My socials 🌍</h2>
+<h1 class="text-black text-center">My socials 🌍</h1>
 <hr/>
 <h3>You can find me in the following platform</h3>
 <ul class="ce"></ul>
diff --git a/MyPersonalSite/Pages/Index.cshtml b/MyPersonalSite/Pages/Index.cshtml
@@ -26,7 +26,8 @@
         </p>
     </div>
 </div>
-
+<br/>
 <div class="card-body">
     <p class="text-center" style="font-size: large">Shout out to <a href="https://github.com/thonkdifferent" target="_blank">thonkdifferent</a> and <a href="https://github.com/TheRealPear" target="_blank">Pear</a> for helping me make this website.</p>
-</div>
+</div>
+<div class="home-lower dark-theme"></div>
diff --git a/MyPersonalSite/Pages/Privacy.cshtml b/MyPersonalSite/Pages/Privacy.cshtml
@@ -13,22 +13,5 @@
     your own business, not mine!
     <br />
     <br />
-    You can find the project repository right <a
-                                                  href="https://github.com/AvogatoWizardWhisker/MyPersonalSite" target="_blank">here</a>.
+    You can find the project repository right <a href="https://github.com/AvogatoWizardWhisker/MyPersonalSite" target="_blank">here</a>.
 </p>
-
-<div class="card">
-    <div class="card-body">
-        <h1 class="card-title ">@ViewData["Title"] 🔎</h1>
-        <h6 class="card-text">
-            I believe your privacy is not a laughing matter. That's why the privacy policy is as simple
-            as a pie chart with one slice: I don't use analytics tools. Period. My website is like an open book, specifically,
-            an open-source book, where the only cookies you'll find are the ones in our break room—virtual, of course. So,
-            browse with ease, knowing that the only one tracking your moves on our site is you—because your digital footprint is
-            your own business, not mine!
-            <br />
-            <br/>
-            You can find the project repository <a href="https://github.com/AvogatoWizardWhisker/MyPersonalSite" target="_blank" class="card-link">on Github</a>.
-        </h6>
-    </div>
-</div>
diff --git a/MyPersonalSite/Pages/Setups.cshtml b/MyPersonalSite/Pages/Setups.cshtml
@@ -5,5 +5,5 @@
     ViewData["Title"] = "My setup";
 }
 
-<h2 class="text-center">My setup</h2>
+<h1 class="text-center">My setup</h1>
 <hr/>
diff --git a/MyPersonalSite/Pages/Shared/_Layout.cshtml b/MyPersonalSite/Pages/Shared/_Layout.cshtml
@@ -20,7 +20,7 @@
     <meta name="twitter:card" content="summary" />
 
 </head>
-<body>
+<body class="dark-theme">
     <header>
         <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
             <div class="container">
@@ -56,6 +56,9 @@
             &copy; 2024 - Avogato The Ailurophile - <a asp-area="" asp-page="/Privacy">Privacy</a>
             - 
             <a asp-area="" asp-page="/Contacts">Find me</a>
+            <div class="float-end">
+                <button type="button" class="btn btn-primary" id="theme-switcher">dark mode</button>
+            </div>
         </div>
     </footer>
 

diff --git a/MyPersonalSite/Pages/Tools.cshtml b/MyPersonalSite/Pages/Tools.cshtml
@@ -3,15 +3,15 @@
 @{
     ViewData["Title"] = "Tech I use";
 }
-<h2 class="text-center">
+<h1 class="text-center">
     Here are the tools, techs and apps I use in daily 🔰
-</h2>
+</h1>
 <hr />
 <div class="h2">Computers</div>
 <hr />
 <div class="row">
     <div class="col-lg-5 align-content-lg-center">
-        <img src="img/Omen2018.png" alt="HP Omen laptop 2018 model" class="img-fluid" />
+        <img src="img/Omen2018.png" alt="HP Omen laptop 2018 model" class="img-fluid" height="1000" width="1000" />
     </div>
     <div class="col-lg-5 pt-4 pt-lg-0 align-content-center">
         <h3>HP Omen 15 (2018 model)</h3>
@@ -23,20 +23,19 @@
     </div>
     <hr />
     <div class="col-lg-5 align-content-lg-center">
-        <img src="img/lenovo-ideapad-flex-5.jpg" alt="Lenovo IdeaPad Flex 5 14AlC05" class="img-fluid"/>
+        <img src="img/lenovo-ideapad-flex-5.png" alt="Lenovo IdeaPad Flex 5 14AlC05" class="img-fluid" />
     </div>
     <div class="col-lg-5 pt-4 pt-lg-0 align-content-center">
-        <h3>Lenovo IdeaPad Flex5</h3>
+        <h3>Lenovo IdeaPad Flex5 14AlC05</h3>
         <p>The Lenovo Ideapad Flex with an AMD Ryzen 5 5500U and 8GiB RAM is like a Swiss Army knife; versatile but
             sometimes you wish it had just one more tool—or in this case, a bit more RAM. It's the digital equivalent of
             trying to stuff a king-sized comforter into a washing machine—it can work, but it's a tight squeeze! If your
             laptop were a superhero, it would be RAM-man, always on the edge of needing just one more gigabyte to save
-            the day. But don't worry, even superheroes have their limits, and your trusty spare laptop is still great
-            for all those non-RAM-intensive tasks!</p>
+            the day.</p>
     </div>
+    <hr />
     <div class="col-lg-5 align-content-lg-center">
-        <img src="img/lenovo-ideapad-flex-5.jpg" alt="Lenovo IdeaPad Flex 5 14AlC05" class="img-fluid rounded"
-            width="300" height="300" />
+        <img src="img/dell-vostro-230.png" alt="Dell Vostro 230" class="img-fluid" />
     </div>
     <div class="col-lg-5 pt-4 pt-lg-0 align-content-center">
         <h3>Lenovo IdeaPad Flex5</h3>
@@ -45,8 +44,29 @@
             into Windows 10, it's no wonder it prefers a quiet life of dust-gathering.
         </p>
     </div>
+</div>
+<hr />
+<div class="h2">Mobile Phones</div>
+<hr/>
+<div class="row">
+    <div class="col-lg-5 align-content-lg-center">
+        <img src="img/Note10Lite.png" alt="Samsung Galaxy Note 10 Lite phone" class="img-fluid" height="500" width="400"/>
+    </div>
+    <div class="col-lg-5 pt-4 pt-lg-0 align-content-center">
+        <h3>Samsung Galaxy Note 10 Lite</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at eius obcaecati repudiandae. A adipisci
+            asperiores at consequuntur dicta distinctio dolorum eligendi esse, explicabo ipsum itaque molestias
+            necessitatibus porro, suscipit.</p>
+    </div>
+    <hr/>
+    <div class="col-lg-5 align-content-lg-center">
+        <img src="img/nokia-5.png" alt="Nokia 5 phone" class="img-fluid" height="500" width="400"/>
+    </div>
 
-
-
-
+    <div class="col-lg-5 pt-4 pt-lg-0 align-content-center">
+        <h3>Nokia 5</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at eius obcaecati repudiandae. A adipisci
+            asperiores at consequuntur dicta distinctio dolorum eligendi esse, explicabo ipsum itaque molestias
+            necessitatibus porro, suscipit.</p>
+    </div>
 </div>
diff --git a/MyPersonalSite/wwwroot/css/site.css b/MyPersonalSite/wwwroot/css/site.css
@@ -22,6 +22,16 @@ body {
     /*background-image: url('../img/bg2.png');
     background-size: cover;
     background-repeat: no-repeat;*/
+    background-color: white;
+}
+
+body.dark-theme{
+    background-color: #373b3e;
+    margin-bottom: 60px;
+
+    p, h1, div{
+        color: white;
+    }
 }
 .header1 {
     color: aquamarine

diff --git a/MyPersonalSite/wwwroot/img/_da3186c5-9a81-4ff3-9842-16df50cb1778.jpg b/MyPersonalSite/wwwroot/img/_da3186c5-9a81-4ff3-9842-16df50cb1778.jpg
diff --git a/MyPersonalSite/wwwroot/img/dell-vostro-230.png b/MyPersonalSite/wwwroot/img/dell-vostro-230.png
diff --git a/MyPersonalSite/wwwroot/img/lenovo-ideapad-flex-5.jpg b/MyPersonalSite/wwwroot/img/lenovo-ideapad-flex-5.jpg
diff --git a/MyPersonalSite/wwwroot/img/lenovo-ideapad-flex-5.png b/MyPersonalSite/wwwroot/img/lenovo-ideapad-flex-5.png
diff --git a/MyPersonalSite/wwwroot/img/lenovo-laptops-ideapad-flex-5-gen-8-16-amd-hero.avif b/MyPersonalSite/wwwroot/img/lenovo-laptops-ideapad-flex-5-gen-8-16-amd-hero.avif
diff --git a/MyPersonalSite/wwwroot/img/nokia-5.png b/MyPersonalSite/wwwroot/img/nokia-5.png
diff --git a/MyPersonalSite/wwwroot/js/site.js b/MyPersonalSite/wwwroot/js/site.js
@@ -2,3 +2,38 @@
 // for details on configuring this project to bundle and minify static web assets.
 
 // Write your JavaScript code.
+const themeName = 'dark-theme';
+const itemDivs = document.querySelectorAll('.dark-theme');
+const themeSwitcher = document.getElementById('theme-switcher');
+const darkTheme = localStorage.getItem(themeName);
+
+if(darkTheme === null){
+    localStorage.setItem(themeName,"active");
+} else if(darkTheme === "active"){
+    addTheme();
+} else {
+    removeTheme();
+}
+
+themeSwitcher.addEventListener('click',function (){
+    let currentTheme = localStorage.getItem(themeName);
+    if(currentTheme === "inactive"){
+        localStorage.setItem(themeName,"active");
+        addTheme();
+    } else if (currentTheme === "active"){
+        localStorage.setItem(themeName,"inactive");
+        removeTheme();
+    }
+})
+
+function removeTheme(){
+    itemDivs.forEach(itemDiv => {
+        itemDiv.classList.remove(themeName);
+    });
+}
+
+function addTheme(){
+    itemDivs.forEach(itemDiv => {
+        itemDiv.classList.add(themeName);
+    });
+}