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
+542 −83
Draft

Activate dark mode #1938

Show file tree
Hide file tree
Changes from all commits
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
4 changes: 3 additions & 1 deletion lib/gollum/app.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,9 @@
Gollum::set_git_timeout(120)
Gollum::set_git_max_filesize(190 * 10**6)

Gollum::Filter::Code.language_handlers[/mermaid/] = Proc.new { |lang, code| "<div class=\"mermaid\">\n#{code}\n</div>" }
Gollum::Filter::Code.language_handlers[/mermaid/] = Proc.new do |lang, code|
"<div class=\"mermaid_container\"><div class=\"mermaid_source\">\n#{code}\n</div>\n<div class=\"mermaid\">\n#{code}\n</div>\n</div>"
end

# Run the frontend, based on Sinatra
#
Expand Down
2 changes: 1 addition & 1 deletion lib/gollum/public/gollum/javascript/gollum.js.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -441,7 +441,7 @@ $(document).ready(function() {
MathJax.startup.defaultReady();
}
if (mermaid) {
mermaid.init();
mermaid.run();
}
},
error: function(data, textStatus, errorThrown) {
Expand Down
3 changes: 1 addition & 2 deletions lib/gollum/public/gollum/stylesheets/dialog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
height: 100%;
padding: 1em;
overflow: hidden;
background-color: white;
background-color: var(--color-canvas-default);
webkit-box-shadow: 8px 7px 21px 0px rgba(0,0,0,0.68);
moz-box-shadow: 8px 7px 21px 0px rgba(0,0,0,0.68);
box-shadow: 8px 7px 21px 0px rgba(0,0,0,0.68);
Expand Down Expand Up @@ -109,7 +109,6 @@
}

label {
color: #000;
display: block;
font-size: 1.2em;
font-weight: bold;
Expand Down
13 changes: 1 addition & 12 deletions lib/gollum/public/gollum/stylesheets/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,34 +154,24 @@ a {
padding: 0;

a {
border: 1px solid transparent;
border-width: 1px 0;
display: block;
font-weight: bold;
height: 100%;
width: auto;
padding: 0.2em 1em;
text-shadow: 0 -1px 0 #fff;
font-size: 0.8em;

@include desktop-breakpoint {
font-size: 1em;
}

&:hover {
background: #fff;
border-color: #f0f0f0;
text-decoration: none;

box-shadow: none;
}

&.selected {
border: $border-standard;
border-bottom-color: #e7e7e7;
border-width: 1px 0;
background: #fff;
color: #000;

box-shadow: 0 1px 2px #f0f0f0;
}
Expand All @@ -192,12 +182,11 @@ a {


#gollum-editor-help-list {
background: #fafafa;


}

#gollum-editor-help-wrapper {
background: #fff;
overflow: auto;
height: 17em;
padding: 1em;
Expand Down
6 changes: 6 additions & 0 deletions lib/gollum/public/gollum/stylesheets/template.scss.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
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
7 changes: 5 additions & 2 deletions lib/gollum/public/gollum/stylesheets/wiki_content.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,6 @@
/* Table of contents */

.toc {
background-color: white;
border: $border-standard;
padding: 5px 10px;
margin-bottom: 1em;
Expand Down Expand Up @@ -154,4 +153,8 @@
> *:last-child {
margin-bottom: 0 !important;
}
}
}

.mermaid_source {
display: none;
}
20 changes: 10 additions & 10 deletions lib/gollum/templates/editor.mustache
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,18 +94,18 @@

<div id="gollum-editor-help" class="jaws border rounded-2 overflow-hidden mb-2">
<nav id="gollum-editor-help-parent" class="menu rounded-0 float-left border-top-0 border-bottom-0 border-left-0">
<a href="javascript:void(0);" class="selected menu-item border-bottom">Help 1</a>
<a href="javascript:void(0);" class="menu-item border-bottom">Help 1</a>
<a href="javascript:void(0);" class="menu-item border-bottom">Help 1</a>
<a href="javascript:void(0);" class="selected menu-item">Help 1</a>
<a href="javascript:void(0);" class="menu-item">Help 1</a>
<a href="javascript:void(0);" class="menu-item">Help 1</a>
</nav>
<nav id="gollum-editor-help-list" class="menu rounded-0 float-left border-top-0 border-bottom-0 border-left-0">
<a href="javascript:void(0);" class="menu-item border-bottom">Help 2</a>
<a href="javascript:void(0);" class="menu-item border-bottom">Help 3</a>
<a href="javascript:void(0);" class="menu-item border-bottom">Help 4</a>
<a href="javascript:void(0);" class="menu-item border-bottom">Help 5</a>
<a href="javascript:void(0);" class="menu-item border-bottom">Help 6</a>
<a href="javascript:void(0);" class="menu-item border-bottom">Help 7</a>
<a href="javascript:void(0);" class="menu-item border-bottom">Help 8</a>
<a href="javascript:void(0);" class="menu-item">Help 2</a>
<a href="javascript:void(0);" class="menu-item">Help 3</a>
<a href="javascript:void(0);" class="menu-item">Help 4</a>
<a href="javascript:void(0);" class="menu-item">Help 5</a>
<a href="javascript:void(0);" class="menu-item">Help 6</a>
<a href="javascript:void(0);" class="menu-item">Help 7</a>
<a href="javascript:void(0);" class="menu-item">Help 8</a>
</nav>
<div id="gollum-editor-help-wrapper">
<div id="gollum-editor-help-content" class="f4">
Expand Down
21 changes: 20 additions & 1 deletion lib/gollum/templates/layout.mustache
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 Expand Up @@ -83,10 +83,12 @@

{{#mermaid}}
<script>

var mermaid_conf = {
startOnLoad: true,
securityLevel: 'sandbox'
};

</script>
{{/mermaid}}

Expand All @@ -95,7 +97,24 @@
{{#mermaid}}
{{#sprockets_javascript_tag}}gollum.mermaid.js{{/sprockets_javascript_tag}}
<script>

if (window.matchMedia) {
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
mermaid_conf['theme'] = 'dark';
}
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
const newColorScheme = event.matches ? "dark" : "default";
// Rerender mermaid diagrams with new color scheme
$('.mermaid').removeAttr('data-processed').each(function(_, element) {
$(element).html($(element).siblings(".mermaid_source").html());
});
mermaid.initialize({'theme': newColorScheme, startOnLoad: false, securityLevel: 'sandbox'});
mermaid.run({querySelector: '.mermaid'});

});
}
mermaid.initialize(mermaid_conf);

</script>
{{/mermaid}}

Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"dependencies": {
"@primer/css": "^20.8.0",
"ace-builds": "^1.13.1",
"mermaid": "^9.1.2",
"mermaid": "^10.6.0",
"mousetrap": "^1.6.5"
},
"engines": {
Expand Down