development/deno
development/deno
1
0
Fork 0
mirror of https://github.com/denoland/deno synced 2024-07-17 02:57:34 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

website: use css variables and prefers-color-scheme (#2547)

Browse source 
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:
Jed Fox 2019-06-19 19:53:07 -04:00 committed by Ryan Dahl
parent 01858f115a
commit 43f48386d7
4 changed files with 37 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
website/index.html
View file

@ -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
website/manual.html
View file

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

42
website/style.css
View file

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

1
website/style_guide.html
View file

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