diff options
author | Henry Schreiner <hschrein@cern.ch> | 2019-09-18 20:48:58 +0300 |
---|---|---|
committer | Henry Fredrick Schreiner <henry.fredrick.schreiner@cern.ch> | 2019-11-29 23:05:58 +0300 |
commit | d9fa52928f5881450d49db481e9f9da533b5476f (patch) | |
tree | 89dfaa216b1d9c72a02ab0dcf082b42e0faace71 | |
parent | 1ff3894b84b1802433b58e22dd22f4eb46a49fa9 (diff) |
Dark mode support
-rw-r--r-- | static/css/codeblock.css | 2 | ||||
-rw-r--r-- | static/css/main.css | 130 |
2 files changed, 119 insertions, 13 deletions
diff --git a/static/css/codeblock.css b/static/css/codeblock.css index cf80033..4481eed 100644 --- a/static/css/codeblock.css +++ b/static/css/codeblock.css @@ -30,4 +30,4 @@ pre code.hljs { .highlight td:last-child pre code, .highlight pre code { white-space: pre; -}
\ No newline at end of file +} diff --git a/static/css/main.css b/static/css/main.css index 779581f..1a51841 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -10,6 +10,12 @@ body { flex-flow: column; height: 100vh; } +@media (prefers-color-scheme: dark) { + body { + background: black; + color: white; + } +} .container[role=main] { margin-bottom:50px; flex: 1 0 auto; @@ -33,6 +39,12 @@ p a { /* text-decoration: underline */ color: #008AFF; } +@media (prefers-color-scheme: dark) { + p a { + color: #50afff; + } +} + h1,h2,h3,h4,h5,h6 { font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 800; @@ -40,6 +52,11 @@ h1,h2,h3,h4,h5,h6 { a { color: #008AFF; } +@media (prefers-color-scheme: dark) { + a { + color: #50afff; + } +} a:hover, a:focus { color: #0085a1; @@ -51,6 +68,11 @@ blockquote { blockquote p:first-child { margin-top: 0; } +@media (prefers-color-scheme: dark) { + blockquote { + border-left: 5px solid #444; + } +} hr.small { max-width: 100px; margin: 15px auto; @@ -95,25 +117,17 @@ div.panel-body a.list-group-item.view-all { font-weight: 600; } -::-moz-selection { - color: white; - text-shadow: none; - background: #0085a1; -} -::selection { +::-moz-selection, ::selection { color: white; text-shadow: none; background: #0085a1; } -img::selection { - color: white; - background: transparent; -} -img::-moz-selection { +img::selection, img::-moz-selection { color: white; background: transparent; } + img { display: block; margin: auto; @@ -141,6 +155,12 @@ img { border-bottom: 1px solid #EAEAEA; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; } +@media (prefers-color-scheme: dark) { + .navbar-custom { + background: #505050; + border-bottom: 1px solid #AAA; + } +} .navbar-custom .nav li a { text-transform: uppercase; @@ -154,6 +174,13 @@ img { color: #404040; } +@media (prefers-color-scheme: dark) { + .navbar-custom .navbar-brand, + .navbar-custom .nav li a { + color: #b0b0b0; + } +} + .navbar-custom .navbar-brand:hover, .navbar-custom .navbar-brand:focus , .navbar-custom .nav li a:hover, @@ -161,6 +188,15 @@ img { color: #0085a1; } +.navbar-custom .navbar-brand:hover, +.navbar-custom .navbar-brand:focus , +.navbar-custom .nav li a:hover, +.navbar-custom .nav li a:focus { + @media (prefers-color-scheme: dark) { + color: #b0e0ff; + } +} + .navbar-custom .navbar-brand-logo { padding-top: 0; -webkit-transition: padding .5s ease-in-out; @@ -294,6 +330,17 @@ img { border-width: 0 1px 1px; } } +@media (prefers-color-scheme: dark) { + .navbar-custom .nav .navlinks-container:hover { + background: #666; + } + .navbar-custom .nav .navlinks-container .navlinks-children a { + border: 1px solid #AAA; + } + .navbar-custom .nav .navlinks-container .navlinks-children a { + background: #444; + } +} /* --- Footer --- */ @@ -307,6 +354,7 @@ footer { footer a { color: #404040; + } footer .list-inline { @@ -335,13 +383,22 @@ footer .theme-by { } } +@media (prefers-color-scheme: dark) { + footer { + background: #444; + border-top: 1px #AAA solid; + } + footer a { + color: #AAA; + } +} + /* --- Post preview --- */ .post-preview { padding: 20px 0; border-bottom: 1px solid #eee; } - @media only screen and (min-width: 768px) { .post-preview { padding: 35px 0; @@ -356,6 +413,11 @@ footer .theme-by { text-decoration: none; color: #404040; } +@media (prefers-color-scheme: dark) { + .post-preview a { + color: #AAA; + } +} .post-preview a:focus, .post-preview a:hover { @@ -657,6 +719,12 @@ footer .theme-by { border: 1px solid #0085a1; } +@media (prefers-color-scheme: dark) { +.pager li a { + background: #444; + color: white; +} + .pager { margin: 10px 0 0; } @@ -815,3 +883,41 @@ h4.see-also { ul.share li:hover .fab { transform: scale(1.4) } + +/* Dark mode */ +@media (prefers-color-scheme: dark) { + code { + background-color: #222; + color: #fbb; + } + pre code { + color: #ccc; + } + .well { + background-color: #444; + } + .panel { + background-color: #222; + } + .list-group-item { + background-color: #333; + } + + pre.chroma { + color: white; + background-color: #444; + } + pre.chroma .k { + color: #44AACC; + } + pre.chroma .kt { + color: #33CCCC; + } + pre.chroma .o { + color: #AAA; + } + pre.chroma .nb { + color: #00fee9; + } + +} |