added dark theme

Readme.md

@@ -75,7 +75,6 @@ new Vue({
 ## Props
 ```ts
 {
-
   @Prop({ default: () => [] }) customEmojis!: IEmoji[];
   @Prop({ default: () => [] }) customCategories!: ICategory[];
   @Prop({ default: 15 }) limitFrequently!: number;
@@ -85,6 +84,7 @@ new Vue({
   @Prop({ default: true }) emojiWithBorder!: boolean;
   @Prop({ default: true }) showSearch!: boolean;
   @Prop({ default: true }) showCategories!: boolean;
+  @Prop({ default: false }) dark!: boolean;
   @Prop({ default: "Peoples" }) initialCategory!: string;
   @Prop({ default: () => [] as ICategory[] }) exceptCategories!: ICategory[];
   @Prop({ default: () => [] as Emoji[] }) exceptEmojis!: IEmoji[];

src/AppTestUi.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div>
-      <VEmojiPicker :customEmojis="emojis" :continuousList="true" v-if="visible" />
+      <VEmojiPicker :customEmojis="emojis" :continuousList="true" v-if="visible" :dark="true" />
     </div>
     <button @click="changeEmojis">Change</button>
     <button @click="changeVisibleEmojis">Toogle View</button>

src/VEmojiPicker.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="EmojiPicker">
+  <div id="EmojiPicker" :class="['emoji-picker', {dark}]">
     <Categories
       v-if="showCategories"
       :categories="categoriesFiltered"
@@ -54,6 +54,7 @@ export default class VEmojiPicker extends Vue {
   @Prop({ default: true }) emojiWithBorder!: boolean;
   @Prop({ default: true }) showSearch!: boolean;
   @Prop({ default: true }) showCategories!: boolean;
+  @Prop({ default: false }) dark!: boolean;
   @Prop({ default: "Peoples" }) initialCategory!: string;
   @Prop({ default: () => [] as ICategory[] }) exceptCategories!: ICategory[];
   @Prop({ default: () => [] as Emoji[] }) exceptEmojis!: IEmoji[];
@@ -167,17 +168,23 @@ export default class VEmojiPicker extends Vue {
 }
 </script>
 
-<style lang="scss">
-#EmojiPicker {
+<style lang="scss" scoped>
+.emoji-picker {
+  --ep-color-bg: #f0f0f0;
+  --ep-color-sbg: #f6f6f6;
+  --ep-color-border: #e4e4e4;
+  --ep-color-text: #4a4a4a;
+  --ep-color-active: #009688;
+
   display: inline-flex;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeSpeed;
   flex-direction: column;
   align-items: center;
-  background: #f0f0f0;
+  background-color: var(--ep-color-bg);
   border-radius: 4px;
-  border: 1px solid #e4e4e4;
+  border: 1px solid var(--ep-color-border);
   overflow: hidden;
   width: 325px;
   user-select: none;
@@ -186,4 +193,12 @@ export default class VEmojiPicker extends Vue {
     width: 100%;
   }
 }
+
+.dark {
+  --ep-color-bg: #191B1A;
+  --ep-color-sbg: #212221;
+  --ep-color-border: #3E3D42;
+  --ep-color-text: #f0f0f0;
+  --ep-color-active: #009688;
+}
 </style>

src/components/Categories.vue

@@ -39,9 +39,8 @@ export default class Categories extends Vue {
   width: 100%;
   flex-direction: row;
   align-items: center;
-  border-bottom: 1px solid #e4e4e4;
-  background: #f0f0f0;
-  color: white;
+  border-bottom: 1px solid var(--ep-color-border);
+  background: var(--ep-color-bg);
   overflow-x: auto;
 }
 
@@ -52,7 +51,7 @@ export default class Categories extends Vue {
   cursor: pointer;
 
   &.active {
-    border-bottom: 3px solid #009688;
+    border-bottom: 3px solid var(--ep-color-active);
     filter: saturate(3);
     padding-bottom: 2px;
   }

src/components/EmojiList.vue

@@ -137,25 +137,14 @@ export default class EmojiList extends Vue {
   display: block;
   width: 100%;
   max-width: 100%;
+  color: var(--ep-color-text);
+
 
   // Custom Scroll
   ::-webkit-scrollbar {
     border-radius: 4px;
     width: 4px;
-    background: #7c7c7c5b;
-  }
-
-  ::-webkit-scrollbar-track {
-    border-radius: 4px;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    border-radius: 4px;
-    background: #00000038;
-
-    &:hover {
-      background: #00000062;
-    }
+    overflow: hidden;
   }
 }
 

src/components/InputSearch.vue

@@ -51,9 +51,9 @@ export default class InputSearch extends Vue {
     padding: 6px 8px;
     box-sizing: border-box;
     border-radius: 8px;
-    background: #f6f6f6;
-    color: #4a4a4a;
-    border: 1px solid #e2e2e2;
+    background: var(--ep-color-sbg);
+    color: var(--ep-color-text);
+    border: 1px solid var(--ep-color-border);
   }
 }
 </style>