From 589a4885a3480d13a0ac72e7651550d4fe1b4e11 Mon Sep 17 00:00:00 2001 From: Oliver Schwendener Date: Thu, 2 Aug 2018 19:43:17 +0200 Subject: [PATCH] Added option to specify a custom user stylesheet (#44) --- README.md | 26 ++++++++++++++++++++++++++ main.html | 3 ++- src/ts/config-options.ts | 1 + src/ts/default-config.ts | 1 + src/ts/renderer.ts | 6 ++++-- 5 files changed, 34 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 1259cabde..6f1cf1475 100644 --- 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 index ef831c26d..a603f0b7f 100644 --- a/main.html +++ b/main.html @@ -10,8 +10,9 @@
- + +
diff --git a/src/ts/config-options.ts b/src/ts/config-options.ts index 2d0e48b6b..d3abbf123 100644 --- 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 index ee3832f51..4d5808e31 100644 --- 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: ` diff --git a/src/ts/renderer.ts b/src/ts/renderer.ts index c0af4099e..562e4bdda 100644 --- 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: {