From 646d289ead1e69ae294c70d58d26945281f7922b Mon Sep 17 00:00:00 2001
From: Alkl58 <34812414+Alkl58@users.noreply.github.com>
Date: Mon, 27 Apr 2020 00:10:38 +0200
Subject: [PATCH] Created Customizing UI Colors (markdown)

---
 Customizing-UI-Colors.md | 86 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 86 insertions(+)
 create mode 100644 Customizing-UI-Colors.md

diff --git a/Customizing-UI-Colors.md b/Customizing-UI-Colors.md
new file mode 100644
index 0000000..72da859
--- /dev/null
+++ b/Customizing-UI-Colors.md
@@ -0,0 +1,86 @@
+This small Guide is for the docker version of szurubooru!
+
+This tutorial is based on https://github.com/rr-/szurubooru/issues/302
+
+If you want to edit the colors of the UI you have to follow these steps:
+
+1. Modify the `docker-compose.yml`:
+
+![](https://i.imgur.com/Pz47cwJ.png)
+
+*  remove the red marked "image: ..." part
+*  add the green marked "builds: ..." part
+
+(side note: don't use tab spaces, use normal spacebar spaces)
+
+
+2. Edit the `colors.styl` in "/client/css/":
+
+<details open>
+<summary>Here is my darkmode stylesheet</summary>
+
+```css
+$main-color = #24AADD
+$window-color = #1a1a1a
+$top-navigation-color = #333333
+$text-color = #e6e6e6
+$inactive-link-color = #cccccc
+$line-color = #a6a6a6
+$inactive-tab-text-color = $inactive-link-color
+$active-tab-text-color = $text-color
+$active-tab-background-color = rgba(0, 0, 0, 0.06)
+$focused-tab-background-color = rgba(0, 0, 0, 0.03)
+$message-info-border-color = #1E1E1E
+$message-info-background-color = #164469
+$message-error-border-color = #FCC
+$message-error-background-color = #FFF5F5
+$message-success-border-color = #D3E3D3
+$message-success-background-color = #004d00
+$input-bad-border-color = #FCC
+$input-bad-background-color = #FFF5F5
+$input-good-border-color = #D3E3D3
+$input-good-background-color = #004d00
+$input-enabled-background-color = #404040
+$input-enabled-border-color = #EEE
+$input-enabled-text-color = $text-color
+$input-disabled-background-color = #0d0d0d
+$input-disabled-border-color = #EEE
+$input-disabled-text-color = #888
+$button-enabled-text-color = white
+$button-enabled-background-color = $main-color
+$button-disabled-text-color = #666
+$button-disabled-background-color = #CCC
+$post-thumbnail-border-color = $main-color
+$post-thumbnail-no-tags-border-color = #F44
+$default-tag-category-background-color = $active-tab-background-color
+$new-tag-background-color = #DFC
+$new-tag-text-color = black
+$implied-tag-background-color = #FFC
+$implied-tag-text-color = black
+$tag-suggestions-background-color = $window-color
+$tag-suggestions-header-color = #EEE
+$tag-suggestions-border-color = #AAA
+$duplicate-tag-background-color = #FDC
+$duplicate-tag-text-color = black
+$active-note-overlay-background-color = rgba(255, 255, 255, 0.3)
+$active-note-overlay-border-color = rgba(62, 255, 62, 0.8)
+$note-background-color = rgba(255, 255, 205, 0.3)
+$note-border-color = rgba(0, 0, 0, 0.2)
+$edited-note-background-color = rgba(222, 255, 222, 0.3)
+$edited-note-border-color = rgba(0, 200, 0, 0.9)
+$note-text-background-color = lemonchiffon
+$note-text-border-color = black
+$note-text-text-color = black
+$first-note-point-color = orangered
+$hovered-note-point-color = red
+$hovered-first-note-point-color = red
+$safety-safe = #88D488
+$safety-sketchy = #F3D75F
+$safety-unsafe = #F3985F
+$scrollbar-thumb-color = $main-color
+$scrollbar-bg-color = $input-enabled-background-color
+```
+</details>
+
+3. Run `sudo docker-compose build`
+4. Finally, run `docker-compose up -d`
\ No newline at end of file