added github themes (#6)

necessarylion · Mar 28, 2023 · e8846db · e8846db
1 parent 2719b57
commit e8846db
Show file tree

Hide file tree

Showing 13 changed files with 187 additions and 37 deletions.
diff --git a/README.md b/README.md
@@ -10,8 +10,6 @@ Compatible with
 - Vue
 - Angular
 
-<img width="350" src="https://raw.githubusercontent.com/necessarylion/search-js/main/demo/demo1.png" />
-
 #### Install via cdn
 
 ```html
@@ -99,27 +97,47 @@ searchJs.open()
 
 #### Available Options
 
-| **Name**             | **Required** | **Description**                                         |
-| -------------------- | :----------: | ------------------------------------------------------- |
-| `data`               |     YES      | data to search                                          |
-| `data.title`         |     YES      | data title                                              |
-| `data.description`   |      NO      | data description                                        |
-| `element`            |      NO      | element to append search-js                             |
-| `darkMode`           |      NO      | default `false`. set `true` for dark mode               |
-| `width`              |      NO      | modal width default (400px)                             |
-| `search`             |              |                                                         |
-| `search.icon`        |      NO      | svg icon string for search input                        |
-| `search.placeholder` |      NO      | placeholder text for search input (default `Search`)    |
-| `positionTop`        |      NO      | default `85px`                                          |
-| `onSelected`         |     YES      | callback function that will trigger after item selected |
-| `onSearch`           |      NO      | this function will trigger when user type something     |
+| **Name**             | **Required** | **Description**                                                     |
+| -------------------- | :----------: | ------------------------------------------------------------------- |
+| `data`               |     YES      | data to search                                                      |
+| `data.title`         |     YES      | data title                                                          |
+| `data.description`   |      NO      | data description                                                    |
+| `element`            |      NO      | element to append search-js                                         |
+| `theme`              |      NO      | color code or theme name ('#FF2E1F', 'github-light', 'github-dark') |
+| `darkMode`           |      NO      | default `false`. set `true` for dark mode                           |
+| `width`              |      NO      | modal width default (400px)                                         |
+| `search`             |              |                                                                     |
+| `search.icon`        |      NO      | svg icon string for search input                                    |
+| `search.placeholder` |      NO      | placeholder text for search input (default `Search`)                |
+| `positionTop`        |      NO      | default `85px`                                                      |
+| `onSelected`         |     YES      | callback function that will trigger after item selected             |
+| `onSearch`           |      NO      | this function will trigger when user type something                 |
 
 #### Available functions
 
 - `open()` function will trigger to open search menu
 - `close()` function will trigger to close search menu
 - Alternatively press `cmd + k` or `ctrl + k` to open search menu and `ESC` to close menu
 
+#### Theme
+
+#### Available ready made theme
+
+- `github-dark`
+- `github-light`
+
+##### Github Dark (github-dark)
+<img width="350" src="https://raw.githubusercontent.com/necessarylion/search-js/main/demo/github-dark.png" />
+
+##### Github Light (github-light)
+<img width="350" src="https://raw.githubusercontent.com/necessarylion/search-js/main/demo/github-light.png" />
+
+##### Light Theme with color code
+<img width="350" src="https://raw.githubusercontent.com/necessarylion/search-js/main/demo/dark-theme.png" />
+
+##### Dark Theme with color code
+<img width="350" src="https://raw.githubusercontent.com/necessarylion/search-js/main/demo/light-theme.png" />
+
 #### Sample code with API call
 
 ```js

diff --git a/demo/dark-theme.png b/demo/dark-theme.png
diff --git a/demo/demo1.png b/demo/demo1.png
diff --git a/demo/demo2.png b/demo/demo2.png
diff --git a/demo/github-dark.png b/demo/github-dark.png
diff --git a/demo/github-light.png b/demo/github-light.png
diff --git a/demo/light-theme.png b/demo/light-theme.png
diff --git a/index.html b/index.html
@@ -10,6 +10,7 @@
     <style>
       body {
         font-family: 'Source Sans Pro', sans-serif;
+        background-color: #424243;
       }
     </style>
   </head>
@@ -24,13 +25,12 @@
     }
 
     const searchJs = SearchJS({
-      theme: '#FF2E1F',
+      theme: 'github-dark',
       width: '600px',
-      darkMode: true,
       positionTop: '50px',
       data: [],
       search : {
-        placeholder: 'Search docs'
+        placeholder: 'Search products'
       },
       onSelected : (route) => {
         console.log(route)

diff --git a/src/assets/css/github.scss b/src/assets/css/github.scss
@@ -0,0 +1,82 @@
+#search-js.github-dark.container {
+  .modal {
+    border: 1px solid #30363d;
+
+    .modal-header {
+      padding: 0px;
+      border-bottom: 1px solid #30363d;
+
+      .search-container {
+        .search-icon {
+          width: 50px;
+          svg {
+            fill: var(--search-js-input-placeholder-color);
+          }
+        }
+      }
+    }
+
+    .modal-content {
+      .items {
+        .item:hover {
+          background: #161b22;
+        }
+      }
+    }
+
+    .modal-footer {
+      .keyboard-button {
+        border: 1px solid #30363d;
+        border-radius: 4px;
+        padding: 0px 2px;
+      }
+    }
+  }
+}
+
+#search-js.github-light.container {
+  .modal {
+    border: 1px solid #d0d7de;
+
+    .modal-header {
+      padding: 0px;
+      border-bottom: 1px solid #d0d7de;
+
+      .search-container {
+        .search-icon {
+          width: 50px;
+          svg {
+            fill: var(--search-js-input-placeholder-color);
+          }
+        }
+      }
+    }
+
+    .modal-content {
+      .items {
+        .item:hover {
+          background: #f6f8fa;
+
+          svg path {
+            stroke: var(--search-js-text-color) !important;
+          }
+
+          .item-title {
+            color: var(--search-js-text-color);
+          }
+          .item-description {
+            color: var(--search-js-text-color);
+          }
+        }
+      }
+    }
+
+    .modal-footer {
+      .keyboard-button {
+        border: 1px solid #d0d7de;
+        border-radius: 4px;
+        padding: 0px 2px;
+      }
+    }
+  }
+}
diff --git a/src/index.ts b/src/index.ts
@@ -1,4 +1,5 @@
 import './assets/css/index.scss'
+import './assets/css/github.scss'
 import { DomListener } from './utils/DomListener'
 import { SearchJSConfig } from './types'
 import { SearchComponent } from './utils/SearchComponent'

diff --git a/src/utils/SearchComponent.ts b/src/utils/SearchComponent.ts
@@ -80,22 +80,21 @@ export class SearchComponent {
     document.head.appendChild(style)
     style.innerHTML = `
       :root {
-        ${
-          this.app.config.darkMode
-            ? Theme.getDarkThemeVariable()
-            : Theme.getLightThemeVariable()
-        }
         --search-js-width: ${this.app.config.width ?? '400px'};
         --search-js-height: ${this.app.config.height ?? '450px'};
         --search-js-theme: ${this.app.config.theme ?? '#FF2E1F'};
         --search-js-font-family: ${fontFamily};
-        --search-js-top: ${this.app.config.positionTop ?? '85px'}
+        --search-js-top: ${this.app.config.positionTop ?? '85px'};
+        ${Theme.getTheme(this.app.config)}
       }`
   }
 
   private createElement() {
     const element = document.createElement('div')
     element.id = 'search-js'
+    if (Theme.readyMadeThemes.includes(this.app.config.theme)) {
+      element.classList.add(this.app.config.theme)
+    }
     element.classList.add('container')
 
     const footer = new Footer()

diff --git a/src/utils/Theme.ts b/src/utils/Theme.ts
@@ -1,4 +1,20 @@
+import { SearchJSConfig } from '../types'
+
 export class Theme {
+  public static readyMadeThemes: Array<string> = ['github-dark', 'github-light']
+
+  public static getTheme(config: SearchJSConfig) {
+    if (config.theme == 'github-dark') {
+      return Theme.getGithubDarkTheme()
+    }
+    if (config.theme == 'github-light') {
+      return Theme.getGithubLightTheme()
+    }
+    return config.darkMode
+      ? Theme.getDarkThemeVariable()
+      : Theme.getLightThemeVariable()
+  }
+
   public static getLightThemeVariable() {
     return `
       --search-js-backdrop-bg: rgba(101, 108, 133, 0.8);
@@ -17,17 +33,51 @@ export class Theme {
 
   public static getDarkThemeVariable() {
     return `
-    --search-js-backdrop-bg: rgba(47, 55, 69, 0.7);
-    --search-js-modal-bg: #1b1b1d;
-    --search-js-modal-box-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
-    --search-js-modal-footer-box-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5), 0 -4px 8px 0 rgba(0, 0, 0, 0.2);
-    --search-js-keyboard-button-box-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, 0 2px 2px 0 rgba(3, 4, 9, 0.3);
-    --search-js-keyboard-button-bg: linear-gradient(-26.5deg, var(--ifm-color-emphasis-200) 0%, var(--ifm-color-emphasis-100) 100%);
-    --search-js-search-input-bg: black;
-    --search-js-item-bg: #1c1e21;
-    --search-js-text-color: #b3b3b3;
-    --search-js-input-placeholder-color: #aeaeae;
-    --search-js-item-box-shadow: none;
+      --search-js-backdrop-bg: rgba(47, 55, 69, 0.7);
+      --search-js-modal-bg: #1b1b1d;
+      --search-js-modal-box-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
+      --search-js-modal-footer-box-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5), 0 -4px 8px 0 rgba(0, 0, 0, 0.2);
+      --search-js-keyboard-button-box-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, 0 2px 2px 0 rgba(3, 4, 9, 0.3);
+      --search-js-keyboard-button-bg: linear-gradient(-26.5deg, var(--ifm-color-emphasis-200) 0%, var(--ifm-color-emphasis-100) 100%);
+      --search-js-search-input-bg: black;
+      --search-js-item-bg: #1c1e21;
+      --search-js-text-color: #b3b3b3;
+      --search-js-input-placeholder-color: #aeaeae;
+      --search-js-item-box-shadow: none;
+    `
+  }
+
+  public static getGithubDarkTheme() {
+    return `
+      --search-js-backdrop-bg: rgba(1,4,9,0.8);
+      --search-js-modal-bg: #0D1116;
+      --search-js-modal-box-shadow: none;
+      --search-js-modal-footer-box-shadow: none;
+      --search-js-keyboard-button-box-shadow: none;
+      --search-js-keyboard-button-bg: linear-gradient(-26.5deg, var(--ifm-color-emphasis-200) 0%, var(--ifm-color-emphasis-100) 100%);
+      --search-js-search-input-bg: transparent;
+      --search-js-item-bg: transparent;
+      --search-js-text-color: #C5CED6;
+      --search-js-input-placeholder-color: #6D7681;
+      --search-js-item-box-shadow: none;
+      --search-js-theme: transparent;
+    `
+  }
+
+  public static getGithubLightTheme() {
+    return `
+      --search-js-backdrop-bg: rgba(27,31,36,0.5);;
+      --search-js-modal-bg: #FFFFFF;
+      --search-js-modal-box-shadow: none;
+      --search-js-modal-footer-box-shadow: none;
+      --search-js-keyboard-button-box-shadow: none;
+      --search-js-keyboard-button-bg: linear-gradient(-26.5deg, var(--ifm-color-emphasis-200) 0%, var(--ifm-color-emphasis-100) 100%);
+      --search-js-search-input-bg: transparent;
+      --search-js-item-bg: transparent;
+      --search-js-text-color: #1F2329;
+      --search-js-input-placeholder-color: #6E7781;
+      --search-js-item-box-shadow: none;
+      --search-js-theme: transparent;
     `
   }
 }
diff --git a/tsconfig.json b/tsconfig.json
@@ -8,7 +8,7 @@
     "noImplicitAny": true,
     "module": "es6",
     "target": "es6",
-    "lib": ["es2015", "dom"],
+    "lib": ["es2015", "dom", "es2017"],
     "jsx": "react",
     "allowJs": true,
     "moduleResolution": "node"