Merge remote-tracking branch 'origin/master' into hunternif

# Conflicts:
#	client/css/post-content-control.styl
#	client/css/post-list-view.styl
#	client/html/post_edit_sidebar.tpl
#	client/js/controllers/post_list_controller.js
#	client/js/controllers/post_main_controller.js
#	client/js/controllers/post_upload_controller.js
#	client/js/controllers/tag_controller.js
#	client/js/controllers/user_list_controller.js
#	client/js/controls/expander_control.js
#	client/js/controls/post_content_control.js
#	client/js/controls/post_edit_sidebar_control.js
#	client/js/controls/post_readonly_sidebar_control.js
#	client/js/controls/tag_input_control.js
#	client/js/main.js
#	client/js/models/abstract_list.js
#	client/js/models/post.js
#	client/js/models/post_list.js
#	client/js/models/settings.js
#	client/js/models/tag.js
#	client/js/models/tag_list.js
#	client/js/tags.js
#	client/js/util/search.js
#	client/js/util/touch.js
#	client/js/util/uri.js
#	client/js/util/views.js
#	client/js/views/post_main_view.js
#	client/js/views/post_upload_view.js
#	client/js/views/posts_header_view.js
#	client/js/views/posts_page_view.js
#	client/js/views/settings_view.js
#	client/js/views/tag_view.js
#	client/package-lock.json
#	client/package.json
#	server/config.yaml.dist
#	server/szurubooru/api/__init__.py
#	server/szurubooru/api/post_api.py
#	server/szurubooru/api/tag_api.py
#	server/szurubooru/func/posts.py
#	server/szurubooru/func/tags.py
#	server/szurubooru/model/__init__.py
#	server/szurubooru/model/post.py
#	server/szurubooru/model/tag.py
#	server/szurubooru/search/configs/__init__.py
#	server/szurubooru/search/configs/post_search_config.py
#	server/szurubooru/search/executor.py
#	server/szurubooru/tests/api/test_post_retrieving.py
#	server/szurubooru/tests/api/test_post_updating.py
#	server/szurubooru/tests/api/test_tag_updating.py
#	server/szurubooru/tests/conftest.py
#	server/szurubooru/tests/func/test_posts.py
#	server/szurubooru/tests/func/test_tags.py
#	server/szurubooru/tests/search/configs/test_post_search_config.py

20 files changed, 427 insertions, 20 deletions

diff --git a/client/css/colors.styl b/client/css/colors.styl
index 3be05fe..cf7e7ca 100644
--- a/client/css/colors.styl
+++ b/client/css/colors.styl
@@ -1,13 +1,17 @@
 $main-color = #24AADD
 $window-color = white
+$window-color-darktheme = #1a1a1a
 $top-navigation-color = #F5F5F5
+$top-navigation-color-darktheme = #333333
 $text-color = #111
+$text-color-darktheme = #e6e6e6
 $inactive-link-color = #888
+$inactive-link-color-darktheme = #cccccc
 $line-color = #DDD
-$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)
+$active-tab-background-color-darktheme = rgba(255, 255, 255, 0.06)
+$focused-tab-background-color-darktheme = rgba(255, 255, 255, 0.03)
 $message-info-border-color = #BDF
 $message-info-background-color = #E3EFF9
 $message-error-border-color = #FCC
@@ -21,6 +25,7 @@ $input-good-background-color = #F5FFF5
 $input-enabled-background-color = #FAFAFA
 $input-enabled-border-color = #EEE
 $input-enabled-text-color = $text-color
+$input-enabled-text-color-darktheme = $text-color-darktheme
 $input-disabled-background-color = #FAFAFA
 $input-disabled-border-color = #EEE
 $input-disabled-text-color = #888
@@ -35,7 +40,6 @@ $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
@@ -57,3 +61,4 @@ $safety-sketchy = #F3D75F
 $safety-unsafe = #F3985F
 $scrollbar-thumb-color = $main-color
 $scrollbar-bg-color = $input-enabled-background-color
