From fae453991e36603354629d1e2e056250759a587f Mon Sep 17 00:00:00 2001 From: Istiakshovon <58106197+Istiakshovon@users.noreply.github.com> Date: Tue, 17 Aug 2021 18:42:56 +0300 Subject: [PATCH 1/7] change background color of code area in dark theme --- app/assets/stylesheets/application.scss | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index fed45dbf8..2a4ca6cc4 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -203,12 +203,18 @@ img { .widget.is-tertiary .widget--body + .widget--header { border-top: 1px solid #9daeb7; } - -pre { - background: #f0f0f0; - border: 0; +@media (prefers-color-scheme: light) { + pre { + background: #f0f0f0; + border: 0; + } +} +@media (prefers-color-scheme: dark){ + pre { + background: #2c2a2a; + border: 0; + } } - pre .hljs { padding: 0; background: inherit; From 63c2f48c4590e8a3ec5101ac1ec2a611768ba5ff Mon Sep 17 00:00:00 2001 From: Istiakshovon <58106197+Istiakshovon@users.noreply.github.com> Date: Tue, 17 Aug 2021 18:52:45 +0300 Subject: [PATCH 2/7] black color for user-card-meta's background --- app/assets/stylesheets/posts.scss | 23 ++++++++++++++++++----- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/app/assets/stylesheets/posts.scss b/app/assets/stylesheets/posts.scss index 8c0dd1dad..c24e6800b 100644 --- a/app/assets/stylesheets/posts.scss +++ b/app/assets/stylesheets/posts.scss @@ -123,12 +123,25 @@ h1 .badge.is-tag.is-master-tag { } } - .post-meta--user { - background: #EEE; - align-self: flex-end; + @media (prefers-color-scheme: light) { + .post-meta--user { + background: #EEE; + align-self: flex-end; - @media screen and (min-width: $screen-md) { - align-self: flex-start; + @media screen and (min-width: $screen-md) { + align-self: flex-start; + } + } + } + + @media (prefers-color-scheme: dark) { + .post-meta--user { + background: #141212; + align-self: flex-end; + + @media screen and (min-width: $screen-md) { + align-self: flex-start; + } } } From 1ee83f6fabc2922da310fc5b4ee4047a57ea246f Mon Sep 17 00:00:00 2001 From: Istiakshovon <58106197+Istiakshovon@users.noreply.github.com> Date: Fri, 20 Aug 2021 14:15:26 +0300 Subject: [PATCH 3/7] dark background color's dark, text color is white --- app/assets/stylesheets/application.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 2a4ca6cc4..6e8cdff83 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -16,6 +16,11 @@ @import 'variables'; +@media (prefers-color-scheme: dark){ + background-color: rgb(30, 30, 30); + color: white; +} + h1, h2, h3, h4, h5, h6 { font-family: $font-stack-display; } From 6ed0026acd3cbbc65725dde6ad2698c198c5ef91 Mon Sep 17 00:00:00 2001 From: Istiakshovon <58106197+Istiakshovon@users.noreply.github.com> Date: Fri, 20 Aug 2021 14:17:31 +0300 Subject: [PATCH 4/7] shorten the code --- app/assets/stylesheets/application.scss | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 6e8cdff83..5a0dcd21d 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -208,18 +208,17 @@ img { .widget.is-tertiary .widget--body + .widget--header { border-top: 1px solid #9daeb7; } -@media (prefers-color-scheme: light) { - pre { + +pre { + @media (prefers-color-scheme: light){ background: #f0f0f0; - border: 0; - } -} -@media (prefers-color-scheme: dark){ - pre { + } + @media (prefers-color-scheme: dark){ background: #2c2a2a; - border: 0; } + border: 0; } + pre .hljs { padding: 0; background: inherit; From c2b5a896161b45316f804001b19578ffe41d0e45 Mon Sep 17 00:00:00 2001 From: Istiakshovon <58106197+Istiakshovon@users.noreply.github.com> Date: Fri, 20 Aug 2021 14:19:24 +0300 Subject: [PATCH 5/7] shorten the code --- app/assets/stylesheets/posts.scss | 23 +++++++---------------- 1 file changed, 7 insertions(+), 16 deletions(-) diff --git a/app/assets/stylesheets/posts.scss b/app/assets/stylesheets/posts.scss index c24e6800b..b992aa05b 100644 --- a/app/assets/stylesheets/posts.scss +++ b/app/assets/stylesheets/posts.scss @@ -123,25 +123,16 @@ h1 .badge.is-tag.is-master-tag { } } - @media (prefers-color-scheme: light) { - .post-meta--user { + .post-meta--user { + @media (prefers-color-scheme: light) { background: #EEE; - align-self: flex-end; - - @media screen and (min-width: $screen-md) { - align-self: flex-start; - } } - } - - @media (prefers-color-scheme: dark) { - .post-meta--user { + @media (prefers-colors-scheme: dark){ background: #141212; - align-self: flex-end; - - @media screen and (min-width: $screen-md) { - align-self: flex-start; - } + } + align-self: flex-end; + @media screen and (min-width: $screen-md) { + align-self: flex-start; } } From caf40f3ece149f18853720c41a8a395c2adee3c5 Mon Sep 17 00:00:00 2001 From: Istiakshovon <58106197+Istiakshovon@users.noreply.github.com> Date: Sat, 21 Aug 2021 10:28:03 +0300 Subject: [PATCH 6/7] not needed already available in CoDesign --- app/assets/stylesheets/application.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 5a0dcd21d..94a61ca2b 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -16,11 +16,6 @@ @import 'variables'; -@media (prefers-color-scheme: dark){ - background-color: rgb(30, 30, 30); - color: white; -} - h1, h2, h3, h4, h5, h6 { font-family: $font-stack-display; } From 355fa5215e27fe87a244688f3a9f467f7f638b68 Mon Sep 17 00:00:00 2001 From: Istiakshovon <58106197+Istiakshovon@users.noreply.github.com> Date: Sat, 21 Aug 2021 11:22:13 +0300 Subject: [PATCH 7/7] Update users.scss --- app/assets/stylesheets/users.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/users.scss b/app/assets/stylesheets/users.scss index 5f87c05bb..096856f51 100644 --- a/app/assets/stylesheets/users.scss +++ b/app/assets/stylesheets/users.scss @@ -16,7 +16,12 @@ padding: 0.5em; &:hover { - background: #eeeeee; + @media (prefers-color-scheme: light){ + background: #eeeeee; + } + @media (prefers-color-scheme: dark){ + background: rgb(24, 26, 27); + } } .username {