diff options
| -rw-r--r-- | website/index.html | 1 | ||||
| -rw-r--r-- | website/manual.html | 1 | ||||
| -rw-r--r-- | website/style.css | 42 | ||||
| -rw-r--r-- | website/style_guide.html | 1 |
4 files changed, 37 insertions, 8 deletions
diff --git a/website/index.html b/website/index.html index 2920f1c2c..66b12871c 100644 --- a/website/index.html +++ b/website/index.html @@ -6,6 +6,7 @@ <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/styles/default.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/styles/github-gist.min.css"> + <link rel="stylesheet" media="(prefers-color-scheme: dark)" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/styles/monokai-sublime.min.css"> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/languages/typescript.min.js"></script> <link rel="stylesheet" href="style.css" /> diff --git a/website/manual.html b/website/manual.html index 6ac776770..3caa2c083 100644 --- a/website/manual.html +++ b/website/manual.html @@ -6,6 +6,7 @@ <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/styles/default.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/styles/github-gist.min.css"> + <link rel="stylesheet" media="(prefers-color-scheme: dark)" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/styles/monokai-sublime.min.css"> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/languages/typescript.min.js"></script> <link rel="stylesheet" href="style.css" /> diff --git a/website/style.css b/website/style.css index 07bb41a03..5f377663b 100644 --- a/website/style.css +++ b/website/style.css @@ -1,6 +1,32 @@ +:root { + --text-color: #444; + --background-color: #f0f0f0; + --link-color: #106ad5; + --table-border: #bbb; + --pre-color: #161616; + --pre-link-color: #001631; + --pre-background: rgba(36, 126, 233, 0.1); + --code-color: #333; +} + +@media (prefers-color-scheme: dark) { + :root { + --background-color: #444; + --text-color: #f0f0f0; + --link-color: #4498ff; + --pre-color: #e8e8e8; + --pre-link-color: #cee4ff; + --code-color: #ccc; + } + + #logo { + filter: invert(); + } +} + body { - color: #444; - background: #f0f0f0; + color: var(--text-color); + background: var(--background-color); padding: 0; line-height: 1.5; @@ -33,7 +59,7 @@ table { td, th { font-weight: normal; text-align: center; - border: 1px dotted #bbb; + border: 1px dotted var(--table-border); padding: 4px; } @@ -44,11 +70,11 @@ svg { } a { - color: #106ad5; + color: var(--link-color); } pre a { - color: #001631; + color: var(--pre-link-color); } h2 a, h3 a { @@ -64,8 +90,8 @@ h3:hover a { pre { /* background: rgba(36, 126, 233, 0.03); */ - color: #161616; - background: rgba(36, 126, 233, 0.1); + color: var(--pre-color); + background: var(--pre-background); padding: 15px; white-space: pre-wrap; word-break: break-all; @@ -96,7 +122,7 @@ header h1 { code { background: rgba(36, 126, 233, 0.1); padding: 2px 5px; - color: #333; + color: var(--code-color); } .hljs { diff --git a/website/style_guide.html b/website/style_guide.html index bd0f4ed00..667a2eac7 100644 --- a/website/style_guide.html +++ b/website/style_guide.html @@ -6,6 +6,7 @@ <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/styles/default.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/styles/github-gist.min.css"> + <link rel="stylesheet" media="(prefers-color-scheme: dark)" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/styles/monokai-sublime.min.css"> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/languages/typescript.min.js"></script> <link rel="stylesheet" href="style.css" /> |