+$transparency-grid-square-color = #F0F0F0
diff --git a/client/css/comment-control.styl b/client/css/comment-control.styl
index 7e98171..0d5959b 100644
--- a/client/css/comment-control.styl
+++ b/client/css/comment-control.styl
@@ -1,5 +1,7 @@
 @import colors
 $comment-header-background-color = $top-navigation-color
+$comment-header-background-color-darktheme = $top-navigation-color-darktheme
+
 $comment-border-color = #DDD
 
 .comment-container
@@ -81,7 +83,7 @@ $comment-border-color = #DDD
 
             .edit, .delete, .score-container a, .nickname a
                 &:not(.inactive)
-                    color: mix($main-color, $inactive-tab-text-color)
+                    color: mix($main-color, $inactive-link-color)
 
             i
                 margin-right: 0.3em
@@ -112,6 +114,17 @@ $comment-border-color = #DDD
         .messages
             margin: 1em 0
 
+.darktheme .comment-container .comment header
+    background: $comment-header-background-color-darktheme
+    nav.edit
+        ul
+            li
+                &.active
+                    background: $window-color-darktheme
+                    border-bottom: 1px solid $window-color-darktheme
+    .edit, .delete, .score-container a, .nickname a
+        &:not(.inactive)
+            color: mix($main-color, $inactive-link-color-darktheme)
 
 .comment-content
     ul, ol
diff --git a/client/css/comment-list-view.styl b/client/css/comment-list-view.styl
index bd50beb..642ba1c 100644
--- a/client/css/comment-list-view.styl
+++ b/client/css/comment-list-view.styl
@@ -1,5 +1,6 @@
 @import colors
 $comment-border-color = $top-navigation-color
+$comment-border-color-darktheme = $top-navigation-color-darktheme
 
 .global-comment-list
     text-align: left
@@ -46,3 +47,8 @@ $comment-border-color = $top-navigation-color
 
         .comments-container
             width: 100%
+
+.darktheme .global-comment-list
+    &>ul
+        &>li
+            border-top: 3px solid $comment-border-color-darktheme
diff --git a/client/css/core-forms.styl b/client/css/core-forms.styl
index bed63e3..ee21ed1 100644
--- a/client/css/core-forms.styl
+++ b/client/css/core-forms.styl
@@ -26,6 +26,10 @@ form:not(.horizontal)
         font-size: 80%
         line-height: 120%
 
+.darktheme form:not(.horizontal)
+    .hint
+        color: $inactive-link-color-darktheme
+
 form.horizontal
     display: inline-block
     margin-bottom: 1em
@@ -167,6 +171,16 @@ input[type=time]
         background: $input-disabled-background-color
         color: $input-disabled-text-color
 
