diff --git a/.changeset/rare-pans-hide.md b/.changeset/rare-pans-hide.md
new file mode 100644
index 0000000000..e2b9132c33
--- /dev/null
+++ b/.changeset/rare-pans-hide.md
@@ -0,0 +1,6 @@
+---
+"@appwrite.io/pink": minor
+"@appwrite.io/pink-icons": minor
+---
+
+Add color-scheme to HTML element
diff --git a/packages/ui/src/2-resets/_typography.scss b/packages/ui/src/2-resets/_typography.scss
index 3f0cac4534..ad3b83a97e 100644
--- a/packages/ui/src/2-resets/_typography.scss
+++ b/packages/ui/src/2-resets/_typography.scss
@@ -10,6 +10,7 @@ html {
   scrollbar-gutter: stable;
   overflow: overlay; // fallback macOS
   overflow-x: hidden;
+  &:has(:where(body#{$theme-dark})) {  color-scheme:dark; }
 }
 
 body {