From cc126bec732e70a98d4a473a7eb56f6ed4c7128c Mon Sep 17 00:00:00 2001 From: Loris Bettazza Date: Fri, 21 Aug 2020 07:10:59 +0200 Subject: [PATCH] Add dark mode Uses a media query to detect if the user prefers a dark color scheme --- .../filters/date-jump-filter/styles.css | 26 +++++++++ .../filters/language-filter/styles.css | 56 +++++++++++++++++++ src/components/filters/view-filter/styles.css | 14 +++++ .../repository-grid/grid-item/styles.css | 22 +++++++- .../repository-list/list-item/styles.css | 15 +++++ src/components/repository-list/styles.css | 7 +++ src/components/top-nav/styles.css | 10 ++++ src/containers/feed/styles.css | 8 +++ src/global.css | 19 +++++++ 9 files changed, 176 insertions(+), 1 deletion(-) diff --git a/src/components/filters/date-jump-filter/styles.css b/src/components/filters/date-jump-filter/styles.css index 34b0987..31c4a5a 100644 --- a/src/components/filters/date-jump-filter/styles.css +++ b/src/components/filters/date-jump-filter/styles.css @@ -22,3 +22,29 @@ box-shadow: none; outline: none; } + +@media (prefers-color-scheme: dark) { + .date-jump-type, + .date-jump-type:hover, + .date-jump-type:active { + background: #30353E !important; + border-color: #30353E !important; + color: #bdc3ce !important; + } + + .date-jump-wrap .dropdown-menu { + background-color: #30353E; + border-color: #30353E; + box-shadow: 0 3px 12px rgba(27, 31, 35, 0.6); + } + + .date-jump-wrap .dropdown-menu .dropdown-item { + color: #bdc3ce; + } + + .date-jump-wrap .dropdown-menu .dropdown-item:hover, + .date-jump-wrap .dropdown-menu .dropdown-item:focus { + background-color: #484f5d; + color: white; + } +} diff --git a/src/components/filters/language-filter/styles.css b/src/components/filters/language-filter/styles.css index ea0fa23..724c1d1 100644 --- a/src/components/filters/language-filter/styles.css +++ b/src/components/filters/language-filter/styles.css @@ -107,3 +107,59 @@ display: block; text-align: left; } + +@media (prefers-color-scheme: dark) { + .language-filter { + background: #30353E !important; + border-color: #30353E !important; + color: #bdc3ce; + } + + .language-filter:hover, + .language-filter:focus, + .language-filter:active { + color: white !important; + } + + .language-select { + border-color: #484f5d; + box-shadow: 0 3px 12px rgba(27, 31, 35, 0.6); + color: #bdc3ce; + } + + .select-menu-header, .select-menu-divider { + background: #30353E; + border-color: #484f5d; + } + + .select-menu-header .select-menu-title, .select-menu-divider { + color: #bdc3ce; + } + + .select-menu-filters { + background-color: #24292E; + } + + .select-menu-text-filter { + border-color: #484f5d; + } + + .select-menu-text-filter input, + .select-menu-text-filter input:focus { + background-color: #30353E; + border-color: #484f5d !important; + } + + .select-menu-text-filter input:focus { + color:white; + } + + .select-menu-item { + background-color: #30353E; + border-color: #484f5d; + } + + .select-menu-item:hover, .select-menu-item.active-item { + background-color: #484f5d; + } +} diff --git a/src/components/filters/view-filter/styles.css b/src/components/filters/view-filter/styles.css index 8a8cf83..2aa21cc 100644 --- a/src/components/filters/view-filter/styles.css +++ b/src/components/filters/view-filter/styles.css @@ -26,3 +26,17 @@ .view-type button:first-child { margin-left: 0; } + +@media (prefers-color-scheme: dark) { + .view-type { + background: #30353E; + } + + .view-type button { + color: #bdc3ce; + } + + .view-type button.active, .view-type button:hover { + color: white; + } +} diff --git a/src/components/repository-grid/grid-item/styles.css b/src/components/repository-grid/grid-item/styles.css index 1db6c42..6ee0fb4 100644 --- a/src/components/repository-grid/grid-item/styles.css +++ b/src/components/repository-grid/grid-item/styles.css @@ -98,7 +98,6 @@ bottom: 20px; left: 20px; right: 25px; - background: white; padding: 10px; } @@ -121,3 +120,24 @@ fill: #6c757d; margin-right: 5px; } + +@media (prefers-color-scheme: dark) { + .grid-item-body { + background: #30353E; + box-shadow: -5px 10px 60px -13px rgba(0, 0, 0, 0.6); + } + + .grid-item-container .author-details h5 { + color: #bdc3ce; + } + + .grid-item-container .repo-header .repo-meta { + color: #6c7583 !important; + } + + .grid-item-container .repo-header .repo-meta a, + .grid-item-container .repo-body p, + .grid-item-container .repo-footer a { + color: #939baa; + } +} diff --git a/src/components/repository-list/list-item/styles.css b/src/components/repository-list/list-item/styles.css index 8facc40..9e42ca3 100644 --- a/src/components/repository-list/list-item/styles.css +++ b/src/components/repository-list/list-item/styles.css @@ -86,3 +86,18 @@ width: 92px; border-radius: 92px; } + +@media (prefers-color-scheme: dark) { + .list-item-container { + border-color: #484f5d; + } + + .list-item-container .repo-meta { + color: #6c7583 !important; + } + + .list-item-container .repo-meta a, + .list-item-container .repo-footer a { + color: #939baa; + } +} diff --git a/src/components/repository-list/styles.css b/src/components/repository-list/styles.css index cd0875f..56bc386 100644 --- a/src/components/repository-list/styles.css +++ b/src/components/repository-list/styles.css @@ -5,3 +5,10 @@ border-radius: 8px; box-shadow: -5px 10px 60px -13px rgba(0, 0, 0, 0.20); } + +@media (prefers-color-scheme: dark) { + .list-container { + background: #30353E; + box-shadow: -5px 10px 60px -13px rgba(0, 0, 0, 0.6); + } +} diff --git a/src/components/top-nav/styles.css b/src/components/top-nav/styles.css index c950f45..5dd3fd2 100644 --- a/src/components/top-nav/styles.css +++ b/src/components/top-nav/styles.css @@ -42,3 +42,13 @@ border-color: #01aced; } +@media (prefers-color-scheme: dark) { + .top-nav { + background: #1B1D23; + border-color: #484f5d; + } + + .top-nav .logo-text h4 { + color: #bdc3ce; + } +} diff --git a/src/containers/feed/styles.css b/src/containers/feed/styles.css index d2c5806..0176e58 100644 --- a/src/containers/feed/styles.css +++ b/src/containers/feed/styles.css @@ -54,3 +54,11 @@ .alert-warning { background: #ffa; } + +@media (prefers-color-scheme: dark) { + .alert-warning { + background: #37455f; + border-color: #37455f; + color: #bdc3ce; + } +} diff --git a/src/global.css b/src/global.css index 9221e5c..ae76fbd 100644 --- a/src/global.css +++ b/src/global.css @@ -25,3 +25,22 @@ a { background: #1157ed; border-color: #1157ed; } + +@media (prefers-color-scheme: dark) { + body { + background: #24292E; + color: #bdc3ce; + } + + a { + color: #1DADEB; + } + + a:hover { + color: #2dc0ff; + } + + .text-muted { + color: #939baa !important; + } +}