+.darktheme
+    input[type=date],
+    input[type=time]
+        border: 2px solid darken($input-enabled-border-color, 75%)
+        background: darken($input-enabled-background-color, 75%)
+        color: $input-enabled-text-color-darktheme
+        &:disabled
+            background: darken($input-disabled-background-color, 75%)
+        &[readonly]
+            background: darken($input-disabled-background-color, 75%)
 
 
 /*
@@ -204,6 +218,21 @@ input[type=number]
         background: $input-disabled-background-color
         color: $input-disabled-text-color
 
+.darktheme
+    select,
+    textarea,
+    input[type=text],
+    input[type=email],
+    input[type=password],
+    input[type=number]
+        border: 2px solid darken($input-enabled-border-color, 75%)
+        background: darken($input-enabled-background-color, 75%)
+        color: $input-enabled-text-color-darktheme
+        &:disabled
+            background: darken($input-disabled-background-color, 75%)
+        &[readonly]
+            background: darken($input-disabled-background-color, 75%)
+
 input[readonly],
 input[readonly]+.radio,
 input[readonly]+.checkbox,
@@ -242,8 +271,9 @@ form.show-validation .input
         outline: 0
         border: 2px solid $input-good-border-color
         background: $input-good-background-color
-
-
+.darktheme form.show-validation .input
+    input:valid
+        background: darken($input-good-background-color, 75%)
 
 /*
  * Buttons
@@ -310,6 +340,10 @@ input::-moz-focus-inner
         button
             margin-left: 0.5em
 
+.darktheme .file-dropper-holder
+    .file-dropper
+        background: $window-color-darktheme
+
 input[type=file]:disabled+.file-dropper
     cursor: default
     opacity: .5
@@ -319,8 +353,6 @@ input[type=file]:focus+.file-dropper,
 .file-dropper.active
     border-color: $main-color
 
-
-
 .autocomplete
     position: absolute
     z-index: 10
@@ -345,6 +377,10 @@ input[type=file]:focus+.file-dropper,
             .disabled
                 color: $inactive-link-color
 
+.darktheme .autocomplete
+    background: $window-color-darktheme
+    ul li .disabled
+        color: $inactive-link-color-darktheme
 
 .anticomplete
     display: none
diff --git a/client/css/core-general.styl b/client/css/core-general.styl
index 95fa38c..6b481b3 100644
--- a/client/css/core-general.styl
+++ b/client/css/core-general.styl
@@ -1,6 +1,11 @@
 @import colors
 @import mixins
 
+$active-tab-text-color = $text-color
+$active-tab-text-color-darktheme = $text-color-darktheme
+$inactive-tab-text-color = $inactive-link-color
+$inactive-tab-text-color-darktheme = $inactive-link-color-darktheme
+
 /* latin */
 @font-face
     font-family: 'Open Sans';
@@ -28,6 +33,10 @@ body
     @media (max-width: 1200px)
         font-size: 0.95em
 
+body.darktheme
+    color: $text-color-darktheme
+    background: $window-color-darktheme
+
 h1, h2, h3
     font-weight: normal
     margin-bottom: 1em
@@ -62,6 +71,11 @@ a
     .vim-nav-hint
         position: absolute
         visibility: hidden
+.darktheme a
+    &.inactive
+        color: $inactive-link-color-darktheme
+    &.icon
+        color: $inactive-link-color-darktheme
 
 a.append, span.append
     margin-left: 1em
@@ -102,12 +116,19 @@ form .fa-question-circle-o
             >*:last-child
                 margin-bottom: 0
 
+.darktheme #content-holder
+    >.content-wrapper:not(.transparent)
+        background: $top-navigation-color-darktheme
+
 hr
     border: 0
     border-top: 1px solid $line-color
     margin: 1em 0
     padding: 0
 
+.darktheme hr
+    border-top: 1px solid darken($line-color, 25%)
+
 nav
     ul
         list-style-type: none
@@ -205,6 +226,21 @@ nav
             @media (max-width: 1000px)
                 display: none
 
+.darktheme nav
+    &.buttons
+        ul
+            li:not(.active) a
+                color: $inactive-tab-text-color-darktheme
+            li:hover:not(.active) a
+                color: $active-tab-text-color-darktheme
+            li.active a
+                background: $active-tab-background-color-darktheme
+                color: $active-tab-text-color-darktheme
+            :focus
+                background: $focused-tab-background-color-darktheme
+    &#top-navigation
+        background: $top-navigation-color-darktheme
+
 a .access-key
     text-decoration: underline
 
@@ -229,6 +265,18 @@ a .access-key
             border: 1px solid $message-success-border-color
             background: $message-success-background-color
 
+.darktheme .messages
+    .message
+        &.info
+            border: 1px solid darken($message-info-border-color, 30%)
+            background: darken($message-info-background-color, 60%)
+        &.error
+            border: 1px solid darken($message-error-border-color, 30%)
+            background: darken($message-error-background-color, 60%)
+        &.success
+            border: 1px solid darken($message-success-border-color, 30%)
+            background: darken($message-success-background-color, 60%)
+
 .thumbnail
     /*background-image: attr(data-src url)*/ /* not available yet */
     vertical-align: middle
