Configurable colors (#76)

* Making search result colors configurable

* Adding options to customize search result colors and width of color stripe

---------

Co-authored-by: Simon Heimler <mail@simon-heimler.de>

CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## [v1.8.4]
 
+- **NEW**: Added options to configure the color and the width of the color stripe of search results
+  - `colorStripeWidth` to set the width
+  - `bookmarkColor` and similar to set the color (expressed as CSS color)
 - **NEW**: When hovering over an URL, the full URL is displayed as a hover. Requested via [#74](https://github.com/Fannon/search-bookmarks-history-and-tabs/issues/74)
 - **IMPROVED**: Updated dependencies
 

README.md

@@ -107,6 +107,8 @@ historyMaxItems: 1200
 historyIgnoreList:
   - http://localhost
   - http://127.0.0.1
+colorStripeWidth: 4 # Customize width of search result color stripe
+bookmarkColor: '#46e6e6' # customize color for bookmark results
 scoreTabBaseScore: 70 # customize base score for open tabs
 searchEngineChoices:
   - name: Google

popup/js/model/options.js

@@ -45,6 +45,36 @@ export const defaultOptions = {
    */
   searchFuzzyness: 0.6,
 
+  //////////////////////////////////////////
+  // COLORS AND STYLE                     //
+  //////////////////////////////////////////
+
+  /**
+   * Width of the left color marker in search results in pixels
+   */
+  colorStripeWidth: 6,
+
+  /**
+   * Color for bookmark results, expressed as CSS color
+   */
+  bookmarkColor: '#54afaf',
+  /**
+   * Color for tab results, expressed as CSS color
+   */
+  tabColor: '#b89aff',
+  /**
+   * Color for history results, expressed as CSS color
+   */
+  historyColor: '#9ece2f',
+  /**
+   * Color for search results, expressed as CSS color
+   */
+  searchColor: '#e1a535',
+  /**
+   * Color for custom search results, expressed as CSS color
+   */
+  customSearchColor: '#ce5c2f',
+
   //////////////////////////////////////////
   // SEARCH SOURCES                       //
   //////////////////////////////////////////

popup/js/view/searchView.js

@@ -29,6 +29,10 @@ export function renderSearchResults(result) {
     resultListItem.setAttribute('x-open-url', resultEntry.originalUrl)
     resultListItem.setAttribute('x-index', i)
     resultListItem.setAttribute('x-original-id', resultEntry.originalId)
+    resultListItem.setAttribute(
+      'style',
+      `border-left: ${ext.opts.colorStripeWidth}px solid ${ext.opts[resultEntry.type + 'Color']}`,
+    )
 
     // Create edit button / image
     if (resultEntry.type === 'bookmark') {

sass/style.scss

@@ -195,25 +195,11 @@ code {
     border-radius: 3px;
     overflow: hidden;
     cursor: pointer;
+    border-left: 6px solid #ccc;
   }
   #selected-result {
     background-color: #dadada;
   }
-  li.tab {
-    border-left: 6px solid #b89aff;
-  }
-  li.bookmark {
-    border-left: 6px solid #559292;
-  }
-  li.history {
-    border-left: 6px solid rgb(158, 206, 47);
-  }
-  li.search {
-    border-left: 6px solid rgb(206, 150, 47);
-  }
-  li.customSearch {
-    border-left: 6px solid rgb(206, 92, 47);
-  }
   li.error {
     color: rgb(204, 88, 88);
     border-left: 6px solid rgb(204, 88, 88);