diff --git a/darkmode.js b/darkmode.js new file mode 100644 index 00000000..d3849a6c --- /dev/null +++ b/darkmode.js @@ -0,0 +1,3 @@ +function toggleDarkMode() { + document.body.classList.toggle('dark-mode'); +} diff --git a/darkmodes.png b/darkmodes.png new file mode 100644 index 00000000..a8e39eb0 Binary files /dev/null and b/darkmodes.png differ diff --git a/index.html b/index.html index cd7a80c8..c867f0fc 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,5 @@ + @@ -21,6 +22,7 @@ + @@ -85,6 +87,8 @@ 0 + Toggle Dark Mode +
@@ -553,6 +557,7 @@

Newsletter

+ diff --git a/moon.png b/moon.png new file mode 100644 index 00000000..e86aa003 Binary files /dev/null and b/moon.png differ diff --git a/moons.png b/moons.png new file mode 100644 index 00000000..63e7664e Binary files /dev/null and b/moons.png differ diff --git a/styles/styles.css b/styles/styles.css index 5140fc76..79e8423f 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -50,6 +50,41 @@ body { z-index: 9999; } +/* Icon styling */ +#icon { + width: 30px; + padding-left: 10px; + cursor: pointer; /* Makes the icon look clickable */ +} + +/* Default light mode styles */ +body { + background-color: #ffffff; + color: #000000; +} + +body { + background: linear-gradient(to right, #ffcccc, #ffe6e6); /* Adjust as per your color needs */ + background-size: cover; + margin: 0; + padding: 0; +} +.container { + width: 100%; + max-width: 100%; + margin: 0 auto; +} +html, body { + overflow-x: hidden; +} + + +/* Dark mode styles */ +body.dark-mode { + background-color: #121212; + color: #ffffff; +} + .loader-container { position: relative; diff --git a/sun.png b/sun.png new file mode 100644 index 00000000..a698922b Binary files /dev/null and b/sun.png differ