@@ -239,9 +287,14 @@ a .access-key
     width: 20px
     height: 20px
     &.empty
-        background-image: url('../img/transparency_grid.png')
+        background-image:
+            linear-gradient(45deg, $transparency-grid-square-color 25%, transparent 25%),
+            linear-gradient(-45deg, $transparency-grid-square-color 25%, transparent 25%),
+            linear-gradient(45deg, transparent 75%, $transparency-grid-square-color 75%),
+            linear-gradient(-45deg, transparent 75%, $transparency-grid-square-color 75%)
+        background-position: 0 0, 0 10px, 10px -10px, -10px 0px
         background-repeat: repeat
-        background-size: initial
+        background-size: 20px 20px
     img
         opacity: 0
         width: 100%
diff --git a/client/css/expander-control.styl b/client/css/expander-control.styl
index ab5060d..928f5e4 100644
--- a/client/css/expander-control.styl
+++ b/client/css/expander-control.styl
@@ -23,3 +23,11 @@
                 line-height: 2em
     .expander-content
         padding: 0.5em 0.5em 2em 0.5em
+
+.darktheme .expander
+    header
+        background: $active-tab-background-color-darktheme
+        a
+            color: mix($text-color-darktheme, $inactive-link-color-darktheme)
+            i
+                color: $inactive-link-color-darktheme
diff --git a/client/css/pager.styl b/client/css/pager.styl
index 3976404..547b719 100644
--- a/client/css/pager.styl
+++ b/client/css/pager.styl
@@ -25,3 +25,9 @@
                 background: white
                 padding: 0 1em
                 z-index: 2
