client/css: implement dark theme option

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

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

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

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

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

client/css/expander-control.styl

@@ -22,3 +22,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

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

client/css/pool-input-control.styl

@@ -51,3 +51,8 @@ div.pool-input, ul.compact-pools
         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

client/css/pool-list-view.styl

@@ -36,6 +36,13 @@
             .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
@@ -50,3 +57,7 @@
         vertical-align: middle
         font-size: 0.95em
         color: $inactive-link-color
+
+.darktheme .pool-list-header
+    .append
+        color: $inactive-link-color-darktheme

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
 
@@ -149,3 +150,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

client/css/snapshots-list-view.styl

@@ -1,17 +1,8 @@
-@import colors
 $snapshot-created-background-color = #E0F5E0
 $snapshot-modified-background-color = #E0F5FF
 $snapshot-deleted-background-color = #FDE5E5
 $snapshot-merged-background-color = #FEC
 
-$is-dark = dark($window-color)
-
-if $is-dark
-  $snapshot-created-background-color = darken($snapshot-created-background-color, 80%)
-  $snapshot-modified-background-color = darken($snapshot-modified-background-color, 80%)
-  $snapshot-deleted-background-color = darken($snapshot-deleted-background-color, 80%)
-  $snapshot-merged-background-color = darken($snapshot-merged-background-color, 80%)
-
 .snapshot-list
     text-align: left
 
@@ -40,16 +31,34 @@ if $is-dark
             div.operation-created
                 background: $snapshot-created-background-color
                 &+.details
-                    background: alpha($snapshot-created-background-color, 50%)
+                    background: alpha(@background, 50%)
             div.operation-modified
                 background: $snapshot-modified-background-color
                 &+.details
-                    background: alpha($snapshot-modified-background-color, 50%)
+                    background: alpha(@background, 50%)
             div.operation-deleted
                 background: $snapshot-deleted-background-color
                 &+.details
-                    background: alpha($snapshot-deleted-background-color, 50%)
+                    background: alpha(@background, 50%)
             div.operation-merged
                 background: $snapshot-merged-background-color
                 &+.details
-                    background: alpha($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%)

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

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

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

client/html/settings.tpl

@@ -22,6 +22,15 @@
                 }) %>
             </li>
 
+            <li>
+                <%= ctx.makeCheckbox({
+                    text: 'Use dark theme',
+                    name: 'dark-theme',
+                    checked: ctx.browsingSettings.darkTheme,
+                }) %>
+                <p class='hint'>Changing this setting will require you to refresh the page for it to apply.</p>
+            </li>
+
             <li>
                 <%= ctx.makeCheckbox({
                     text: 'Upscale small posts',

client/js/main.js

@@ -25,8 +25,10 @@ router.enter(null, (ctx, next) => {
 const tags = require("./tags.js");
 const pools = require("./pools.js");
 const api = require("./api.js");
+const settings = require("./models/settings.js");
 
-api.fetchConfig()
+Promise.resolve()
+    .then(() => api.fetchConfig())
     .then(
         () => {
             // register controller routes
@@ -79,23 +81,27 @@ api.fetchConfig()
         }
     )
     .then(() => {
-        api.loginFromCookies().then(
+        if (settings.get().darkTheme) {
-            () => {
+            document.body.classList.add("darktheme");
-                tags.refreshCategoryColorMap();
+        }
-                pools.refreshCategoryColorMap();
+    })
+    .then(() => api.loginFromCookies())
+    .then(
+        () => {
+            tags.refreshCategoryColorMap();
+            pools.refreshCategoryColorMap();
+            router.start();
+        },
+        (error) => {
+            if (window.location.href.indexOf("login") !== -1) {
+                api.forget();
                 router.start();
-            },
+            } else {
-            (error) => {
+                const ctx = router.start("/");
-                if (window.location.href.indexOf("login") !== -1) {
+                ctx.controller.showError(
-                    api.forget();
+                    "An error happened while trying to log you in: " +
-                    router.start();
+                        error.message
-                } else {
+                );
-                    const ctx = router.start("/");
-                    ctx.controller.showError(
-                        "An error happened while trying to log you in: " +
-                            error.message
-                    );
-                }
             }
-        );
+        }
-    });
+    );

client/js/models/settings.js

@@ -17,6 +17,7 @@ const defaultSettings = {
     autoplayVideos: false,
     postsPerPage: 42,
     tagUnderscoresAsSpaces: false,
+    darkTheme: false,
 };
 
 class Settings extends events.EventTarget {

client/js/views/settings_view.js

@@ -44,6 +44,7 @@ class SettingsView extends events.EventTarget {
                     postsPerPage: this._find("posts-per-page").value,
                     tagUnderscoresAsSpaces: this._find("underscores-as-spaces")
                         .checked,
+                    darkTheme: this._find("dark-theme").checked,
                 },
             })
         );