From 1b208510b830f4f66a313fb17b13123023dd3fd1 Mon Sep 17 00:00:00 2001
From: suman <121168928+maxwithbug@users.noreply.github.com>
Date: Wed, 2 Oct 2024 12:59:27 +0530
Subject: [PATCH] updated the ui of toggle dark theme #347

#347
---
 .changeset/curvy-carrots-nail.md |  5 +++++
 docs/style.css                   | 13 +++++++++----
 2 files changed, 14 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/curvy-carrots-nail.md

diff --git a/.changeset/curvy-carrots-nail.md b/.changeset/curvy-carrots-nail.md
new file mode 100644
index 0000000..9ae4240
--- /dev/null
+++ b/.changeset/curvy-carrots-nail.md
@@ -0,0 +1,5 @@
+---
+"water.css": patch
+---
+
+updated the ui of toggle dark theme
diff --git a/docs/style.css b/docs/style.css
index 970b13a..3f0d721 100755
--- a/docs/style.css
+++ b/docs/style.css
@@ -64,7 +64,7 @@ body > footer {
   justify-content: space-between;
 }
 
-/* toggle dark mode */
+/* toggle theme */
 #theme-container {
   position: fixed;
   top: 20px;
@@ -73,10 +73,12 @@ body > footer {
 }
 
 #theme-toggle {
-  padding: 10px 15px;
-  background-color: #bebebe;
+  width: 50px; /* Equal width and height for a perfect circle */
+  height: 50px;
+  padding: 0; /* No padding so that the circle shape is maintained */
+  background-color: #dddbdb;
   border: none;
-  border-radius: 5px;
+  border-radius: 50%; /* Makes it a circle */
   cursor: pointer;
   box-shadow: 0 2px 5px #0003;
   color: #000;
@@ -88,4 +90,7 @@ body > footer {
 
 #themeIcon {
   height: 25px;
+  width: 25px;
+  display: block;
+  margin: 0 auto; /* Centers the icon within the circle */
 }