Skip to content

Commit

Permalink
Use CSS inside noscript when JS is disabled to detect preferred color…
Browse files Browse the repository at this point in the history 
… theme (#308)

- Makes auto theme work when JS is disabled
- Only applies if the 'theme' configuration parameter is set to 'auto' or is unset.
  • Loading branch information
@kdkasad
kdkasad authored Mar 19, 2021
1 parent 706b5a1 commit e01b521
Showing 1 changed file with 18 additions and 1 deletion.
19 changes: 18 additions & 1 deletion layouts/partials/header.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,24 @@
.top-link {
display: none;
}

{{- if (and (ne .Site.Params.defaultTheme "light") (ne .Site.Params.defaultTheme "dark")) }}
@media (prefers-color-scheme: dark) {
:root {
--theme: #1d1e20;
--entry: #2e2e33;
--primary: rgba(255, 255, 255, 0.84);
--secondary: rgba(255, 255, 255, 0.56);
--tertiary: rgba(255, 255, 255, 0.16);
--content: rgba(255, 255, 255, 0.74);
--hljs-bg: #2e2e33;
--code-bg: #37383e;
--border: #333;
}
.list {
background: var(--theme);
}
}
{{- end }}
</style>
</noscript>
<header class="header">
Expand Down

2 comments on commit e01b521

@adityatelange
Copy link
Owner

@adityatelange adityatelange commented on e01b521 Mar 19, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

@kdkasad scroll bar is displayed with a border around ? (in dark mode only on list pages)

image

@kdkasad
Copy link
Contributor Author

@kdkasad kdkasad commented on e01b521 Mar 19, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

Thanks, I didn't notice that. Try b395219. I'll look for other things that specifically use :not(.dark) to detect light mode, too.

Edit: the only other thing that uses :not(.dark) is the theme toggle button, but that's hidden when JS is disabled anyways, so it doesn't matter.

Please sign in to comment.