From 2a67799c8a730e7b60e3114febd2e30d21de714d Mon Sep 17 00:00:00 2001 From: Flaviu Tamas Date: Sun, 31 May 2015 19:20:07 -0400 Subject: [PATCH] Implement dark mode --- content/assets/css/colorful.css | 120 ++++++++++++++++---------------- content/assets/css/monokai.css | 64 +++++++++++++++++ content/assets/js/main.js | 13 ++++ content/content/footer.md | 3 +- nanoc.yaml | 1 + 5 files changed, 140 insertions(+), 61 deletions(-) create mode 100644 content/assets/css/monokai.css diff --git a/content/assets/css/colorful.css b/content/assets/css/colorful.css index 22af139..d29370e 100644 --- a/content/assets/css/colorful.css +++ b/content/assets/css/colorful.css @@ -1,19 +1,4 @@ /* pygments-css colorful */ -code[class^='language-'] .hll { background-color: #ffffcc } -code[class^='language-'] .c { color: #808080 } /* Comment */ -code[class^='language-'] .err { color: #F00000; background-color: #F0A0A0 } /* Error */ -code[class^='language-'] .k { color: #008000; font-weight: bold } /* Keyword */ -code[class^='language-'] .o { color: #303030 } /* Operator */ -code[class^='language-'] .cm { color: #808080 } /* Comment.Multiline */ -code[class^='language-'] .cp { color: #507090 } /* Comment.Preproc */ -code[class^='language-'] .c1 { color: #808080 } /* Comment.Single */ -code[class^='language-'] .cs { color: #cc0000; font-weight: bold } /* Comment.Special */ -code[class^='language-'] .gd { color: #A00000 } /* Generic.Deleted */ -code[class^='language-'] .ge { font-style: italic } /* Generic.Emph */ -code[class^='language-'] .gr { color: #FF0000 } /* Generic.Error */ -code[class^='language-'] .gh { color: #000080; font-weight: bold } /* Generic.Heading */ -code[class^='language-'] .gi { color: #00A000 } /* Generic.Inserted */ -code[class^='language-'] .go { color: #808080 } /* Generic.Output */ code[class^='language-'] .gp { color: #c65d09; font-weight: bold; @@ -25,48 +10,63 @@ code[class^='language-'] .gp { -ms-user-select: none; user-select: none; } /* Generic.Prompt */ -code[class^='language-'] .gs { font-weight: bold } /* Generic.Strong */ -code[class^='language-'] .gu { color: #800080; font-weight: bold } /* Generic.Subheading */ -code[class^='language-'] .gt { color: #0040D0 } /* Generic.Traceback */ -code[class^='language-'] .kc { color: #008000; font-weight: bold } /* Keyword.Constant */ -code[class^='language-'] .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */ -code[class^='language-'] .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */ -code[class^='language-'] .kp { color: #003080; font-weight: bold } /* Keyword.Pseudo */ -code[class^='language-'] .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */ -code[class^='language-'] .kt { color: #303090; font-weight: bold } /* Keyword.Type */ -code[class^='language-'] .m { color: #6000E0; font-weight: bold } /* Literal.Number */ -code[class^='language-'] .s { background-color: #fff0f0 } /* Literal.String */ -code[class^='language-'] .na { color: #0000C0 } /* Name.Attribute */ -code[class^='language-'] .nb { color: #007020 } /* Name.Builtin */ -code[class^='language-'] .nc { color: #B00060; font-weight: bold } /* Name.Class */ -code[class^='language-'] .no { color: #003060; font-weight: bold } /* Name.Constant */ -code[class^='language-'] .nd { color: #505050; font-weight: bold } /* Name.Decorator */ -code[class^='language-'] .ni { color: #800000; font-weight: bold } /* Name.Entity */ -code[class^='language-'] .ne { color: #F00000; font-weight: bold } /* Name.Exception */ -code[class^='language-'] .nf { color: #0060B0; font-weight: bold } /* Name.Function */ -code[class^='language-'] .nl { color: #907000; font-weight: bold } /* Name.Label */ -code[class^='language-'] .nn { color: #0e84b5; font-weight: bold } /* Name.Namespace */ -code[class^='language-'] .nt { color: #007000 } /* Name.Tag */ -code[class^='language-'] .nv { color: #906030 } /* Name.Variable */ -code[class^='language-'] .ow { color: #000000; font-weight: bold } /* Operator.Word */ -code[class^='language-'] .w { color: #bbbbbb } /* Text.Whitespace */ -code[class^='language-'] .mf { color: #6000E0; font-weight: bold } /* Literal.Number.Float */ -code[class^='language-'] .mh { color: #005080; font-weight: bold } /* Literal.Number.Hex */ -code[class^='language-'] .mi { color: #0000D0; font-weight: bold } /* Literal.Number.Integer */ -code[class^='language-'] .mo { color: #4000E0; font-weight: bold } /* Literal.Number.Oct */ -code[class^='language-'] .sb { background-color: #fff0f0 } /* Literal.String.Backtick */ -code[class^='language-'] .sc { color: #0040D0 } /* Literal.String.Char */ -code[class^='language-'] .sd { color: #D04020 } /* Literal.String.Doc */ -code[class^='language-'] .s2 { background-color: #fff0f0 } /* Literal.String.Double */ -code[class^='language-'] .se { color: #606060; font-weight: bold; background-color: #fff0f0 } /* Literal.String.Escape */ -code[class^='language-'] .sh { background-color: #fff0f0 } /* Literal.String.Heredoc */ -code[class^='language-'] .si { background-color: #e0e0e0 } /* Literal.String.Interpol */ -code[class^='language-'] .sx { color: #D02000; background-color: #fff0f0 } /* Literal.String.Other */ -code[class^='language-'] .sr { color: #000000; background-color: #fff0ff } /* Literal.String.Regex */ -code[class^='language-'] .s1 { background-color: #fff0f0 } /* Literal.String.Single */ -code[class^='language-'] .ss { color: #A06000 } /* Literal.String.Symbol */ -code[class^='language-'] .bp { color: #007020 } /* Name.Builtin.Pseudo */ -code[class^='language-'] .vc { color: #306090 } /* Name.Variable.Class */ -code[class^='language-'] .vg { color: #d07000; font-weight: bold } /* Name.Variable.Global */ -code[class^='language-'] .vi { color: #3030B0 } /* Name.Variable.Instance */ -code[class^='language-'] .il { color: #0000D0; font-weight: bold } /* Literal.Number.Integer.Long */ +body:not(.darkmode) code[class^='language-'] .hll { background-color: #ffffcc } +body:not(.darkmode) code[class^='language-'] .c { color: #808080 } /* Comment */ +body:not(.darkmode) code[class^='language-'] .err { color: #F00000; background-color: #F0A0A0 } /* Error */ +body:not(.darkmode) code[class^='language-'] .k { color: #008000; font-weight: bold } /* Keyword */ +body:not(.darkmode) code[class^='language-'] .o { color: #303030 } /* Operator */ +body:not(.darkmode) code[class^='language-'] .cm { color: #808080 } /* Comment.Multiline */ +body:not(.darkmode) code[class^='language-'] .cp { color: #507090 } /* Comment.Preproc */ +body:not(.darkmode) code[class^='language-'] .c1 { color: #808080 } /* Comment.Single */ +body:not(.darkmode) code[class^='language-'] .cs { color: #cc0000; font-weight: bold } /* Comment.Special */ +body:not(.darkmode) code[class^='language-'] .gd { color: #A00000 } /* Generic.Deleted */ +body:not(.darkmode) code[class^='language-'] .ge { font-style: italic } /* Generic.Emph */ +body:not(.darkmode) code[class^='language-'] .gr { color: #FF0000 } /* Generic.Error */ +body:not(.darkmode) code[class^='language-'] .gh { color: #000080; font-weight: bold } /* Generic.Heading */ +body:not(.darkmode) code[class^='language-'] .gi { color: #00A000 } /* Generic.Inserted */ +body:not(.darkmode) code[class^='language-'] .go { color: #808080 } /* Generic.Output */ +body:not(.darkmode) code[class^='language-'] .gs { font-weight: bold } /* Generic.Strong */ +body:not(.darkmode) code[class^='language-'] .gu { color: #800080; font-weight: bold } /* Generic.Subheading */ +body:not(.darkmode) code[class^='language-'] .gt { color: #0040D0 } /* Generic.Traceback */ +body:not(.darkmode) code[class^='language-'] .kc { color: #008000; font-weight: bold } /* Keyword.Constant */ +body:not(.darkmode) code[class^='language-'] .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */ +body:not(.darkmode) code[class^='language-'] .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */ +body:not(.darkmode) code[class^='language-'] .kp { color: #003080; font-weight: bold } /* Keyword.Pseudo */ +body:not(.darkmode) code[class^='language-'] .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */ +body:not(.darkmode) code[class^='language-'] .kt { color: #303090; font-weight: bold } /* Keyword.Type */ +body:not(.darkmode) code[class^='language-'] .m { color: #6000E0; font-weight: bold } /* Literal.Number */ +body:not(.darkmode) code[class^='language-'] .s { background-color: #fff0f0 } /* Literal.String */ +body:not(.darkmode) code[class^='language-'] .na { color: #0000C0 } /* Name.Attribute */ +body:not(.darkmode) code[class^='language-'] .nb { color: #007020 } /* Name.Builtin */ +body:not(.darkmode) code[class^='language-'] .nc { color: #B00060; font-weight: bold } /* Name.Class */ +body:not(.darkmode) code[class^='language-'] .no { color: #003060; font-weight: bold } /* Name.Constant */ +body:not(.darkmode) code[class^='language-'] .nd { color: #505050; font-weight: bold } /* Name.Decorator */ +body:not(.darkmode) code[class^='language-'] .ni { color: #800000; font-weight: bold } /* Name.Entity */ +body:not(.darkmode) code[class^='language-'] .ne { color: #F00000; font-weight: bold } /* Name.Exception */ +body:not(.darkmode) code[class^='language-'] .nf { color: #0060B0; font-weight: bold } /* Name.Function */ +body:not(.darkmode) code[class^='language-'] .nl { color: #907000; font-weight: bold } /* Name.Label */ +body:not(.darkmode) code[class^='language-'] .nn { color: #0e84b5; font-weight: bold } /* Name.Namespace */ +body:not(.darkmode) code[class^='language-'] .nt { color: #007000 } /* Name.Tag */ +body:not(.darkmode) code[class^='language-'] .nv { color: #906030 } /* Name.Variable */ +body:not(.darkmode) code[class^='language-'] .ow { color: #000000; font-weight: bold } /* Operator.Word */ +body:not(.darkmode) code[class^='language-'] .w { color: #bbbbbb } /* Text.Whitespace */ +body:not(.darkmode) code[class^='language-'] .mf { color: #6000E0; font-weight: bold } /* Literal.Number.Float */ +body:not(.darkmode) code[class^='language-'] .mh { color: #005080; font-weight: bold } /* Literal.Number.Hex */ +body:not(.darkmode) code[class^='language-'] .mi { color: #0000D0; font-weight: bold } /* Literal.Number.Integer */ +body:not(.darkmode) code[class^='language-'] .mo { color: #4000E0; font-weight: bold } /* Literal.Number.Oct */ +body:not(.darkmode) code[class^='language-'] .sb { background-color: #fff0f0 } /* Literal.String.Backtick */ +body:not(.darkmode) code[class^='language-'] .sc { color: #0040D0 } /* Literal.String.Char */ +body:not(.darkmode) code[class^='language-'] .sd { color: #D04020 } /* Literal.String.Doc */ +body:not(.darkmode) code[class^='language-'] .s2 { background-color: #fff0f0 } /* Literal.String.Double */ +body:not(.darkmode) code[class^='language-'] .se { color: #606060; font-weight: bold; background-color: #fff0f0 } /* Literal.String.Escape */ +body:not(.darkmode) code[class^='language-'] .sh { background-color: #fff0f0 } /* Literal.String.Heredoc */ +body:not(.darkmode) code[class^='language-'] .si { background-color: #e0e0e0 } /* Literal.String.Interpol */ +body:not(.darkmode) code[class^='language-'] .sx { color: #D02000; background-color: #fff0f0 } /* Literal.String.Other */ +body:not(.darkmode) code[class^='language-'] .sr { color: #000000; background-color: #fff0ff } /* Literal.String.Regex */ +body:not(.darkmode) code[class^='language-'] .s1 { background-color: #fff0f0 } /* Literal.String.Single */ +body:not(.darkmode) code[class^='language-'] .ss { color: #A06000 } /* Literal.String.Symbol */ +body:not(.darkmode) code[class^='language-'] .bp { color: #007020 } /* Name.Builtin.Pseudo */ +body:not(.darkmode) code[class^='language-'] .vc { color: #306090 } /* Name.Variable.Class */ +body:not(.darkmode) code[class^='language-'] .vg { color: #d07000; font-weight: bold } /* Name.Variable.Global */ +body:not(.darkmode) code[class^='language-'] .vi { color: #3030B0 } /* Name.Variable.Instance */ +body:not(.darkmode) code[class^='language-'] .il { color: #0000D0; font-weight: bold } /* Literal.Number.Integer.Long */ diff --git a/content/assets/css/monokai.css b/content/assets/css/monokai.css new file mode 100644 index 0000000..3dcebc7 --- /dev/null +++ b/content/assets/css/monokai.css @@ -0,0 +1,64 @@ +body.darkmode code[class^='language-'] { background-color: #333; color: #f8f8f2} +body.darkmode code[class^='language-'] .hll { background-color: #49483e } +body.darkmode code[class^='language-'] .c { color: #75715e } /* Comment */ +body.darkmode code[class^='language-'] .err { color: #960050; background-color: #1e0010 } /* Error */ +body.darkmode code[class^='language-'] .k { color: #66d9ef } /* Keyword */ +body.darkmode code[class^='language-'] .l { color: #ae81ff } /* Literal */ +body.darkmode code[class^='language-'] .n { color: #f8f8f2 } /* Name */ +body.darkmode code[class^='language-'] .o { color: #f92672 } /* Operator */ +body.darkmode code[class^='language-'] .p { color: #f8f8f2 } /* Punctuation */ +body.darkmode code[class^='language-'] .cm { color: #75715e } /* Comment.Multiline */ +body.darkmode code[class^='language-'] .cp { color: #75715e } /* Comment.Preproc */ +body.darkmode code[class^='language-'] .c1 { color: #75715e } /* Comment.Single */ +body.darkmode code[class^='language-'] .cs { color: #75715e } /* Comment.Special */ +body.darkmode code[class^='language-'] .ge { font-style: italic } /* Generic.Emph */ +body.darkmode code[class^='language-'] .gs { font-weight: bold } /* Generic.Strong */ +body.darkmode code[class^='language-'] .kc { color: #66d9ef } /* Keyword.Constant */ +body.darkmode code[class^='language-'] .kd { color: #66d9ef } /* Keyword.Declaration */ +body.darkmode code[class^='language-'] .kn { color: #f92672 } /* Keyword.Namespace */ +body.darkmode code[class^='language-'] .kp { color: #66d9ef } /* Keyword.Pseudo */ +body.darkmode code[class^='language-'] .kr { color: #66d9ef } /* Keyword.Reserved */ +body.darkmode code[class^='language-'] .kt { color: #66d9ef } /* Keyword.Type */ +body.darkmode code[class^='language-'] .ld { color: #e6db74 } /* Literal.Date */ +body.darkmode code[class^='language-'] .m { color: #ae81ff } /* Literal.Number */ +body.darkmode code[class^='language-'] .s { color: #e6db74 } /* Literal.String */ +body.darkmode code[class^='language-'] .na { color: #a6e22e } /* Name.Attribute */ +body.darkmode code[class^='language-'] .nb { color: #f8f8f2 } /* Name.Builtin */ +body.darkmode code[class^='language-'] .nc { color: #a6e22e } /* Name.Class */ +body.darkmode code[class^='language-'] .no { color: #66d9ef } /* Name.Constant */ +body.darkmode code[class^='language-'] .nd { color: #a6e22e } /* Name.Decorator */ +body.darkmode code[class^='language-'] .ni { color: #f8f8f2 } /* Name.Entity */ +body.darkmode code[class^='language-'] .ne { color: #a6e22e } /* Name.Exception */ +body.darkmode code[class^='language-'] .nf { color: #a6e22e } /* Name.Function */ +body.darkmode code[class^='language-'] .nl { color: #f8f8f2 } /* Name.Label */ +body.darkmode code[class^='language-'] .nn { color: #f8f8f2 } /* Name.Namespace */ +body.darkmode code[class^='language-'] .nx { color: #a6e22e } /* Name.Other */ +body.darkmode code[class^='language-'] .py { color: #f8f8f2 } /* Name.Property */ +body.darkmode code[class^='language-'] .nt { color: #f92672 } /* Name.Tag */ +body.darkmode code[class^='language-'] .nv { color: #f8f8f2 } /* Name.Variable */ +body.darkmode code[class^='language-'] .ow { color: #f92672 } /* Operator.Word */ +body.darkmode code[class^='language-'] .w { color: #f8f8f2 } /* Text.Whitespace */ +body.darkmode code[class^='language-'] .mf { color: #ae81ff } /* Literal.Number.Float */ +body.darkmode code[class^='language-'] .mh { color: #ae81ff } /* Literal.Number.Hex */ +body.darkmode code[class^='language-'] .mi { color: #ae81ff } /* Literal.Number.Integer */ +body.darkmode code[class^='language-'] .mo { color: #ae81ff } /* Literal.Number.Oct */ +body.darkmode code[class^='language-'] .sb { color: #e6db74 } /* Literal.String.Backtick */ +body.darkmode code[class^='language-'] .sc { color: #e6db74 } /* Literal.String.Char */ +body.darkmode code[class^='language-'] .sd { color: #e6db74 } /* Literal.String.Doc */ +body.darkmode code[class^='language-'] .s2 { color: #e6db74 } /* Literal.String.Double */ +body.darkmode code[class^='language-'] .se { color: #ae81ff } /* Literal.String.Escape */ +body.darkmode code[class^='language-'] .sh { color: #e6db74 } /* Literal.String.Heredoc */ +body.darkmode code[class^='language-'] .si { color: #e6db74 } /* Literal.String.Interpol */ +body.darkmode code[class^='language-'] .sx { color: #e6db74 } /* Literal.String.Other */ +body.darkmode code[class^='language-'] .sr { color: #e6db74 } /* Literal.String.Regex */ +body.darkmode code[class^='language-'] .s1 { color: #e6db74 } /* Literal.String.Single */ +body.darkmode code[class^='language-'] .ss { color: #e6db74 } /* Literal.String.Symbol */ +body.darkmode code[class^='language-'] .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */ +body.darkmode code[class^='language-'] .vc { color: #f8f8f2 } /* Name.Variable.Class */ +body.darkmode code[class^='language-'] .vg { color: #f8f8f2 } /* Name.Variable.Global */ +body.darkmode code[class^='language-'] .vi { color: #f8f8f2 } /* Name.Variable.Instance */ +body.darkmode code[class^='language-'] .il { color: #ae81ff } /* Literal.Number.Integer.Long */ +body.darkmode code[class^='language-'] .gh { } /* Generic Heading & Diff Header */ +body.darkmode code[class^='language-'] .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */ +body.darkmode code[class^='language-'] .gd { color: #f92672; } /* Generic.Deleted & Diff Deleted */ +body.darkmode code[class^='language-'] .gi { color: #a6e22e; } /* Generic.Inserted & Diff Inserted */ diff --git a/content/assets/js/main.js b/content/assets/js/main.js index 9aed0d3..32f8de1 100644 --- a/content/assets/js/main.js +++ b/content/assets/js/main.js @@ -58,6 +58,18 @@ function updateNextPrevButtons() { if (nav.next != null) { next.classList.remove("disabled"); next.href = nav.next; } } +var darkmodeOn = (localStorage.getItem("darkmode") === "true"); +function toggleDarkMode() { + darkmodeOn = !darkmodeOn; + document.getElementsByTagName("body")[0].classList.toggle("darkmode"); + localStorage.setItem("darkmode", darkmodeOn); +} + +function initDarkMode() { + if (darkmodeOn) + document.getElementsByTagName("body")[0].classList.add("darkmode"); +} + var isMobile = window.screen.width < 720; if (localStorage.getItem("openside") === null) { @@ -69,6 +81,7 @@ if (localStorage.getItem("openside") === null) { localStorage.setItem(window.location.pathname, true); window.onload = function(){ updateSidebar(true); + initDarkMode(); setVisibleTags(); updateNextPrevButtons(); } diff --git a/content/content/footer.md b/content/content/footer.md index 32f6936..0686e2a 100644 --- a/content/content/footer.md +++ b/content/content/footer.md @@ -1 +1,2 @@ -
  • Contribute
    • +
  • Contribute
  • Toggle dark mode
    • diff --git a/nanoc.yaml b/nanoc.yaml index 349101f..adb6bb3 100644 --- a/nanoc.yaml +++ b/nanoc.yaml @@ -71,3 +71,4 @@ stylesheets: - normalize - colorful - main + - monokai