1 Customizing UI Colors

Alkl58 edited this page 2020-04-27 00:10:38 +02:00

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:

• 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/":

Here is my darkmode stylesheet

$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

3. Run sudo docker-compose build
4. Finally, run docker-compose up -d