From 9a0fc8409c7a783348ec212fa9f38d0a98413467 Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Tue, 4 Sep 2018 01:28:04 +0200 Subject: [PATCH] add theming via css custom properties and a bonus dark color theme toggle --- .../account-video-channels.component.scss | 2 +- .../edit-custom-config.component.scss | 2 +- .../my-account-subscriptions.component.scss | 2 +- .../my-account-video-channels.component.scss | 2 +- .../my-account-videos.component.scss | 2 +- client/src/app/app.component.html | 2 +- client/src/app/app.component.scss | 7 ++-- client/src/app/header/header.component.scss | 5 ++- client/src/app/login/login.component.scss | 2 +- client/src/app/menu/menu.component.html | 3 ++ client/src/app/menu/menu.component.scss | 16 +++++-- client/src/app/menu/menu.component.ts | 24 +++++++++++ client/src/app/search/search.component.scss | 4 +- .../src/app/shared/misc/help.component.scss | 1 - .../shared/video/video-feed.component.scss | 3 +- .../video/video-miniature.component.scss | 2 +- .../+video-edit/video-add.component.scss | 9 ++-- .../comment/video-comment.component.scss | 2 +- .../+video-watch/video-watch.component.scss | 10 ++--- .../video-list/video-overview.component.scss | 2 +- client/src/assets/images/menu/moonsun.svg | 1 + client/src/sass/application.scss | 21 ++++++---- client/src/sass/include/_mixins.scss | 27 +++++++----- client/src/sass/include/_variables.scss | 42 ++++++++++++++++++- client/src/sass/primeng-custom.scss | 2 +- 25 files changed, 140 insertions(+), 55 deletions(-) create mode 100644 client/src/assets/images/menu/moonsun.svg diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss index 39c0840e4..0c6de2efa 100644 --- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss +++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss @@ -10,7 +10,7 @@ a.video-channel { display: inline-block; text-align: center; - color: #000; + color: var(--mainForegroundColor); margin: 10px 30px; img { diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss index 4c9167211..c90bd5141 100644 --- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss +++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss @@ -28,7 +28,7 @@ input[type=submit] { .inner-form-title { text-transform: uppercase; - color: $orange-color; + color: var(--mainColor); font-weight: $font-bold; font-size: 13px; margin-top: 30px; diff --git a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss index 8cb0b677d..700d516d5 100644 --- a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss +++ b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss @@ -19,7 +19,7 @@ width: fit-content; display: flex; align-items: baseline; - color: #000; + color: var(--mainForegroundColor); .video-channel-display-name { font-weight: $font-semibold; diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss index 83d657f03..472cbb723 100644 --- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss +++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss @@ -29,7 +29,7 @@ width: fit-content; display: flex; align-items: baseline; - color: #000; + color: var(--mainForegroundColor); .video-channel-display-name { font-weight: $font-semibold; diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss index 8d0dec07d..2db81a3fe 100644 --- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss +++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss @@ -59,7 +59,7 @@ .video-info-name { @include disable-default-a-behaviour; - color: #000; + color: var(--mainForegroundColor); display: block; width: fit-content; font-size: 16px; diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html index 3eb8ef40a..0564e1a7b 100644 --- a/client/src/app/app.component.html +++ b/client/src/app/app.component.html @@ -14,7 +14,7 @@ -
+
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss index e772e3a37..b51a81eb1 100644 --- a/client/src/app/app.component.scss +++ b/client/src/app/app.component.scss @@ -7,6 +7,7 @@ .sub-header-container { margin-top: $header-height; + background-color: var(--mainBackgroundColor); } .header { @@ -14,7 +15,7 @@ position: fixed; top: 0; width: 100%; - background-color: $bg-color; + background-color: var(--mainBackgroundColor); z-index: 1000; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16); display: flex; @@ -31,7 +32,8 @@ @include icon(24px); &.icon-menu { - background-image: url('../assets/images/header/menu.svg'); + background-color: var(--mainForegroundColor); + mask-image: url('../assets/images/header/menu.svg'); margin: 0 18px 0 20px; } } @@ -83,7 +85,6 @@ } footer { - border-top: 1px solid $footer-border-color; padding: 10px 0; font-size: 11px; margin-top: $footer-margin; diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss index 8251ec1b5..bd03c338a 100644 --- a/client/src/app/header/header.component.scss +++ b/client/src/app/header/header.component.scss @@ -8,7 +8,7 @@ padding-right: 40px; // For the search icon &::placeholder { - color: #000; + color: var(--inputPlaceholderColor); } &:focus::placeholder { @@ -28,7 +28,8 @@ @include icon(25px); height: 21px; - background-image: url('../../assets/images/header/search.svg'); + background-color: var(--mainForegroundColor); + mask: url('../../assets/images/header/search.svg') no-repeat 50% 50%; // yolo position: absolute; diff --git a/client/src/app/login/login.component.scss b/client/src/app/login/login.component.scss index 7978c5891..8541a2681 100644 --- a/client/src/app/login/login.component.scss +++ b/client/src/app/login/login.component.scss @@ -18,7 +18,7 @@ input[type=submit] { } .create-an-account, .forgot-password-button { - color: #000; + color: var(--mainForegroundColor); cursor: pointer; &:hover { diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html index 8fe6797d6..d9e75adea 100644 --- a/client/src/app/menu/menu.component.html +++ b/client/src/app/menu/menu.component.html @@ -87,6 +87,9 @@ + + + diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index 941c208e2..4ef330b2f 100644 --- a/client/src/app/menu/menu.component.scss +++ b/client/src/app/menu/menu.component.scss @@ -9,7 +9,7 @@ } menu { - background-color: $black-background; + background-color: $menu-background; margin: 0; padding: 0; height: 100%; @@ -190,10 +190,10 @@ menu { } .footer { - margin-bottom: 15px; + padding-bottom: 15px; padding-left: $menu-left-padding; - .language { + .language, .color-palette { display: inline-block; color: $menu-bottom-color; cursor: pointer; @@ -213,6 +213,16 @@ menu { background-image: url('../../assets/images/menu/language.png'); } + &.icon-moonsun { + margin-left: 10px; + position: relative; + top: -1px; + width: 24px; + height: 24px; + + background-image: url('../../assets/images/menu/moonsun.svg'); + } + &:hover { opacity: 1; } diff --git a/client/src/app/menu/menu.component.ts b/client/src/app/menu/menu.component.ts index dded6b4d5..3de4a78af 100644 --- a/client/src/app/menu/menu.component.ts +++ b/client/src/app/menu/menu.component.ts @@ -22,6 +22,8 @@ export class MenuComponent implements OnInit { [UserRight.MANAGE_VIDEO_ABUSES]: '/admin/video-abuses', [UserRight.MANAGE_VIDEO_BLACKLIST]: '/admin/video-blacklist' } + private theme = document.querySelector('body') + private previousTheme = { } constructor ( private authService: AuthService, @@ -51,6 +53,13 @@ export class MenuComponent implements OnInit { } } ) + + // initialise the alternative theme with dark theme colors + this.previousTheme['mainBackgroundColor'] = '#111111' + this.previousTheme['mainForegroundColor'] = '#fff' + this.previousTheme['submenuColor'] = 'rgb(32,32,32)' + this.previousTheme['inputColor'] = 'gray' + this.previousTheme['inputPlaceholderColor'] = '#fff' } isRegistrationAllowed () { @@ -96,6 +105,21 @@ export class MenuComponent implements OnInit { this.languageChooserModal.show() } + toggleDarkTheme () { + // switch properties + this.switchProperty('mainBackgroundColor') + this.switchProperty('mainForegroundColor') + this.switchProperty('submenuColor') + this.switchProperty('inputColor') + this.switchProperty('inputPlaceholderColor') + } + + private switchProperty (property, newValue?) { + const propertyOldvalue = window.getComputedStyle(this.theme).getPropertyValue('--' + property) + this.theme.style.setProperty('--' + property, (newValue) ? newValue : this.previousTheme[property]) + this.previousTheme[property] = propertyOldvalue + } + private computeIsUserHasAdminAccess () { const right = this.getFirstAdminRightAvailable() diff --git a/client/src/app/search/search.component.scss b/client/src/app/search/search.component.scss index 3be8f5311..67b2094b0 100644 --- a/client/src/app/search/search.component.scss +++ b/client/src/app/search/search.component.scss @@ -67,7 +67,7 @@ .video-info-name { @include disable-default-a-behaviour; - color: #000; + color: var(--mainForegroundColor); display: block; width: fit-content; font-size: 18px; @@ -113,7 +113,7 @@ display: flex; align-items: baseline; - color: #000; + color: var(--mainForegroundColor); width: fit-content; .video-channel-display-name { diff --git a/client/src/app/shared/misc/help.component.scss b/client/src/app/shared/misc/help.component.scss index fe64a270d..5c73a8031 100644 --- a/client/src/app/shared/misc/help.component.scss +++ b/client/src/app/shared/misc/help.component.scss @@ -7,7 +7,6 @@ position: relative; top: -2px; background-image: url('../../../assets/images/global/help.svg'); - background-color: #fff; border: none; margin: 5px; } diff --git a/client/src/app/shared/video/video-feed.component.scss b/client/src/app/shared/video/video-feed.component.scss index 9dab18ffd..385764be0 100644 --- a/client/src/app/shared/video/video-feed.component.scss +++ b/client/src/app/shared/video/video-feed.component.scss @@ -12,7 +12,8 @@ &.icon-syndication { position: relative; top: -2px; - background-image: url('../../../assets/images/global/syndication.svg'); + background-color: var(--mainForegroundColor); + mask-image: url('../../../assets/images/global/syndication.svg'); } } } \ No newline at end of file diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss index cc643f9d9..895879adc 100644 --- a/client/src/app/shared/video/video-miniature.component.scss +++ b/client/src/app/shared/video/video-miniature.component.scss @@ -22,7 +22,7 @@ transition: color 0.2s; font-size: 16px; font-weight: $font-semibold; - color: $fg-color; + color: var(--mainForegroundColor); margin-top: 5px; margin-bottom: 5px; diff --git a/client/src/app/videos/+video-edit/video-add.component.scss b/client/src/app/videos/+video-edit/video-add.component.scss index 892520e40..2f078d46d 100644 --- a/client/src/app/videos/+video-edit/video-add.component.scss +++ b/client/src/app/videos/+video-edit/video-add.component.scss @@ -5,8 +5,6 @@ $border-width: 3px; $border-type: solid; $border-color: #EAEAEA; -$background-color: #F7F7F7; - /deep/ .root-tabset.video-add-tabset { &.hide-nav .nav { display: none !important; @@ -24,7 +22,6 @@ $background-color: #F7F7F7; a.nav-link { @include disable-default-a-behaviour; - color: #000; height: 40px !important; padding: 0 30px !important; font-size: 15px; @@ -32,10 +29,10 @@ $background-color: #F7F7F7; &.active { border: $border-width $border-type $border-color; border-bottom: none; - background-color: $background-color !important; + background-color: var(--mainBackgroundColor) !important; span { - border-bottom: 2px solid #F1680D; + border-bottom: 2px solid var(--mainColor); font-weight: $font-bold; } } @@ -46,7 +43,7 @@ $background-color: #F7F7F7; border: $border-width $border-type $border-color; border-top: none; - background-color: $background-color; + background-color: var(--mainBackgroundColor); border-radius: 3px; width: 100%; min-height: 440px; diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.scss b/client/src/app/videos/+video-watch/comment/video-comment.component.scss index 78bcfe121..285db061f 100644 --- a/client/src/app/videos/+video-watch/comment/video-comment.component.scss +++ b/client/src/app/videos/+video-watch/comment/video-comment.component.scss @@ -35,7 +35,7 @@ .comment-account { @include disable-default-a-behaviour; - color: #000; + color: var(--mainForegroundColor); font-weight: $font-bold; } diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss index be1388a83..edd5ae6ba 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss @@ -111,7 +111,7 @@ a { @include disable-default-a-behaviour; - color: #000; + color: var(--mainForegroundColor); &:hover { opacity: 0.8; @@ -137,7 +137,7 @@ display: inline; align-items: center; font-size: 13px; - color: #000; + color: var(--mainForegroundColor); span:hover { opacity: 0.8; @@ -342,7 +342,7 @@ a.video-attribute-value { @include disable-default-a-behaviour; - color: #000; + color: var(--mainForegroundColor); &:hover { opacity: 0.9; @@ -413,7 +413,7 @@ a { @include disable-default-a-behaviour; - color: $orange-color; + color: var(--mainColor); transition: color 0.3s; &:hover { @@ -422,7 +422,7 @@ } .privacy-concerns-okay { - background-color: $orange-color; + background-color: var(--mainColor); padding: 5px 8px 5px 7px; margin-left: auto; border-radius: 3px; diff --git a/client/src/app/videos/video-list/video-overview.component.scss b/client/src/app/videos/video-list/video-overview.component.scss index e7dc60b4b..f5508cf61 100644 --- a/client/src/app/videos/video-list/video-overview.component.scss +++ b/client/src/app/videos/video-list/video-overview.component.scss @@ -21,7 +21,7 @@ a { @include disable-default-a-behaviour; - color: #000; + color: var(--mainForegroundColor); } } diff --git a/client/src/assets/images/menu/moonsun.svg b/client/src/assets/images/menu/moonsun.svg new file mode 100644 index 000000000..fe2a96396 --- /dev/null +++ b/client/src/assets/images/menu/moonsun.svg @@ -0,0 +1 @@ +Artboard 633 \ No newline at end of file diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index a4fea13c2..b92036de7 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -21,7 +21,7 @@ $assets-path: '../assets/'; body { font-family: $main-fonts; font-weight: $font-regular; - color: #000; + color: var(--mainForegroundColor); font-size: 14px; } @@ -83,7 +83,7 @@ label { } .sub-menu { - background-color: #F7F7F7; + background-color: var(--submenuColor); width: 100%; height: 81px; margin-bottom: 30px; @@ -110,7 +110,7 @@ label { } .title-page { - color: #000; + color: var(--mainForegroundColor); font-size: 16px; display: inline-block; margin-right: 55px; @@ -118,14 +118,14 @@ label { @include disable-default-a-behaviour; &.active, &.title-page-single { - border-bottom: 2px solid $orange-color; + border-bottom: 2px solid var(--mainColor); font-weight: $font-bold; margin-top: 30px; margin-bottom: 25px; } &:hover, &:active, &:focus { - color: #000; + color: var(--mainForegroundColor); } @media screen and (max-width: 500px) { @@ -146,13 +146,14 @@ label { @include disable-default-a-behaviour; font-size: 16px; - color: #000; + color: var(--mainForegroundColor); padding: 5px 15px; border-radius: 0.25rem; &.active { font-weight: $font-semibold; background-color: #f0f0f0; + color: #000; } } } @@ -188,6 +189,10 @@ label { } .modal { + .modal-content { + background-color: var(--mainBackgroundColor); + } + .modal-header { border-bottom: none; margin-bottom: 5px; @@ -249,7 +254,7 @@ label { a { @include disable-default-a-behaviour; - color: #000; + color: var(--mainForegroundColor); } } @@ -259,7 +264,7 @@ ngb-tabset.bootstrap { &, & a { @include disable-default-a-behaviour; - color: #000 !important; + color: var(--mainForegroundColor) !important; } } } diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index 765297c87..6e2feb748 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -58,11 +58,15 @@ display: inline-block; height: $button-height; width: $width; - background: #fff; + background: var(--inputColor); border: 1px solid #C6C6C6; border-radius: 3px; padding-left: 15px; padding-right: 15px; + + &::placeholder { + color: var(--inputPlaceholderColor); + } } @mixin peertube-input-group($width) { @@ -73,6 +77,7 @@ .input-group-text{ font-size: 14px; + color: gray; } } @@ -87,12 +92,12 @@ @mixin orange-button { &, &:active, &:focus { color: #fff; - background-color: $orange-color; + background-color: var(--mainColor); } &:hover { color: #fff; - background-color: $orange-hoover-color; + background-color: var(--mainHoverColor); } &[disabled], &.disabled { @@ -181,7 +186,7 @@ width: $width; border-radius: 3px; overflow: hidden; - background: #fff; + background: var(--inputColor); position: relative; font-size: 15px; @@ -278,7 +283,7 @@ position: relative; width: 18px; height: 18px; - border: $border-width solid #000; + border: $border-width solid var(--mainForegroundColor); border-radius: 3px; vertical-align: middle; cursor: pointer; @@ -292,14 +297,14 @@ height: 12px; opacity: 0; transform: rotate(45deg) scale(0); - border-right: 2px solid #fff; - border-bottom: 2px solid #fff; + border-right: 2px solid var(--mainForegroundColor); + border-bottom: 2px solid var(--mainForegroundColor); } } &:checked + span { border-color: transparent; - background: $orange-color; + background: var(--mainColor); animation: jelly 0.6s ease; &:after { @@ -357,7 +362,7 @@ @mixin in-content-small-title { text-transform: uppercase; - color: $orange-color; + color: var(--mainColor); font-weight: $font-bold; font-size: 13px; } @@ -365,10 +370,10 @@ @mixin actor-owner { @include disable-default-a-behaviour; - display: block; + display: inline-table; font-size: 13px; margin-top: 4px; - color: #000; + color: var(--mainForegroundColor); span:hover { opacity: 0.8; diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss index 7fd178c3b..792a3f9c2 100644 --- a/client/src/sass/include/_variables.scss +++ b/client/src/sass/include/_variables.scss @@ -8,8 +8,6 @@ $grey-hoover-color: #EFEFEF;; $orange-color: #F1680D; $orange-hoover-color: #F97D46; -$black-background: #000; -$grey-background: #f6f2f2; $bg-color: #fff; $fg-color: #000; @@ -27,11 +25,14 @@ $header-height: 50px; $header-border-color: #e9eff6; $search-input-width: 375px; +$menu-background: #000; $menu-color: #fff; $menu-bottom-color: #C6C6C6; $menu-width: 240px; $menu-left-padding: 26px; +$sub-menu-color: #F7F7F7; + $footer-height: 30px; $footer-margin: 30px; @@ -41,3 +42,40 @@ $video-thumbnail-height: 110px; $video-thumbnail-width: 200px; $theater-bottom-space: 85px; + +$input-color: $bg-color; +$input-placeholder-color: #898989; + +/*** theme ***/ + +body { + // now beware node-sass requires interpolation + // for css custom properties #{$var} + --mainColor: #{$orange-color}; + --mainHoverColor: #{$orange-hoover-color}; + --mainBackgroundColor: #{$bg-color}; + --mainForegroundColor: #{$fg-color}; + --submenuColor: #{$sub-menu-color}; + --inputColor: #{$input-color}; + --inputPlaceholderColor: #{$input-placeholder-color}; +} + +/*** map theme ***/ + +// pass variables into a sass map, +// to be warned of non-existing variables +$variables: ( + --mainColor: var(--mainColor), + --mainHoverColor: var(--mainHoverColor), + --mainBackgroundColor: var(--mainBackgroundColor), + --mainForegroundColor: var(--mainForegroundColor), + --submenuColor: var(--submenuColor), + --inputColor: var(--inputColor), + --inputPlaceholderColor: var(--inputPlaceholderColor) +); + +/*** theme helper ***/ + +@function var($variable) { + @return map-get($variables, $variable); +} diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss index 1ec5c7da2..a998652d5 100644 --- a/client/src/sass/primeng-custom.scss +++ b/client/src/sass/primeng-custom.scss @@ -167,7 +167,7 @@ p-table { &.ui-state-active { &, &:hover, &:active, &:focus { color: #fff !important; - background-color: $orange-color !important; + background-color: var(--mainColor) !important; } } } -- 2.25.1