fix

assets/intl-tel-input/css/demo.css

@@ -10,7 +10,7 @@ body {
 }
 
 input,
-button {
+.button {
   height: 35px;
   margin: 0;
   padding: 6px 12px;
@@ -19,13 +19,8 @@ button {
   font-size: 100%;
   color: inherit;
 }
-input[disabled],
-button[disabled] {
-  background-color: #eee;
-}
 
-input,
-select {
+input {
   border: 1px solid #ccc;
   width: 220px;
 }
@@ -34,18 +29,64 @@ input::placeholder {
   color: #bbb;
 }
 
-button {
+.button {
   color: #fff;
   background-color: #428bca;
   border: 1px solid #357ebd;
   margin-left: 5px;
 }
-button:hover {
+.button:hover {
   background-color: #3276b1;
   border-color: #285e8e;
   cursor: pointer;
 }
+.button:disabled {
+  background-color: #ccc;
+  border-color: #999;
+  color: #666;
+  cursor: not-allowed;
+}
 
 .notice {
   margin-top: 15px;
+}
+
+@media (prefers-color-scheme: dark) {
+  body, input {
+    color: white;
+    background-color: #0d1117;
+  }
+  input[disabled] {
+    background-color: #3c3c3c;
+  }
+  input {
+    border-color: #5b5b5b;
+  }
+  input::placeholder {
+    color: #8d96a0;
+  }
+  .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.webp");
+    --iti-path-globe-2x: url("../img/globe_light@2x.webp");
+  }
+}
+#error-msg {
+  color: red;
+}
+
+#valid-msg {
+  color: #00c900;
+}
+
+input.error {
+  border: 1px solid #ff7c7c;
+}
+
+.hide {
+  display: none;
 }