🎨 Color Fun

index.html

@@ -34,6 +34,14 @@
    <p>Vegetable Dash was my next big thing, and I'm still kinda proud of it. It really helped me get a grasp on core JavaScript features, and helped push my knowledge forward with Node. The whole thing was image-based, and since I was going through my SVG craze, is a little strange. The code will cause you nightmares if Grampa Jenkins doesn't. I love you Vegetable Dash, and maybe one day I'll come back for you...</p>
    <p>Cookin' in the Kitchen is one of my more recent works. It was inspired by an old game I used to play, Cooking Fever. I have hopes of making this multiplayer and all, but I probably won't get to. It was a really cool experiment with drag and drop though.</p>
 
+   <h2>Funsies</h2>
+   <div class="funsies">
+      <p>Change the website color theme</p>
+      <button onclick="changeThme()">Random</button>
+      <button onclick="changeThmeHex()">Hex code</button>
+   </div>
+
+   <br><br>
    <div class="footer">
       <div>
          <h2>Find me</h2>

main.js

@@ -5,3 +5,18 @@ console.log("Have a great day! 💖 Editor Rust");
 window.addEventListener("scroll", () => {
    document.body.style.setProperty("--scroll", window.pageYOffset / (document.body.offsetHeight - window.innerHeight));
 }, false);
+
+function changeThme() {
+   let color = (Math.random() * 0xFFFFFF << 0).toString(16).padStart(6, "0");
+   document.documentElement.style.setProperty("--theme-color", `#${color}`);
+}
+
+function changeThmeHex() {
+   let hex = prompt("Enter valid hexidecimal code :)");
+   if (hex) {
+      if (hex.charAt(0) != "#") hex = `#${hex}`;
+      if (/^#[0-9A-F]{3}$/i.test(hex) || /^#[0-9A-F]{6}$/i.test(hex) || /^#[0-9A-F]{8}$/i.test(hex)) {
+         document.documentElement.style.setProperty("--theme-color", hex);
+      } else alert("Invalid hex code!");
+   }
+}

styles.css

@@ -52,10 +52,38 @@ p {
    margin: .5rem 2rem;
 }
 
+button {
+   padding: .2rem .5rem;
+   font-size: 1.1rem;
+   color: #fff;
+   background-color: var(--theme-color);
+   border: solid .2rem var(--theme-color);
+   border-radius: .5rem;
+   box-shadow: 0 .1rem .2rem #ddd;
+   transition: .15s;
+}
+
+button:hover {
+   color: var(--theme-color);
+   background-color: transparent;
+}
+
+button:active {
+   transform: scale(.98);
+}
+
 a {
    color: var(--theme-color);
 }
 
+.funsies {
+   padding: .5rem 2rem;
+}
+
+.funsies p {
+   margin: 0 .2rem .8rem .2rem;
+}
+
 .footer {
    padding: 1rem;
    display: grid;
@@ -76,6 +104,7 @@ a {
    position: fixed;
    top: 0;
    left: 0;
+   z-index: 10;
 }
 
 .progress {