From af9a74f7117444ae62090adfe96c49470e9c0c63 Mon Sep 17 00:00:00 2001 From: Andika Irawan Date: Tue, 15 Nov 2022 22:13:11 +0700 Subject: [PATCH] implement dark mode --- index/css/prettify-dark.css | 119 ++++++++++++++++++ index/css/prettify.css | 1 + index/css/style.css | 46 ++++++- index/index.html | 18 ++- index/js/google-code-prettify/.DS_Store | Bin 0 -> 6148 bytes index/js/google-code-prettify/lang-Splus.js | 18 +++ index/js/google-code-prettify/lang-aea.js | 18 +++ index/js/google-code-prettify/lang-agc.js | 18 +++ index/js/google-code-prettify/lang-apollo.js | 18 +++ index/js/google-code-prettify/lang-basic.js | 18 +++ index/js/google-code-prettify/lang-cbm.js | 18 +++ index/js/google-code-prettify/lang-cl.js | 18 +++ index/js/google-code-prettify/lang-clj.js | 17 +++ index/js/google-code-prettify/lang-css.js | 18 +++ index/js/google-code-prettify/lang-dart.js | 19 +++ index/js/google-code-prettify/lang-el.js | 18 +++ index/js/google-code-prettify/lang-erl.js | 18 +++ index/js/google-code-prettify/lang-erlang.js | 18 +++ index/js/google-code-prettify/lang-ex.js | 19 +++ index/js/google-code-prettify/lang-exs.js | 19 +++ index/js/google-code-prettify/lang-fs.js | 18 +++ index/js/google-code-prettify/lang-go.js | 17 +++ index/js/google-code-prettify/lang-hs.js | 18 +++ index/js/google-code-prettify/lang-kotlin.js | 18 +++ index/js/google-code-prettify/lang-lasso.js | 20 +++ .../google-code-prettify/lang-lassoscript.js | 20 +++ index/js/google-code-prettify/lang-latex.js | 17 +++ index/js/google-code-prettify/lang-lgt.js | 18 +++ index/js/google-code-prettify/lang-lisp.js | 18 +++ index/js/google-code-prettify/lang-ll.js | 17 +++ index/js/google-code-prettify/lang-llvm.js | 17 +++ index/js/google-code-prettify/lang-logtalk.js | 18 +++ index/js/google-code-prettify/lang-ls.js | 20 +++ index/js/google-code-prettify/lang-lsp.js | 18 +++ index/js/google-code-prettify/lang-lua.js | 18 +++ index/js/google-code-prettify/lang-matlab.js | 29 +++++ index/js/google-code-prettify/lang-ml.js | 18 +++ index/js/google-code-prettify/lang-mumps.js | 18 +++ index/js/google-code-prettify/lang-n.js | 19 +++ index/js/google-code-prettify/lang-nemerle.js | 19 +++ index/js/google-code-prettify/lang-pascal.js | 18 +++ index/js/google-code-prettify/lang-proto.js | 17 +++ index/js/google-code-prettify/lang-r.js | 18 +++ index/js/google-code-prettify/lang-rd.js | 17 +++ index/js/google-code-prettify/lang-rkt.js | 18 +++ index/js/google-code-prettify/lang-rust.js | 20 +++ index/js/google-code-prettify/lang-s.js | 18 +++ index/js/google-code-prettify/lang-scala.js | 18 +++ index/js/google-code-prettify/lang-scm.js | 18 +++ index/js/google-code-prettify/lang-sql.js | 18 +++ index/js/google-code-prettify/lang-ss.js | 18 +++ index/js/google-code-prettify/lang-swift.js | 18 +++ index/js/google-code-prettify/lang-tcl.js | 18 +++ index/js/google-code-prettify/lang-tex.js | 17 +++ index/js/google-code-prettify/lang-vb.js | 19 +++ index/js/google-code-prettify/lang-vbs.js | 19 +++ index/js/google-code-prettify/lang-vhd.js | 19 +++ index/js/google-code-prettify/lang-vhdl.js | 19 +++ index/js/google-code-prettify/lang-wiki.js | 18 +++ index/js/google-code-prettify/lang-xq.js | 19 +++ index/js/google-code-prettify/lang-xquery.js | 19 +++ index/js/google-code-prettify/lang-yaml.js | 18 +++ index/js/google-code-prettify/lang-yml.js | 18 +++ index/js/google-code-prettify/prettify.js | 46 +++++++ index/js/google-code-prettify/run_prettify.js | 64 ++++++++++ index/js/style.js | 68 +++++++++- 66 files changed, 1422 insertions(+), 6 deletions(-) create mode 100644 index/css/prettify-dark.css create mode 100644 index/css/prettify.css create mode 100644 index/js/google-code-prettify/.DS_Store create mode 100644 index/js/google-code-prettify/lang-Splus.js create mode 100644 index/js/google-code-prettify/lang-aea.js create mode 100644 index/js/google-code-prettify/lang-agc.js create mode 100644 index/js/google-code-prettify/lang-apollo.js create mode 100644 index/js/google-code-prettify/lang-basic.js create mode 100644 index/js/google-code-prettify/lang-cbm.js create mode 100644 index/js/google-code-prettify/lang-cl.js create mode 100644 index/js/google-code-prettify/lang-clj.js create mode 100644 index/js/google-code-prettify/lang-css.js create mode 100644 index/js/google-code-prettify/lang-dart.js create mode 100644 index/js/google-code-prettify/lang-el.js create mode 100644 index/js/google-code-prettify/lang-erl.js create mode 100644 index/js/google-code-prettify/lang-erlang.js create mode 100644 index/js/google-code-prettify/lang-ex.js create mode 100644 index/js/google-code-prettify/lang-exs.js create mode 100644 index/js/google-code-prettify/lang-fs.js create mode 100644 index/js/google-code-prettify/lang-go.js create mode 100644 index/js/google-code-prettify/lang-hs.js create mode 100644 index/js/google-code-prettify/lang-kotlin.js create mode 100644 index/js/google-code-prettify/lang-lasso.js create mode 100644 index/js/google-code-prettify/lang-lassoscript.js create mode 100644 index/js/google-code-prettify/lang-latex.js create mode 100644 index/js/google-code-prettify/lang-lgt.js create mode 100644 index/js/google-code-prettify/lang-lisp.js create mode 100644 index/js/google-code-prettify/lang-ll.js create mode 100644 index/js/google-code-prettify/lang-llvm.js create mode 100644 index/js/google-code-prettify/lang-logtalk.js create mode 100644 index/js/google-code-prettify/lang-ls.js create mode 100644 index/js/google-code-prettify/lang-lsp.js create mode 100644 index/js/google-code-prettify/lang-lua.js create mode 100644 index/js/google-code-prettify/lang-matlab.js create mode 100644 index/js/google-code-prettify/lang-ml.js create mode 100644 index/js/google-code-prettify/lang-mumps.js create mode 100644 index/js/google-code-prettify/lang-n.js create mode 100644 index/js/google-code-prettify/lang-nemerle.js create mode 100644 index/js/google-code-prettify/lang-pascal.js create mode 100644 index/js/google-code-prettify/lang-proto.js create mode 100644 index/js/google-code-prettify/lang-r.js create mode 100644 index/js/google-code-prettify/lang-rd.js create mode 100644 index/js/google-code-prettify/lang-rkt.js create mode 100644 index/js/google-code-prettify/lang-rust.js create mode 100644 index/js/google-code-prettify/lang-s.js create mode 100644 index/js/google-code-prettify/lang-scala.js create mode 100644 index/js/google-code-prettify/lang-scm.js create mode 100644 index/js/google-code-prettify/lang-sql.js create mode 100644 index/js/google-code-prettify/lang-ss.js create mode 100644 index/js/google-code-prettify/lang-swift.js create mode 100644 index/js/google-code-prettify/lang-tcl.js create mode 100644 index/js/google-code-prettify/lang-tex.js create mode 100644 index/js/google-code-prettify/lang-vb.js create mode 100644 index/js/google-code-prettify/lang-vbs.js create mode 100644 index/js/google-code-prettify/lang-vhd.js create mode 100644 index/js/google-code-prettify/lang-vhdl.js create mode 100644 index/js/google-code-prettify/lang-wiki.js create mode 100644 index/js/google-code-prettify/lang-xq.js create mode 100644 index/js/google-code-prettify/lang-xquery.js create mode 100644 index/js/google-code-prettify/lang-yaml.js create mode 100644 index/js/google-code-prettify/lang-yml.js create mode 100644 index/js/google-code-prettify/prettify.js create mode 100644 index/js/google-code-prettify/run_prettify.js diff --git a/index/css/prettify-dark.css b/index/css/prettify-dark.css new file mode 100644 index 0000000..4df2fc2 --- /dev/null +++ b/index/css/prettify-dark.css @@ -0,0 +1,119 @@ +/*! Color themes for Google Code Prettify | MIT License | github.com/jmblog/color-themes-for-google-code-prettify */ +.prettyprint { + background: #1d1f21; + font-family: Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace; + border: 0 !important; + } + + .pln { + color: #c5c8c6; + } + + /* Specify class=linenums on a pre to get line numbering */ + ol.linenums { + margin-top: 0; + margin-bottom: 0; + color: #969896; + } + + li.L0, + li.L1, + li.L2, + li.L3, + li.L4, + li.L5, + li.L6, + li.L7, + li.L8, + li.L9 { + padding-left: 1em; + background-color: #1d1f21; + list-style-type: decimal; + } + + @media screen { + + /* string content */ + + .str { + color: #b5bd68; + } + + /* keyword */ + + .kwd { + color: #b294bb; + } + + /* comment */ + + .com { + color: #969896; + } + + /* type name */ + + .typ { + color: #81a2be; + } + + /* literal value */ + + .lit { + color: #de935f; + } + + /* punctuation */ + + .pun { + color: #c5c8c6; + } + + /* lisp open bracket */ + + .opn { + color: #c5c8c6; + } + + /* lisp close bracket */ + + .clo { + color: #c5c8c6; + } + + /* markup tag name */ + + .tag { + color: #cc6666; + } + + /* markup attribute name */ + + .atn { + color: #de935f; + } + + /* markup attribute value */ + + .atv { + color: #8abeb7; + } + + /* declaration */ + + .dec { + color: #de935f; + } + + /* variable name */ + + .var { + color: #cc6666; + } + + /* function name */ + + .fun { + color: #81a2be; + } + } \ No newline at end of file diff --git a/index/css/prettify.css b/index/css/prettify.css new file mode 100644 index 0000000..e6fe342 --- /dev/null +++ b/index/css/prettify.css @@ -0,0 +1 @@ +.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.clo,.opn,.pun{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.kwd,.tag,.typ{font-weight:700}.str{color:#060}.kwd{color:#006}.com{color:#600;font-style:italic}.typ{color:#404}.lit{color:#044}.clo,.opn,.pun{color:#440}.tag{color:#006}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee} \ No newline at end of file diff --git a/index/css/style.css b/index/css/style.css index 4e4b66e..fdfa818 100644 --- a/index/css/style.css +++ b/index/css/style.css @@ -1,6 +1,50 @@ +/* if no preference given */ body { + --text-color: #222; + --bkg-color: #fff; + --input-color: #222 !important; + --card-color: #fff !important; + +} +body.dark-theme { + --text-color: #eee; + --bkg-color: #121212; + --input-color: #fff !important; + --card-color: #1D1F21 !important; +} + +@media (prefers-color-scheme: dark) { + /* defaults to dark theme */ + body { + --text-color: #eee; + --bkg-color: #121212; + --input-color: #fff !important; + --card-color: #1D1F21 !important; + } + body.light-theme { + --text-color: #222; + --bkg-color: #fff; + --input-color: #222 !important; + --card-color: #fff !important; + } +} + + +/* set color properties based on theme */ +body { + background-color: var(--bkg-color); + color: var(--text-color); padding-bottom: 50px; } + +.text-input{ + color: var(--input-color) !important; +} + +.card { + background-color: var(--card-color) !important; +} + .mt-10 { margin-top:10px; } @@ -249,4 +293,4 @@ circle { .request-list.selected { background: #dadfe3;; -} \ No newline at end of file +} diff --git a/index/index.html b/index/index.html index 4c5f95d..ece2611 100644 --- a/index/index.html +++ b/index/index.html @@ -11,9 +11,20 @@ + +
+
+
+ +
+
+
+
@@ -21,7 +32,7 @@
- +
    @@ -32,7 +43,7 @@
    - +
    @@ -231,7 +242,8 @@