style: update component styles for dark mode compatibility

Author: theEquinoxDev

client/components/Button.css

@@ -1,19 +1,20 @@
 .button {
-  background: #fff;
-  border: 1px solid #aaa;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
   border-radius: 4px;
   cursor: pointer;
   display: inline-block;
   font: var(--main-font);
   outline: none;
   padding: 5px 7px;
-  transition: background .3s ease;
+  transition: background .3s ease, border-color .3s ease, color .3s ease;
   white-space: nowrap;
+  color: var(--text-primary);
 }
 
 .button:focus,
 .button:hover {
-  background: #ffefd7;
+  background: var(--hover-bg);
 }
 
 .button.active {

client/components/Dropdown.css

@@ -10,12 +10,14 @@
 }
 
 .input {
-  border: 1px solid #aaa;
+  border: 1px solid var(--border-color);
   border-radius: 4px;
   display: block;
   width: 100%;
-  color: #7f7f7f;
+  color: var(--text-secondary);
   height: 27px;
+  background: var(--bg-primary);
+  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
 }
 
 .option {

client/components/Icon.css

@@ -1,4 +1,9 @@
 .icon {
   background: no-repeat center/contain;
   display: inline-block;
+  filter: invert(0);
+}
+
+[data-theme="dark"] .icon {
+  filter: invert(1);
 }

client/components/Icon.jsx

@@ -4,6 +4,8 @@ import PureComponent from '../lib/PureComponent';
 
 import iconArrowRight from '../assets/icon-arrow-right.svg';
 import iconPin from '../assets/icon-pin.svg';
+import iconMoon from '../assets/icon-moon.svg';
+import iconSun from '../assets/icon-sun.svg';
 
 const ICONS = {
   'arrow-right': {
@@ -13,6 +15,14 @@ const ICONS = {
   'pin': {
     src: iconPin,
     size: [12, 18]
+  },
+  'moon': {
+    src: iconMoon,
+    size: [24, 24]
+  },
+  'sun': {
+    src: iconSun,
+    size: [24, 24]
   }
 };
 

client/components/Search.css

@@ -13,11 +13,19 @@
 }
 
 .input {
-  border: 1px solid #aaa;
+  border: 1px solid var(--border-color);
   border-radius: 4px;
   display: block;
   flex: 1;
   padding: 5px;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+}
+
+.input:focus {
+  outline: none;
+  border-color: var(--text-secondary);
 }
 
 .clear {