+
+.darktheme .pager
+    .page
+        .page-header
+            &:before
+                background: $top-navigation-color-darktheme
diff --git a/client/css/pool-categories-view.styl b/client/css/pool-categories-view.styl
new file mode 100644
index 0000000..0a51c9a
--- /dev/null
+++ b/client/css/pool-categories-view.styl
@@ -0,0 +1,29 @@
+@import colors
+
+.content-wrapper.pool-categories
+    width: 100%
+    max-width: 45em
+    table
+        border-spacing: 0
+        width: 100%
+        tr.default td
+            background: $default-pool-category-background-color
+        td, th
+            padding: .4em
+            &.color
+                input[type=text]
+                    width: 8em
+            &.usages
+                text-align: center
+            &.remove, &.set-default
+                white-space: pre
+        th
+            white-space: nowrap
+            &:first-child
+                padding-left: 0
+            &:last-child
+                padding-right: 0
+        tfoot
+            display: none
+    form
+        width: auto
diff --git a/client/css/pool-input-control.styl b/client/css/pool-input-control.styl
new file mode 100644
index 0000000..ef28e72
--- /dev/null
+++ b/client/css/pool-input-control.styl
@@ -0,0 +1,58 @@
+@import colors
+
+div.pool-input
+    position: relative
+
+    .main-control
+        display: flex
+        input
+            flex: 5
+        button
+            flex: 1
+            margin: 0 0 0 0.5em
+
+
+ul.compact-pools
+    width: 100%
+    margin: 0.5em 0 0 0
+    padding: 0
+    li
+        margin: 0
+        width: 100%
+        line-height: 140%
+        white-space: nowrap
+        overflow: hidden
+        text-overflow: ellipsis
+        transition: background-color 0.5s linear
+        a
+            display: inline
+        a:focus
+            outline: 0
+            box-shadow: inset 0 0 0 2px $main-color
+        &.implication
+            background: $implied-pool-background-color
+            color: $implied-pool-text-color
+        &.new
+            background: $new-pool-background-color
+            color: $new-pool-text-color
+        &.duplicate
+            background: $duplicate-pool-background-color
+            color: $duplicate-pool-text-color
+    i
+        padding-right: 0.4em
+
+div.pool-input, ul.compact-pools
+    .pool-usages, .pool-weight, .remove-pool
+        color: $inactive-link-color
+        unselectable()
+    .pool-usages, .pool-weight
+        font-size: 90%
+    .pool-usages, .pool-weight
+        margin-left: 0.7em
+    .remove-pool
+        margin-right: 0.5em
+
+.darktheme
+    div.pool-input, ul.compact-pools
+        .pool-usages, .pool-weight, .remove-pool
+            color: $inactive-link-color-darktheme
diff --git a/client/css/pool-list-view.styl b/client/css/pool-list-view.styl
new file mode 100644
index 0000000..b7ac15e
--- /dev/null
+++ b/client/css/pool-list-view.styl
@@ -0,0 +1,63 @@
+@import colors
+
+.pool-list
+    table
+        width: 100%
+        border-spacing: 0
+        text-align: left
+        line-height: 1.3em
+        tr:hover td
+            background: $top-navigation-color
+        th, td
+            padding: 0.1em 0.5em
+        th
+            white-space: nowrap
+            background: $top-navigation-color
+        .names
+            width: 84%
+        .post-count
+            text-align: center
+            width: 8%
+        .creation-time
+            text-align: center
+            width: 8%
+            white-space: pre
+        ul
+            list-style-type: none
+            margin: 0
+            padding: 0
+            display: inline
+            li
+                padding: 0
+                display: inline
+                &:not(:last-child):after
+                    content: ', '
+        @media (max-width: 800px)
+            .posts
+                display: none
+
+.darktheme .pool-list
+    table
+        tr:hover td
+            background: $top-navigation-color-darktheme
+        th
+            background: $top-navigation-color-darktheme
+
+.pool-list-header
+    label
+        display: none !important
+    text-align: left
+    form
+        width: auto
+    input[name=search-text]
+        width: 25em
+        @media (max-width: 1000px)
+            width: 100%
+    .append
+        vertical-align: middle
+        font-size: 0.95em
+        color: $inactive-link-color
+
+.darktheme .pool-list-header
+    .append
+        color: $inactive-link-color-darktheme
diff --git a/client/css/pool-view.styl b/client/css/pool-view.styl
new file mode 100644
index 0000000..bf16b79
--- /dev/null
+++ b/client/css/pool-view.styl
@@ -0,0 +1,33 @@
+#pool
+    width: 100%
+    max-width: 40em
+    h1
+        word-break: break-all
+        line-height: 130%
+        margin-top: 0
+    form
+        width: 100%
+    .pool-edit
+        textarea
+            height: 10em
+    .pool-summary
+        section
+            &.description
+                margin: 1.5em 0 0 0
+            &.details
+                vertical-align: top
+                padding-right: 0.5em
+                ul
+                    margin: 0
+                    padding: 0
+                    list-style-type: none
+                li
+                    display: inline
+                    margin: 0
+                    padding: 0
+                li:not(:last-of-type):after
+                    content: ', '
+                ul:empty:after
+                    content: '(none)'
+                section
+                    margin-bottom: 1em
diff --git a/client/css/post-content-control.styl b/client/css/post-content-control.styl
index 6882dd9..5c4a18d 100644
--- a/client/css/post-content-control.styl
+++ b/client/css/post-content-control.styl
@@ -1,6 +1,14 @@
+@import colors
+
 .post-container
     .post-content.transparency-grid img
-        background: url('../img/transparency_grid.png')
+        background-image:
+            linear-gradient(45deg, $transparency-grid-square-color 25%, transparent 25%),
+            linear-gradient(-45deg, $transparency-grid-square-color 25%, transparent 25%),
+            linear-gradient(45deg, transparent 75%, $transparency-grid-square-color 75%),
+            linear-gradient(-45deg, transparent 75%, $transparency-grid-square-color 75%)
+        background-size: 20px 20px
+        background-position: 0 0, 0 10px, 10px -10px, -10px 0px
 
     text-align: center
     .post-content
@@ -17,3 +25,6 @@
             height: 100%
         img
             position: relative !important // to center image on small screens
