diff options
author | Your Name <you@example.com> | 2025-04-23 22:22:16 -0600 |
---|---|---|
committer | Your Name <you@example.com> | 2025-04-23 22:22:16 -0600 |
commit | 6819fc5bf5ad63cfb6936238e4c526eef36aef93 (patch) | |
tree | a64c21ff866f117b15519aa26874ddf462b5b9c7 | |
parent | b21d3d0ec752c14cef6fecd54a3163ae380ce7f7 (diff) |
added dark mode js toggle
-rw-r--r-- | index.html | 18 | ||||
-rw-r--r-- | styles.css | 9 |
2 files changed, 17 insertions, 10 deletions
@@ -1,23 +1,26 @@ <!DOCTYPE html> + <html> + <script> + function toggleDarkMode() { + document.body.classList.toggle("dark-mode"); + } + </script> <head> <title>Skylarcloud</title> <link rel="stylesheet" href="styles.css"> + + <button type="button" + onclick="toggleDarkMode()"> + light/dark mode toggle</button> </head> <body> <center> <h1>Homepage</h1> - <!-- <p> --> - <!-- <a href="https://skylarcloud.xyz">Homepage</a> | --> - <!-- <a href="https://skylarcloud.xyz/feed.html">My Feed</a> | --> - <!-- <a href="https://searx.skylarcloud.xyz">SearXNG</a> | --> - <!-- <a href="https://git.skylarcloud.xyz">Git Repos</a> --> - <!-- </p> --> </center> <div> - <p>Welcome to my spaceship. I host a few personal services here, publish a feed of notes and posts, and I'll hopefully be hosting many public services as time goes on. I want to participate in an intergalactic community--from the Salt Lake City area and out--slinging text files across the stars, organizing, and sharing our art/projects/speech through Free software.</p> <h2>My feed</h2> @@ -54,5 +57,4 @@ </center> </body> - </html> @@ -1,10 +1,15 @@ body { font-family: "Lucida Console", "Courier New", monospace; - background-color: #282828; - color: #fbf1c7; + background-color: #fbf1c7; + color: #282828; font-size: 18px; } +.dark-mode { + background-color: #282828; + color: #fbf1c7; +} + h1 { font-size: 38px; color: #fe8019; |