Added option to specify a custom user stylesheet (#44)

oliverschwendener · Aug 2, 2018 · 589a488 · 589a488
1 parent cfdcc71
commit 589a488
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -246,6 +246,7 @@ All settings are stored in `~/ueli.config.json`. You can modify this file to cha
 * `searchResultNameFontSize` Number - Represents the font size of the search result name in pixels
 * `userInputFontSize` Number - Represents the font size of the user input in pixels
 * `userInputHeight` Number - Represents the height of the user input box in pixels
+* `userStylesheet` String - Represents a path to a local stylesheet to modify the appearance of the window.
 * `webSearches` Array of webSearch Objects - A list of [web search engines](#web-search-engines)
     * `webSearch` Object - Defines a web search engine
         * `icon` String - Represents the svg icon for the specific web search engine
@@ -264,6 +265,31 @@ All settings are stored in `~/ueli.config.json`. You can modify this file to cha
 * `light`
 * `light-mono`
 
+#### Custom color themes
+
+You can customize your own color theme with a CSS file on your computer!
+
+1. Create a CSS file on your computer.
+2. Add CSS variables in the `:root` section. For example:
+
+    ``` CSS
+    :root {
+        --background-color: #21252b;
+        --text-color: #ccc;
+        --accent-color: #333842;
+        --accent-text-color: #fff;
+        --mono-font-color: #ccc;
+        --scrollbar-foreground-color: #3d444f;
+        --scrollbar-background-color: #1f2328;
+    }
+    ```
+
+3. In the [customization](#customization) set `userStylesheet` to the CSS file you just created.
+
+4. Reload ueli.
+
+> You can completly overwrite uelis behaviour with your CSS file! See the [base stylesheet](https://github.com/oliverschwendener/ueli/tree/master/styles/app.css) of ueli.
+
 ## Privacy
 
 For better search results ueli is keeping track of the applications, files and folders you are accessing. All information is stored in `~/ueli.count.json`. If you don't want ueli to track your executions simply delete that file's content and disable logging via the [customization](#customization).

diff --git a/main.html b/main.html
@@ -10,8 +10,9 @@
 <body>
 
     <div id="vue-root">
-        <link rel="stylesheet" :href="stylesheetPath">
         <link rel="stylesheet" href="./styles/app.css">
+        <link rel="stylesheet" :href="colorTheme">
+        <link rel="stylesheet" v-if="userStylesheetIsAvailable" :href="userStylesheet">
 
         <div class="container">
 

diff --git a/src/ts/config-options.ts b/src/ts/config-options.ts
@@ -25,6 +25,7 @@ export interface ConfigOptions {
     showTrayIcon: boolean;
     userInputHeight: number;
     userInputFontSize: number;
+    userStylesheet: string;
     webSearches: WebSearch[];
     windowWith: number;
 }
diff --git a/src/ts/default-config.ts b/src/ts/default-config.ts
@@ -40,6 +40,7 @@ export const defaultConfig: ConfigOptions = {
     showTrayIcon: true,
     userInputFontSize: 36,
     userInputHeight: 80,
+    userStylesheet: "",
     webSearches: [
         {
             icon: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" version="1.1">

diff --git a/src/ts/renderer.ts b/src/ts/renderer.ts
@@ -2,12 +2,12 @@ import { SearchResultItemViewModel } from "./search-result-item-view-model";
 import { IpcChannels } from "./ipc-channels";
 import { platform } from "os";
 import { ipcRenderer } from "electron";
-import Vue from "vue";
 import { ConfigFileRepository } from "./config-file-repository";
 import { UeliHelpers } from "./helpers/ueli-helpers";
 import { defaultConfig } from "./default-config";
 import { UserInputHistoryManager } from "./user-input-history-manager";
 import { Injector } from "./injector";
+import Vue from "vue";
 
 const config = new ConfigFileRepository(defaultConfig, UeliHelpers.configFilePath).getConfig();
 const userInputHistoryManager = new UserInputHistoryManager();
@@ -18,11 +18,13 @@ document.addEventListener("keyup", handleGlobalKeyPress);
 const vue = new Vue({
     data: {
         autoFocus: true,
+        colorTheme: `./styles/${config.colorTheme}.css`,
         commandLineOutput: [] as string[],
         searchIcon: iconSet.searchIcon,
         searchResults: [] as SearchResultItemViewModel[],
-        stylesheetPath: `./styles/${config.colorTheme}.css`,
         userInput: "",
+        userStylesheet: `file:///${config.userStylesheet}`,
+        userStylesheetIsAvailable: config.userStylesheet !== undefined && config.userStylesheet.length > 0,
     },
     el: "#vue-root",
     methods: {