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

Jump to bottom

Activate dark mode #1938

Draft
wants to merge 5 commits into
base: master
Choose a base branch
from
Draft

Activate dark mode #1938

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7bb97b0
Activate automatic dark mode
Jan 18, 2023
fd82cc7
Use flexible bg colour for dialogs. Thanks to @chiragthakur09!
Sep 17, 2023
1e5855b
Improve dark mode for editor help function bar.
bartkamphorst Nov 1, 2023
a57c382
Fix dark mode for TOC.
bartkamphorst Nov 1, 2023
808d5d4
Upgrade mermaid from 9.3.0 to 10.6.0. Make mermaid responsive to dark…
bartkamphorst Nov 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 6 additions & 0 deletions lib/gollum/public/gollum/stylesheets/template.scss.erb
View file
Open in desktop
Expand Up @@ -53,6 +53,9 @@ h6 {

&:before {
content: url('data:image/svg+xml;utf8,<%= rocticon_css(:link) %>');
@media (prefers-color-scheme: dark) {
filter: invert(95%) sepia(4%) saturate(753%) hue-rotate(178deg) brightness(88%) contrast(92%);
Copy link
Member Author

Choose a reason for hiding this comment

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

For posterity:

Since we're including the octicon SVG as content, we can't style it as a normal element (for instance by setting the fill color for svg path). This is a trick to transform the color of the svg. I used this to calculate the filters needed to get the color we want (which is just the main text color in dark mode).

}
}

&:not(.edit) {
Expand All @@ -64,6 +67,9 @@ h6 {

&:before {
content: url('data:image/svg+xml;utf8,<%= rocticon_css(:pencil) %>');
@media (prefers-color-scheme: dark) {
filter: invert(95%) sepia(4%) saturate(753%) hue-rotate(178deg) brightness(88%) contrast(92%);
}
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion lib/gollum/templates/layout.mustache
View file
Open in desktop
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html data-color-mode="auto" data-light-theme="light" data-dark-theme="dark">
<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8">
<meta name="MobileOptimized" content="width">
Expand Down