Dark Theme

_layouts/vimdoc.html

@@ -31,7 +31,14 @@
     s.parentNode.insertBefore(gcse, s);
   })();
 </script>
-<gcse:search id="SearchForm"></gcse:search>
+<div id="SearchForm">
+  <gcse:search></gcse:search>
+  <div id="DarkModeSwitchWrapper">
+    ダークモード
+    <input type="checkbox" id="DarkModeSwitch" />
+    <label for="DarkModeSwitch" />
+  </div>
+</div>
 
 <div>
   <a href="//vim-jp.org/">vim-jp</a>

style.css

@@ -19,6 +19,46 @@ div#SearchForm {
     width: 200px;
 }
 
+div#DarkModeSwitchWrapper {
+    height: 50px;
+    padding: 10px;
+}
+div#DarkModeSwitchWrapper input {
+    display: none;
+}
+div#DarkModeSwitchWrapper label {
+    width: 50px;
+    height: 20px;
+    display: inline-block;
+    border-radius: 10px;
+    box-sizing: border-box;
+    cursor: pointer;
+    position: relative;
+    transition: 0.2s;
+
+    background: gray;
+}
+div#DarkModeSwitchWrapper input:checked + label {
+    background: darkgreen;
+}
+div#DarkModeSwitchWrapper label:after {
+    content: '';
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    border-radius: 100%;
+    top: 0;
+    z-index: 2;
+    transition: 0.2s;
+
+    left: 0;
+    background: yellow;
+}
+div#DarkModeSwitchWrapper input:checked + label:after {
+    left: 30px;
+    background: purple;
+}
+
 body {
     color: #000000;
     font-family: Verdana, sans-serif;
@@ -161,4 +201,183 @@ a.EnglishPage:hover {
     float: right;
 }
 
+/*
+ * This dark theme is based on onedark.vim, which is licensed under MIT License.
+ * https://github.com/joshdick/onedark.vim
+ */
+@media (prefers-color-scheme: dark) {
+    * {
+        padding:0;
+        margin:0;
+        border:0;
+    }
+    .MissingTag {
+        /*
+        background-color: black;
+        color: white;
+        */
+    }
+    .EnglishTag {
+        background-color: gray;
+        color: white;
+    }
+
+    body {
+        background: #282C34;
+        color: #ABB2BF;
+        font-family: Verdana, sans-serif;
+        width: 800px;
+        margin: 16px auto;
+        padding: 24px;
+    }
+
+    h1, h2, h3 {
+        margin: 1em;
+    }
+    .Todo {
+        color: #0000ff;
+        background-color: #E5C07B;
+    }
+    .Ignore {
+        color: #282C34;
+    }
+    .PreProc {
+        color: #e5c07b;
+    }
+    .Special {
+        color: #61AFEF;
+    }
+    .Identifier {
+        color: #E06C75;
+    }
+    .Comment {
+        color: #C678DD;
+    }
+    .helpExample {
+        color: #C678DD;
+    }
+
+    header {
+        padding-bottom: 8px;
+        border-bottom: 1px solid #54575c;
+    }
+
+    nav {
+        float: left;
+        width: 132px;
+        font-size: 9pt;
+        padding: 8px 0px;
+        border-right: 1px solid #cad2e0;
+    }
+
+    nav li {
+        margin-bottom: 1px;
+        list-style-type: none;
+    }
+
+    nav li a {
+        display: block;
+        text-decoration: none;
+        padding: 0.2em 1em;
+    }
+
+    nav dt {
+        margin: 0.8em 0 1px;
+        border-top: 1px solid #c3c3c3;
+        border-left: 4px solid #56B6C2;
+        padding: 1px 0 1px 4px;
+        color: #56B6C2;
+    }
+
+    nav li a:link,
+    nav li a:visited {
+        color: #61AFEF;
+    }
+
+    nav li a:active,
+    nav li a:hover {
+        background-color: #E06C75;
+        color: #282C34;
+    }
+
+    nav li a.CurrentPage {
+        background-color: #61AFEF;
+        color: #282C34;
+    }
+
+    article.Vimdoc {
+        float: left;
+        width: 600px;
+        display: block;
+        padding: 1em 2em;
+        border-left: 1px solid #54575c;
+        position: relative;
+        left: -1px;
+        font-family: monospace, "Osaka-mono", "Osaka-等幅", "ＭＳ ゴシック", "Courier New";
+        font-size: 10.5pt;
+        line-height: 1.2em;
+        white-space: nowrap;
+    }
+
+    article.Vimdoc a:link,
+    article.Vimdoc a:visited,
+    article.Vimdoc a:active {
+    }
+
+    article.Vimdoc a:hover {
+        background-color: #E06C75;
+        color: #282C34;
+    }
+
+    article.Vimdoc a.Constant {
+        color: #98C379;
+    }
+
+    article.Vimdoc a.Constant:hover {
+        background-color: #98C379;
+        color: #282C34;
+    }
+
+    footer {
+        padding-top: 8px;
+        border-top: 1px solid #54575c;
+        clear: both;
+    }
+
+    /* Untranslated pages in TOC */
+    a.EnglishPage:link,
+    a.EnglishPage:visited,
+    a.EnglishPage:active {
+        color: gray;
+    }
+    a.EnglishPage:hover {
+        background-color: gray;
+        color: white;
+    }
+
+    /* Tag links to untranslate pages */
+    .ExternalTaglink {
+        background-color: gray;
+        color: white;
+    }
+
+    .EnglishJapaneseLink {
+        float: right;
+    }
+
+    /* Overwrite default css */
+    a {
+        color: #52a1ff;
+    }
+
+    a:visited {
+        color: #9e6ecf;
+    }
+
+    /* Pencil "edit" icon */
+    .octicon path {
+        fill: #ABB2BF;
+    }
+}
+
 /* vim:set ts=8 sts=4 sw=4 tw=0 et: */