diff --git a/README.md b/README.md
index f37d517..d0dfd76 100644
--- a/README.md
+++ b/README.md
@@ -10,8 +10,6 @@ Compatible with
- Vue
- Angular
-
-
#### Install via cdn
```html
@@ -99,20 +97,21 @@ 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
@@ -120,6 +119,25 @@ searchJs.open()
- `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)
+
+
+##### Github Light (github-light)
+
+
+##### Light Theme with color code
+
+
+##### Dark Theme with color code
+
+
#### Sample code with API call
```js
diff --git a/demo/dark-theme.png b/demo/dark-theme.png
new file mode 100644
index 0000000..332add3
Binary files /dev/null and b/demo/dark-theme.png differ
diff --git a/demo/demo1.png b/demo/demo1.png
deleted file mode 100644
index 1c1348e..0000000
Binary files a/demo/demo1.png and /dev/null differ
diff --git a/demo/demo2.png b/demo/demo2.png
deleted file mode 100644
index 96216ca..0000000
Binary files a/demo/demo2.png and /dev/null differ
diff --git a/demo/github-dark.png b/demo/github-dark.png
new file mode 100644
index 0000000..7bf6e44
Binary files /dev/null and b/demo/github-dark.png differ
diff --git a/demo/github-light.png b/demo/github-light.png
new file mode 100644
index 0000000..8f56a2a
Binary files /dev/null and b/demo/github-light.png differ
diff --git a/demo/light-theme.png b/demo/light-theme.png
new file mode 100644
index 0000000..56c649a
Binary files /dev/null and b/demo/light-theme.png differ
diff --git a/index.html b/index.html
index a1ad3bd..382b0c5 100644
--- a/index.html
+++ b/index.html
@@ -10,6 +10,7 @@
@@ -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
new file mode 100644
index 0000000..97d5241
--- /dev/null
+++ 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
index 0719938..c1df637 100644
--- 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
index e309014..2600862 100644
--- 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
index b7aa606..ce7a9a4 100644
--- 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 = ['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
index 5c25b69..90e0ff2 100644
--- 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"