+
+        img
+            image-orientation: from-image
diff --git a/client/css/post-list-view.styl b/client/css/post-list-view.styl
index 318b0c6..a9f14f9 100644
--- a/client/css/post-list-view.styl
+++ b/client/css/post-list-view.styl
@@ -70,7 +70,7 @@
                         height: 1em
                         text-align: center
                         line-height: 1em
-                        font-size: 1.6em
+                        font-size: 2.2em
                     &.tagged
                         background: rgba(0, 230, 0, 0.7)
                         &:after
@@ -141,10 +141,11 @@
 
 
             .thumbnail
-                background-position: 50% 30%
                 width: 100%
                 height: 100%
                 outline-offset: -3px
+                &:not(.empty)
+                    background-position: 50% 30%
 
             .thumbnail-wrapper.no-tags
                 .thumbnail
@@ -159,6 +160,22 @@
                 .thumbnail
                     outline: 4px solid $main-color !important
 
+.post-flow
+    ul
+        li
+            min-width: inherit
+            width: inherit
+            &:not(.flexbox-dummy)
+                height: 14vw
+            .thumbnail
+                outline-offset: -1px
+            .thumbnail-wrapper.no-tags
+                .thumbnail
+                    outline: 2px solid $post-thumbnail-no-tags-border-color
+            &:hover a, a:active, a:focus
+                .thumbnail
+                    outline: 2px solid $main-color !important
+
 .post-list-header
     white-space: nowrap
     text-align: left
diff --git a/client/css/post-main-view.styl b/client/css/post-main-view.styl
index a3e970b..6078617 100644
--- a/client/css/post-main-view.styl
+++ b/client/css/post-main-view.styl
@@ -161,6 +161,12 @@
                 margin: 0
                 padding: 0
 
+    .post-source
+        textarea
+            white-space: pre
+            overflow-wrap: normal
+            overflow-x: scroll
+
     form
         width: auto
 
diff --git a/client/css/post-upload.styl b/client/css/post-upload.styl
index 57c5509..6dca386 100644
--- a/client/css/post-upload.styl
+++ b/client/css/post-upload.styl
@@ -1,5 +1,6 @@
 @import colors
 $upload-header-background-color = $top-navigation-color
+$upload-header-background-color-darktheme = $top-navigation-color-darktheme
 $upload-border-color = #DDD
 $cancel-button-color = tomato
 
@@ -164,3 +165,15 @@ $cancel-button-color = tomato
                 color: $inactive-link-color
             &:last-child .move-down
                 color: $inactive-link-color
+            .darktheme &:first-child .move-up
+                color: $inactive-link-color-darktheme
+            .darktheme &:last-child .move-down
+                color: $inactive-link-color-darktheme
+
+.darktheme #post-upload .uploadables-container .uploadable-container
+    .uploadable header
+        background: $upload-header-background-color-darktheme
+    &:first-child .move-up
+        color: $inactive-link-color-darktheme
+    &:last-child .move-down
+        color: $inactive-link-color-darktheme
diff --git a/client/css/snapshots-list-view.styl b/client/css/snapshots-list-view.styl
index b059a64..153631d 100644
--- a/client/css/snapshots-list-view.styl
+++ b/client/css/snapshots-list-view.styl
@@ -31,16 +31,34 @@ $snapshot-merged-background-color = #FEC
             div.operation-created
                 background: $snapshot-created-background-color
                 &+.details
-                    background: lighten($snapshot-created-background-color, 50%)
+                    background: alpha(@background, 50%)
             div.operation-modified
                 background: $snapshot-modified-background-color
                 &+.details
-                    background: lighten($snapshot-modified-background-color, 50%)
+                    background: alpha(@background, 50%)
             div.operation-deleted
                 background: $snapshot-deleted-background-color
                 &+.details
-                    background: lighten($snapshot-deleted-background-color, 50%)
+                    background: alpha(@background, 50%)
             div.operation-merged
                 background: $snapshot-merged-background-color
                 &+.details
