Skip to content
Permalink
Browse files

add Dark Mode support

Regenerate assets with go generate.
  • Loading branch information...
dmitshur committed Aug 8, 2019
1 parent bc9d5b1 commit c400771dfc31f1acab57bdc3be29743f4f3a3644
Showing with 132 additions and 31 deletions.
  1. +5 −5 _data/index.html.tmpl
  2. +71 −1 _data/style.css
  3. +19 −19 assets/assets_vfsdata.go
  4. +21 −3 frontend/selectlistview/style.css
  5. +16 −3 frontend/tableofcontents/style.css
@@ -1,17 +1,17 @@
{{define "header"}}
<div class="header" style="width: 100%; background-color: hsl(209, 51%, 92%); font-size: 14px;">
<header style="width: 100%; font-size: 14px;">
<div class="center-max-width">
<a class="black" style="margin-left: 30px; padding: 15px; display: inline-block;" href="/"><strong>Go Tools</strong></a>
</div>
</div>
</header>
{{end}}

{{define "footer"}}
<div style="position: absolute; bottom: 0; left: 0; width: 100%; text-align: right; background-color: hsl(209, 51%, 92%);">
<footer style="position: absolute; bottom: 0; left: 0; width: 100%; text-align: right;">
<div class="center-max-width">
<span style="margin-right: 15px; padding: 15px; display: inline-block;"><a href="https://github.com/shurcooL/gtdo/issues" target="_blank">Report an issue</a></span>
</div>
</div>
</footer>
{{end}}

<html>
@@ -27,7 +27,7 @@
<div style="padding-bottom: 50px;">
<article class="home-page" style="padding: 30px;">
<p>Read the source code of any Go package on a single page. (<a href="https://www.youtube.com/watch?v=twjxYEubmzs">2 minute screencast</a>)</p>
<span class="import-path-container" style="background-color: #f2f2f2; padding: 20px; display: inline-block;">
<span class="import-path-container" style="padding: 20px; display: inline-block;">
<input id="import-path" placeholder="import/path" autofocus onkeydown="if (event.keyCode != 13) { return; }; window.location = &quot;/&quot; + document.getElementById(&quot;import-path&quot;).value;">
<button onclick="window.location = &quot;/&quot; + document.getElementById(&quot;import-path&quot;).value;">Go</button>
</span>
@@ -18,6 +18,10 @@ a.black:hover {
color: #4183c4;
}

header, footer {
background-color: hsl(209, 51%, 92%);
}

div.center-max-width {
max-width: 1000px;
margin-left: auto;
@@ -43,6 +47,9 @@ article.home-page {
article.home-page > *:first-child {
margin-top: 0;
}
article.home-page .import-path-container {
background-color: #f2f2f2;
}

article.tool-page {
font-size: 14px;
@@ -168,7 +175,7 @@ div.selection {
width: 100%;
}
pre.file {
background: none !important;
background: none;
}

.highlight h3 {
@@ -198,3 +205,66 @@ pre.file {
.highlight .str { color: rgb(80.4%, 0%, 0%); }
.highlight .lit { color: rgb(0.8%, 2.4%, 100%); }
.highlight .com { color: rgb(0%, 50.6%, 9.4%); }

@media (prefers-color-scheme: dark) {
body, select {
color: hsl(219, 28%, 88%);
background-color: hsl(210, 15%, 22%);
}
a {
color: #0092bf;
}
a.black {
color: hsl(219, 28%, 88%);
}
a.black:hover {
color: #a5b1e0;
}
header, footer {
background-color: hsl(209, 51%, 21%);
}
article.home-page .import-path-container {
background-color: hsl(210, 15%, 18%);
}
article.home-page .import-path-container input, article.home-page .import-path-container button {
color: hsl(219, 28%, 88%);
background-color: hsl(210, 15%, 22%);
}
.anchor-icon {
color: hsl(219, 28%, 88%);
}
div.outdated {
background-color: hsl(41, 100%, 26%);
border-color: hsl(41, 100%, 34%);
}
div.highlight {
border: 1px solid hsl(210, 15%, 20%);
}
div.background {
background-color: hsl(210, 15%, 24%);
}
div.selection {
background-color: rgb(90, 74, 16);
}
pre.ln {
background-color: hsl(210, 15%, 24%);
border-right: 1px solid hsl(210, 15%, 20%);
}
span.ln:hover {
color: #d8d8d8;
}
.highlight .kwd { color: hsl(300, 30%, 68%); font-weight: normal; }
.highlight .dec { color: hsl(32, 93%, 66%); }
.highlight .str { color: hsl(114, 31%, 68%); }
.highlight .lit { color: hsl(357, 79%, 65%); font-style: italic; }
.highlight .com { color: hsl(221, 12%, 69%); }

/* primer-navigation */
.tabnav .tabnav-tabs .tabnav-tab {
color: hsl(219, 28%, 80%);
}
.tabnav .tabnav-tabs .tabnav-tab.selected {
color: hsl(219, 28%, 88%);
background-color: hsl(210, 15%, 22%);
}
}

0 comments on commit c400771

Please sign in to comment.
You can’t perform that action at this time.