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 @@