-                    background: lighten($snapshot-merged-background-color, 50%)
+                    background: alpha(@background, 50%)
+
+.darktheme .snapshot-list ul li
+    div.operation-created
+        background: darken($snapshot-created-background-color, 80%)
+        &+.details
+            background: alpha(@background, 50%)
+    div.operation-modified
+        background: darken($snapshot-modified-background-color, 80%)
+        &+.details
+            background: alpha(@background, 50%)
+    div.operation-deleted
+        background: darken($snapshot-deleted-background-color, 80%)
+        &+.details
+            background: alpha(@background, 50%)
+    div.operation-merged
+        background: darken($snapshot-merged-background-color, 80%)
+        &+.details
+            background: alpha(@background, 50%)
diff --git a/client/css/tag-categories-view.styl b/client/css/tag-categories-view.styl
index b8a9180..55aee75 100644
--- a/client/css/tag-categories-view.styl
+++ b/client/css/tag-categories-view.styl
@@ -27,4 +27,3 @@
             display: none
     form
         width: auto
-
diff --git a/client/css/tag-input-control.styl b/client/css/tag-input-control.styl
index e14e596..bc34cb9 100644
--- a/client/css/tag-input-control.styl
+++ b/client/css/tag-input-control.styl
@@ -46,7 +46,7 @@ div.tag-input
 
         .wrapper
             margin-left: 0.5em
-            background: $tag-suggestions-background-color
+            background: $window-color
             border: 1px solid $tag-suggestions-border-color
             width: 15em
             word-break: break-all
@@ -62,7 +62,7 @@ div.tag-input
                 max-height: 20em
                 padding: 0.5em 1em 0 1em
                 li:last-child
-                    border-bottom: 0.5em solid alpha($tag-suggestions-background-color, 0)
+                    border-bottom: 0.5em solid alpha($window-color, 0)
                 li
                     margin: 0
                     font-size: 90%
@@ -125,3 +125,17 @@ div.tag-input, ul.compact-tags
         margin-left: 0.7em
     .remove-tag
         margin-right: 0.5em
+
+.darktheme
+    div.tag-input .tag-suggestions
+        .buttons a
+            color: $inactive-link-color-darktheme
+        .wrapper
+            background: $window-color-darktheme
+            ul li:last-child
+                border-bottom: 0.5em solid alpha($window-color-darktheme, 0)
+        .append
+            color: $inactive-link-color-darktheme
+    div.tag-input, ul.compact-tags
+        .tag-usages, .tag-weight, .remove-tag
+            color: $inactive-link-color-darktheme
diff --git a/client/css/tag-list-view.styl b/client/css/tag-list-view.styl
index 4fd167f..465773d 100644
--- a/client/css/tag-list-view.styl
+++ b/client/css/tag-list-view.styl
@@ -40,6 +40,13 @@
             .implications, .suggestions
                 display: none
 
+.darktheme .tag-list
+    table
+        tr:hover td
+            background: $top-navigation-color-darktheme
+        th
+            background: $top-navigation-color-darktheme
+
 .tag-list-header
     label
         display: none !important
@@ -54,3 +61,7 @@
         vertical-align: middle
         font-size: 0.95em
         color: $inactive-link-color
+
+.darktheme .tag-list-header
+    .append
+        color: $inactive-link-color-darktheme
diff --git a/client/css/user-list-view.styl b/client/css/user-list-view.styl
index 1fba50b..f1569f8 100644
--- a/client/css/user-list-view.styl
+++ b/client/css/user-list-view.styl
@@ -26,6 +26,10 @@
         height: 3em
         margin: 0.25em 0.6em 0 0
 
+.darktheme .user-list
+    ul li
+        background: $top-navigation-color-darktheme
+
 .user-list-header
     label
         display: none !important
@@ -40,3 +44,7 @@
         vertical-align: middle
         font-size: 0.95em
         color: $inactive-link-color
+
+.darktheme .user-list-header
+    .append
+        color: $inactive-link-color-darktheme