Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dark theme CSS #351

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Dark theme CSS #351

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
18c7265
Dark theme CSS
nt1m Jul 19, 2018
deb2670
Use @media (prefers-color-scheme: dark) + few tweaks
nt1m Apr 22, 2019
cc66f85
Update data.css
nt1m Apr 22, 2019
be090e7
Update landing.css
nt1m Apr 22, 2019
04d7e08
Merge branch 'master' into master
nt1m Apr 22, 2019
ec4b585
Update landing.css
nt1m Apr 22, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions static/css/data.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,12 @@
left: 50%;
transform: translate(-50%, -50%);
}

@media (prefers-color-scheme: dark) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I admire the use of new CSS APIs, I was also wondering if there are plans to build a fall back for the many browsers that don't support this media query?

.data-container::after {
background: #2a2a2e;
}
}

.data-topic {
flex-basis: 50%;
Expand Down
74 changes: 60 additions & 14 deletions static/css/janitor-new.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,11 +101,11 @@ a:not(:hover) {
}

a {
color: #0060df;
color: #0a84ff;
}

a:active {
color: #003eaa;
color: #0060df;
}

small {
Expand Down Expand Up @@ -207,9 +207,9 @@ section:not(:last-child) {
.btn {
border: none;
border-radius: 2px;
background: #ededf0;
background: rgba(12, 12, 13, 0.1);
padding: 6px 10px;
color: #0c0c0d;
color: inherit;
text-decoration: none;
font: inherit;
display: inline-block;
Expand All @@ -222,11 +222,11 @@ section:not(:last-child) {
}

.btn:hover {
background: #d7d7db;
background: rgba(12, 12, 13, 0.2);
}

.btn:hover:active {
background: #b1b1b3;
background: rgba(12, 12, 13, 0.3);
}

.btn:focus {
Expand All @@ -240,11 +240,11 @@ section:not(:last-child) {
}

.btn-primary:hover {
background: #38383d;
background: #2a2a2e;
}

.btn-primary:hover:active {
background: #2a2a2e;
background: #38383d;
}

.btn-error {
Expand Down Expand Up @@ -298,14 +298,14 @@ textarea.form-control {
.form-control.disabled,
.form-control:disabled {
pointer-events: none;
background: #f5f5f5;
opacity: 0.3;
}

/* Header and footer shared code */

.brand-logo {
text-decoration: none;
color: inherit;
color: inherit !important;
display: block;
}

Expand Down Expand Up @@ -343,7 +343,7 @@ textarea.form-control {
}

.link-list-wrapper ul li a:hover {
color: #0b0b0d;
color: inherit;
}

/* Navigation bar */
Expand Down Expand Up @@ -456,17 +456,17 @@ textarea.form-control {
}

.navbar ul li:hover {
background: #f8f8f8;
background: rgba(128,128,128,0.15);
}

.navbar ul li.active {
background: #f8f8f8;
background: rgba(128,128,128,0.2);
font-weight: 600;
}

.navbar ul li a {
color: #0b0b0d;
border-bottom: solid 1px #eee;
border-bottom: solid 1px rgba(128,128,128,0.2);
display: block;
line-height: 50px;
font-size: 14px;
Expand Down Expand Up @@ -826,3 +826,49 @@ textarea.form-control {
.ajax-form.error .form-control-feedback::before {
background-image: url(../img/icons/error.svg);
}

/* Dark theme */

@media (prefers-color-scheme: dark) {
body {
background: #2a2a2e;
color: #ededf0;
}

.navbar,
.card,
.panel,
.panel-body,
.footer {
background: #38383d;
}

.form-control {
background: #0c0c0d;
color: #ededf0;
}

.danger-zone {
color: #d70022;
}

section:not(:last-child),
.global-tab-nav,
.panel > .panel-heading,
.panel > .panel-section,
.footer {
border-color: rgba(255,255,255,0.1);
}

.grey-text,
p,
.link-list-wrapper ul li a:not(:hover) {
color: #b1b1b3;
}

.icon::before,
.form-control-feedback::before,
.brand-logo img {
filter: invert(1);
}
}
14 changes: 13 additions & 1 deletion static/css/landing.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,13 @@
justify-content: space-around;
}

@media (prefers-color-scheme: dark) {
#quotes {
background: #38383d;
border-color: rgba(255,255,255,0.05);
}
}

@media screen and (max-width: 768px) {
#quotes {
display: block;
Expand Down Expand Up @@ -68,7 +75,6 @@
text-align: justify;
line-height: 1.5;
margin: 0;
color: #666;
padding: 0 5px 20px 0;
}

Expand All @@ -95,6 +101,12 @@
vertical-align: middle;
}

@media (prefers-color-scheme: dark) {
#feature-list li::before {
filter: invert(1);
}
}

.partners {
display: flex;
flex-wrap: wrap;
Expand Down
6 changes: 3 additions & 3 deletions templates/landing.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@
</div>
<div id="quotes" class="landing-section">
<div class="quote grow">
<blockquote>Just wanted to say thanks for making Janitor. It just saved me a ton of time debugging a crash.</blockquote>
<blockquote class="grey-text">Just wanted to say thanks for making Janitor. It just saved me a ton of time debugging a crash.</blockquote>
<span>― Brian Grinstead</span>
</div>
<div class="quote grow">
<blockquote>This will change the lives of a lot of contributors.</blockquote>
<blockquote class="grey-text">This will change the lives of a lot of contributors.</blockquote>
<span>― Michael Kohler</span>
</div>
<div class="quote grow">
<blockquote>Mind blown! This would have literally saved months of my life years ago when I hacked on Firefox.</blockquote>
<blockquote class="grey-text">Mind blown! This would have literally saved months of my life years ago when I hacked on Firefox.</blockquote>
<span>― Brian King</span>
</div>
</div>
Expand Down