Skip to content

added a dark mode #458

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

Open
sen-h wants to merge 1 commit into
base: main
Choose a base branch
from
Open

added a dark mode #458

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
5 changes: 5 additions & 0 deletions css/app/ribbon.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,3 +61,8 @@
right: 0;
border-width: 1em 1em 0 0;
}
@media (prefers-color-scheme: dark) {
.ribbon {
color: #B3B3B3;
}
}
33 changes: 33 additions & 0 deletions css/app/seagl.scss
View file
Open in desktop
Copy link
Member

@AndrewKvalheim AndrewKvalheim Apr 1, 2025

Choose a reason for hiding this comment

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

code is still bright:

code

Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ body {
border-bottom: 12px solid #0C5A73;
overflow-x: hidden;
}

:hover {
-webkit-transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
Expand Down Expand Up @@ -395,3 +396,35 @@ img.align-center {
margin-top: 15px;
margin-bottom: 15px;
}

@media (prefers-color-scheme: dark) {
body {
background-color: #0D0D0D ;
color: #B3B3B3;
outline: 5px dashed #000;
Copy link
Member

@AndrewKvalheim AndrewKvalheim Apr 1, 2025

Choose a reason for hiding this comment

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

What’s the purpose of this outline? I don’t see how it’s visible.


}
h1,h2,h3,h4,h5,h6 {
text-shadow: 0px 1px 1px #565656;
Copy link
Member

@AndrewKvalheim AndrewKvalheim Apr 1, 2025

Choose a reason for hiding this comment

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

Can we use variables to override just the color? Something more like --heading-text-shadow-color: #565656;

Copy link
Member

@AndrewKvalheim AndrewKvalheim Apr 2, 2025

Choose a reason for hiding this comment

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

Alternatively, removing the text shadow altogether (including from the light color scheme) sounds reasonable.

}
h2,h3,h5,h6 {
color: #1D7193;
}
a:not(.btn):not(.label) {
&, &:active {
color: #1D7193;
}
&:visited {
color: #1D7193;
}
&:hover {
color: #565656;
}
Comment on lines +414 to +422
Copy link
Member

@AndrewKvalheim AndrewKvalheim Apr 1, 2025

Choose a reason for hiding this comment

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

Can these be bumped up to a text contrast ratio of ≥4.5?

}
#main-nav .main-nav-links li a {
color: #B3B3B3;
}
.logo-wall{
background-color: #B3B3B3;
}
Comment on lines +427 to +429
Copy link
Member

@AndrewKvalheim AndrewKvalheim Apr 1, 2025

Choose a reason for hiding this comment

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

Suggested change
.logo-wall{
background-color: #B3B3B3;
}

Redundant

}
7 changes: 7 additions & 0 deletions css/app/sponsors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,3 +39,10 @@
width: auto;
}
}
@media (prefers-color-scheme: dark) {
.logo-wall {
display: flex;
Copy link
Member

@AndrewKvalheim AndrewKvalheim Apr 1, 2025

Choose a reason for hiding this comment

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

Suggested change
display: flex;

Redundant, and probably not something we should be touching with a color scheme change anyway.

border-radius: 4px;
background-color: #B3B3B3;
}
Copy link
Member

@AndrewKvalheim AndrewKvalheim Apr 1, 2025

Choose a reason for hiding this comment

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

Suggested change
}
border-top: 12px solid #0C5A73;
margin-left: auto;
margin-right: auto;
padding-bottom: 0.5em;
padding-top: 0.5em;
width: fit-content;
}

Not sure about this but maybe a direction to consider

325603a suggestion
325603a suggestion

}