light globe icon for dark mode

jackocnr · Jul 11, 2024 · 33d47c0 · 33d47c0
1 parent 4db9144
commit 33d47c0
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -338,11 +338,13 @@ Dark mode example:
 ```css
 @media (prefers-color-scheme: dark) {
   .iti {
-    --iti-border-color: #30363d;
+    --iti-border-color: #5b5b5b;
     --iti-dialcode-color: #999999;
     --iti-dropdown-bg: #0d1117;
     --iti-arrow-color: #aaaaaa;
     --iti-hover-color: #30363d;
+    --iti-path-globe-1x: url("path/to/globe_light.png");
+    --iti-path-globe-2x: url("path/to/[email protected]");
   }
 }
 ```
@@ -356,7 +358,7 @@ NOTE: this assumes you already have your own dark mode styling in place for gene
     background-color: #0d1117;
   }
   input {
-    border-color: #30363d;
+    border-color: #5b5b5b;
   }
   input::placeholder {
     color: #8d96a0;

diff --git a/build/css/demo.css b/build/css/demo.css
@@ -56,16 +56,18 @@ input::placeholder {
     background-color: #0d1117;
   }
   input {
-    border-color: #30363d;
+    border-color: #5b5b5b;
   }
   input::placeholder {
     color: #8d96a0;
   }
-  :root {
-    --iti-border-color: #30363d;
+  .iti {
+    --iti-border-color: #5b5b5b;
     --iti-dialcode-color: #999999;
     --iti-dropdown-bg: #0d1117;
     --iti-arrow-color: #aaaaaa;
     --iti-hover-color: #30363d;
+    --iti-path-globe-1x: url("../img/globe_light.png");
+    --iti-path-globe-2x: url("../img/[email protected]");
   }
 }
diff --git a/build/img/globe_light.png b/build/img/globe_light.png
diff --git a/build/img/[email protected] b/build/img/[email protected]
diff --git a/src/css/demo.scss b/src/css/demo.scss
@@ -62,17 +62,19 @@ input::placeholder {
     background-color: #0d1117;
   }
   input {
-    border-color: #30363d;
+    border-color: #5b5b5b;
   }
   input::placeholder {
     color: #8d96a0;
   }
   // intl-tel-input styling
   .iti {
-    --iti-border-color: #30363d;
+    --iti-border-color: #5b5b5b;
     --iti-dialcode-color: #999999;
     --iti-dropdown-bg: #0d1117;
     --iti-arrow-color: #aaaaaa;
     --iti-hover-color: #30363d;
+    --iti-path-globe-1x: url("../img/globe_light.png");
+    --iti-path-globe-2x: url("../img/[email protected]");
   }
 }