From c004eb36c22852e3dc6cfd10954e9ae5ceb80a09 Mon Sep 17 00:00:00 2001 From: Shyam Sunder Date: Sat, 22 Aug 2020 16:59:13 -0400 Subject: [PATCH] client/css: implement dark theme option --- client/css/colors.styl | 10 ++++-- client/css/comment-control.styl | 15 ++++++++- client/css/comment-list-view.styl | 6 ++++ client/css/core-forms.styl | 44 +++++++++++++++++++++++--- client/css/core-general.styl | 48 +++++++++++++++++++++++++++++ client/css/expander-control.styl | 8 +++++ client/css/pager.styl | 6 ++++ client/css/pool-input-control.styl | 5 +++ client/css/pool-list-view.styl | 11 +++++++ client/css/post-upload.styl | 13 ++++++++ client/css/snapshots-list-view.styl | 35 +++++++++++++-------- client/css/tag-input-control.styl | 18 +++++++++-- client/css/tag-list-view.styl | 11 +++++++ client/css/user-list-view.styl | 8 +++++ client/html/settings.tpl | 9 ++++++ client/js/main.js | 44 ++++++++++++++------------ client/js/models/settings.js | 1 + client/js/views/settings_view.js | 1 + 18 files changed, 251 insertions(+), 42 deletions(-) diff --git a/client/css/colors.styl b/client/css/colors.styl index 3be05fe..a3a6fb4 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 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 b36822a..70ef293 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 diff --git a/client/css/expander-control.styl b/client/css/expander-control.styl index 620ec25..8f68957 100644 --- a/client/css/expander-control.styl +++ b/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 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-input-control.styl b/client/css/pool-input-control.styl index 3f71abe..ef28e72 100644 --- a/client/css/pool-input-control.styl +++ b/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 diff --git a/client/css/pool-list-view.styl b/client/css/pool-list-view.styl index 0f57649..b7ac15e 100644 --- a/client/css/pool-list-view.styl +++ b/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 diff --git a/client/css/post-upload.styl b/client/css/post-upload.styl index 147df6b..aa36e0a 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 @@ -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 diff --git a/client/css/snapshots-list-view.styl b/client/css/snapshots-list-view.styl index 3a60237..153631d 100644 --- a/client/css/snapshots-list-view.styl +++ b/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%) 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 diff --git a/client/html/settings.tpl b/client/html/settings.tpl index 3b1967f..e8890d3 100644 --- a/client/html/settings.tpl +++ b/client/html/settings.tpl @@ -22,6 +22,15 @@ }) %> +
  • + <%= ctx.makeCheckbox({ + text: 'Use dark theme', + name: 'dark-theme', + checked: ctx.browsingSettings.darkTheme, + }) %> +

    Changing this setting will require you to refresh the page for it to apply.

    +
    • +
  • <%= ctx.makeCheckbox({ text: 'Upscale small posts', diff --git a/client/js/main.js b/client/js/main.js index a6e6d6a..b943574 100644 --- a/client/js/main.js +++ b/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( - () => { - tags.refreshCategoryColorMap(); - pools.refreshCategoryColorMap(); + if (settings.get().darkTheme) { + document.body.classList.add("darktheme"); + } + }) + .then(() => api.loginFromCookies()) + .then( + () => { + tags.refreshCategoryColorMap(); + pools.refreshCategoryColorMap(); + router.start(); + }, + (error) => { + if (window.location.href.indexOf("login") !== -1) { + api.forget(); router.start(); - }, - (error) => { - if (window.location.href.indexOf("login") !== -1) { - api.forget(); - router.start(); - } else { - const ctx = router.start("/"); - ctx.controller.showError( - "An error happened while trying to log you in: " + - error.message - ); - } + } else { + const ctx = router.start("/"); + ctx.controller.showError( + "An error happened while trying to log you in: " + + error.message + ); } - ); - }); + } + ); diff --git a/client/js/models/settings.js b/client/js/models/settings.js index bd6ac5b..a4a54e5 100644 --- a/client/js/models/settings.js +++ b/client/js/models/settings.js @@ -17,6 +17,7 @@ const defaultSettings = { autoplayVideos: false, postsPerPage: 42, tagUnderscoresAsSpaces: false, + darkTheme: false, }; class Settings extends events.EventTarget { diff --git a/client/js/views/settings_view.js b/client/js/views/settings_view.js index ef5677b..9717f7d 100644 --- a/client/js/views/settings_view.js +++ b/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, }, }) );