Skip to content

Commit

Permalink
refactor dark mode styling
Browse files Browse the repository at this point in the history
  • Loading branch information
willnorris committed Aug 28, 2021
1 parent 43ecd9a commit a5090c0
Show file tree
Hide file tree
Showing 6 changed files with 46 additions and 49 deletions.
34 changes: 22 additions & 12 deletions assets/css/_main.scss
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,11 @@

body {
background-color: white;

@media (prefers-color-scheme: dark) {
background-color: var(--tw-color-gray-900-experimental);
color: var(--tw-color-gray-faint);
}
}

.section {
Expand All @@ -59,14 +64,15 @@ body {

nav {
background-color: var(--tw-color-blue-primary);
@media (prefers-color-scheme: dark) {
background-color: black;
}
padding: var(--feather-grid-xsmall);
width: 100%;
position: fixed;
z-index: 2;
overflow-y: visible;

@media (prefers-color-scheme: dark) {
background-color: black;
}
}

/* Navigation title - web */
Expand Down Expand Up @@ -96,6 +102,10 @@ a.home-link:link, a.home-link:visited, .home-text {

a.home-link:hover, a.home-link:active {
color: var(--tw-color-blue-faded);

@media (prefers-color-scheme: dark) {
color: var(--tw-color-gray-light);
}
}

span.Icon--caretDown {
Expand All @@ -122,6 +132,10 @@ a.nav-link:link, a.nav-link:visited {

a.nav-link:hover, a.nav-link:active {
color: var(--tw-color-blue-faded);

@media (prefers-color-scheme: dark) {
color: var(--tw-color-gray-light);
}
}

.home-link {
Expand All @@ -141,6 +155,7 @@ a.nav-link:hover, a.nav-link:active {
.header, .footer {
background-color: var(--tw-color-blue-primary);
color: white;

@media (prefers-color-scheme: dark) {
background-color: black;
}
Expand Down Expand Up @@ -180,6 +195,10 @@ a.foot-link:link, a.foot-link:visited {
a.foot-link:hover, a.foot-link:active {
color: var(--tw-color-blue-faded);
text-decoration: none;

@media (prefers-color-scheme: dark) {
color: var(--tw-color-gray-light);
}
}

.footer-margin {
Expand Down Expand Up @@ -359,12 +378,3 @@ br {
margin: 0 var(--feather-grid-medium);
}
}

.explore-projects {
background-color: white;
color: black;
@media (prefers-color-scheme: dark) {
background-color: black;
color: white;
}
}
7 changes: 6 additions & 1 deletion assets/css/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,17 @@

.subheading a:hover, .subheading a:active {
color: var(--tw-color-blue-faded);

@media (prefers-color-scheme: dark) {
color: var(--tw-color-gray-light);
}
}

.grey {
background-color: var(--tw-color-gray-faint);

@media (prefers-color-scheme: dark) {
background-color: #121212;
background-color: var(--tw-color-gray-900-experimental);
color: white;
}
}
Expand Down
9 changes: 0 additions & 9 deletions assets/css/memberships.scss
Original file line number Diff line number Diff line change
Expand Up @@ -193,12 +193,3 @@ a.membership-handle:hover, a.membership-handle:active {
width: 100%;
}
}

.section {
background-color: white;
color: black;
@media (prefers-color-scheme: dark) {
background-color: #121212;
color: white;
}
}
29 changes: 12 additions & 17 deletions assets/css/projects.scss
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,10 @@
color: var(--tw-color-gray-deep);
font-size: var(--feather-font-size-normal);
line-height: var(--feather-line-height-normal);

@media (prefers-color-scheme: dark) {
color: var(--tw-color-gray-faded);
}
}

.project-links a {
Expand All @@ -39,6 +43,10 @@

.project-links a:link, .project-links a:visited {
color: var(--tw-color-text-primary);

@media (prefers-color-scheme: dark) {
color: white;
}
}

.project-links a:hover, .project-links a:active {
Expand Down Expand Up @@ -71,6 +79,10 @@
line-height: calc(1.8rem - (1px * 2));
padding: 0 var(--feather-grid-medium);
background-color: var(--tw-color-blue-light);

@media (prefers-color-scheme: dark) {
background-color: var(--tw-color-gray-600-experimental);
}
}

.search-box {
Expand Down Expand Up @@ -125,20 +137,3 @@ input:focus {
right: var(--feather-grid-mega);
}
}

.all-projects {
background-color: white;
color: black;
@media (prefers-color-scheme: dark) {
background-color: #121212;
color: white;
width: inherit;
}
}

.project-links a {
color: black;
@media (prefers-color-scheme: dark) {
color: white;
}
}
10 changes: 0 additions & 10 deletions layouts/partials/footer.html
Original file line number Diff line number Diff line change
Expand Up @@ -49,13 +49,3 @@ <h3 class="xsmall-margin">
</div>
</div> <!-- End of Footer -->

<script>
function switchTweetTheme(){
if(window.matchMedia("(prefers-color-scheme: dark)").matches){
for(const e of document.getElementsByClassName('twitter-timeline')){
e.setAttribute('data-theme','dark');
}
}
}
switchTweetTheme();
</script>
6 changes: 6 additions & 0 deletions static/js/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -82,3 +82,9 @@ function lessThan800px(mediaQuery) {
}
}

// set dark theme on twitter timeline widgets and feather components
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
for (const e of document.getElementsByClassName('twitter-timeline')) {
e.setAttribute('data-theme','dark');
}
}

0 comments on commit a5090c0

Please sign in to comment.