Added Light Theme (#5)

Light theme and a button to switch themes added
rimijoker · Nov 4, 2020 · 746367d · 746367d
1 parent 8d020ea
commit 746367d
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 8 deletions.
diff --git a/assets/css/index.css b/assets/css/index.css
@@ -1,7 +1,42 @@
+html[data-theme='dark'] {
+  --text: #fff;
+  --background: #000;
+  --linkTag: #0bc;
+  --linkA: #0f0;
+  --linkB: #ff0096;
+  --linkC: #0bc;
+}
+
+html[data-theme='light'] {
+  --text: #000;
+  --background: #fff;
+  --linkTag: #00a8b7;
+  --linkA: #00cc00;
+  --linkB: #e50087;
+  --linkC: #00a8b7;
+}
+
 body {
   background-color: #000;
 }
 
+.header {
+  margin: auto;
+  max-width: 800px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.theme-toggle {
+  font-size: 1.5rem;
+  color: var(--text);
+  border: none;
+  background: none;
+  cursor: pointer;
+  outline: none;
+}
+
 #console {
   font-family: courier, monospace;
   color: #fff;
@@ -13,20 +48,20 @@ body {
 }
 
 a {
-  color: #0bc;
+  color: var(--linkTag);
   text-decoration: none;
 }
 
 #a {
-  color: #0f0;
+  color: var(--linkA);
 }
 
 #c {
-  color: #0bc;
+  color: var(--linkC);
 }
 
 #b {
-  color: #ff0096;
+  color: var(--linkB);
 }
 
 #k {
@@ -39,12 +74,12 @@ a {
 
 @keyframes change {
   0% {
-    color: #0f0;
+    color: var(--linkA);
   }
   50% {
-    color: #0f0;
+    color: var(--linkA);
   }
   99% {
-    color: black;
+    color: var(--background);
   }
 }
diff --git a/assets/js/index.js b/assets/js/index.js
@@ -1,3 +1,16 @@
+var themeToggle = document.getElementById('themeToggle');
+		var doc = document.documentElement;
+
+		themeToggle.addEventListener('click', function () {
+			if (doc.getAttribute('data-theme') === 'dark') {
+				doc.setAttribute('data-theme', 'light')
+				themeToggle.innerHTML = '<i class="far fa-moon"></i>';
+			} else {
+				doc.setAttribute('data-theme', 'dark');
+				themeToggle.innerHTML = '<i class="far fa-sun"></i>';
+			}
+		})
+
 var Typer = {
   text: "",
   accessCountimer: null,

diff --git a/index.html b/index.html
@@ -1,13 +1,20 @@
-<html>
+<html data-theme="dark">
 
 <head>
   <title>(put name here)</title>
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
   <link rel="stylesheet" type="text/css" href="assets/css/index.css">
+  <meta name="theme-color" content="#000">
+	<script src="https://kit.fontawesome.com/885fbd8d84.js" crossorigin="anonymous"></script>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 
 <body>
+  <header class="header">
+    <h1>(put name here)</h1>
+    <button id="themeToggle" class="theme-toggle"><i class="far fa-sun"></i></button>
+  </header>
+
   <script type="text/javascript" src="assets/js/index.js">
   </script>
   <div id="console"></div>