feat(theme): search hightlight in doramon shell

Author: mydearxym

containers/Doraemon/ResultsList.js

@@ -50,7 +50,7 @@ const ResultsList = ({ searchValue, searchThread, suggestions, activeRaw }) => (
           <ContentWraper>
             <Title>
               <Highlighter
-                highlightClassName="YourHighlightClass"
+                highlightClassName="doramon-search-highlighter"
                 searchWords={[searchValue]}
                 autoEscape
                 textToHighlight={suggestion.title}

containers/ThemeWrapper/GlobalStyle.js

@@ -18,7 +18,7 @@ const GlobalStyle = createGlobalStyle`
   body {
     ${cs.media.mobile`
       position: relative;
-    `};
+`};
   }
   *::-moz-selection {
     background-color: ${theme('selectionBg')} !important;
@@ -132,6 +132,12 @@ const GlobalStyle = createGlobalStyle`
       text-decoration: underline;
     }
   }
+
+  .doramon-search-highlighter {
+    background-color: ${theme('searchHighlight.doramonBg')};
+    padding: 0 1px;
+    color: ${theme('searchHighlight.doramonFg')};
+  }
 `
 
 export default GlobalStyle

utils/themes/skins/cyan.js

@@ -313,6 +313,10 @@ const cyan = {
     border: '#e8e8e8',
     hoverBg: '#fffef1',
   },
+  searchHighlight: {
+    doramonFg: '#F6DE38',
+    doramonBg: 'transparent',
+  },
 }
 
 export default cyan

utils/themes/skins/github.js

@@ -314,6 +314,10 @@ const github = {
     border: '#004657',
     hoverBg: '#285769',
   },
+  searchHighlight: {
+    doramonFg: 'orange',
+    doramonBg: 'transparent',
+  },
 }
 
 export default github

utils/themes/skins/green.js

@@ -304,6 +304,10 @@ const green = {
     border: '#004657',
     hoverBg: '#285769',
   },
+  searchHighlight: {
+    doramonFg: 'orange',
+    doramonBg: 'transparent',
+  },
 }
 
 export default green

utils/themes/skins/iron_green.js

@@ -307,6 +307,10 @@ const iconGreen = {
     border: '#004657',
     hoverBg: '#285769',
   },
+  searchHighlight: {
+    doramonFg: 'orange',
+    doramonBg: 'transparent',
+  },
 }
 
 export default iconGreen

utils/themes/skins/monokai.js

@@ -308,6 +308,10 @@ const monokai = {
     border: '#004657',
     hoverBg: '#285769',
   },
+  searchHighlight: {
+    doramonFg: 'orange',
+    doramonBg: 'transparent',
+  },
 }
 
 export default monokai

utils/themes/skins/purple.js

@@ -312,6 +312,10 @@ const purple = {
     border: '#004657',
     hoverBg: '#285769',
   },
+  searchHighlight: {
+    doramonFg: 'orange',
+    doramonBg: 'transparent',
+  },
 }
 
 export default purple

utils/themes/skins/solarized_dark.js

@@ -228,11 +228,11 @@ const solarizedDark = {
   },
   shell: {
     link: lighten(0.2, contentBg),
-    searchInput: lighten(0.1, contentBg),
+    searchInput: lighten(0.2, contentBg),
     searchIcon: lighten(0.1, contentBg),
     barBg: darken(0.01, contentBg),
     border: lighten(0.05, contentBg),
-    title: lighten(0.4, contentBg),
+    title: lighten(0.3, contentBg),
     desc: lighten(0.2, contentBg),
     activeBg: lighten(0.05, contentBg),
   },
@@ -313,6 +313,10 @@ const solarizedDark = {
     border: '#004657',
     hoverBg: '#285769',
   },
+  searchHighlight: {
+    doramonFg: 'orange',
+    doramonBg: 'transparent',
+  },
 }
 
 export default solarizedDark

utils/themes/skins/yellow.js

@@ -311,6 +311,10 @@ const yellow = {
     border: '#004657',
     hoverBg: '#285769',
   },
+  searchHighlight: {
+    doramonFg: 'orange',
+    doramonBg: 'transparent',
+  },
 }
 
 export default yellow