mirror of
https://github.com/denoland/deno
synced 2024-08-27 12:00:17 +00:00
website: use css variables and prefers-color-scheme (#2547)
This uses `prefers-color-scheme: dark` to automatically switch to dark mode if the user specifies it in their system settings. Dark mode is supported in Firefox 67, Chrome 76, Safari 12.1, and iOS 13 as of this commit, but the current status can be checked here: https://caniuse.com/#feat=prefers-color-scheme Additionally, this uses CSS Variables to implement the color-switching mechanism. This isn’t supported in IE, but the site degrades reasonably well with them disabled. Support table: https://caniuse.com/#feat=css-variables
This commit is contained in:
parent
01858f115a
commit
43f48386d7
|
@ -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" />
|
||||
|
|
|
@ -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" />
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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" />
|
||||
|
|
Loading…
Reference in a new issue