Dark mode in the playground (#17705)
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
This commit is contained in:
Kendell Randautofix-ci[bot] authored and GitHub committed
1 parent
7d9933d71f
commit
f591fbe062
4 files changed
+197
-25
No files matched your search
@@ -3,6 +3,7 @@
|
||||
"$schema": "https://raw.githubusercontent.com/streetsidesoftware/cspell/master/cspell.schema.json",
|
||||
"words": [
|
||||
"ACMR",
|
||||
"activeline",
|
||||
"Alexa",
|
||||
"Algora",
|
||||
"Amjad",
|
||||
@@ -31,6 +32,7 @@
|
||||
"blenda",
|
||||
"Bopomofo",
|
||||
"bottlenecked",
|
||||
"Braad",
|
||||
"Breakell",
|
||||
"Brevik",
|
||||
"bunx",
|
||||
@@ -99,6 +101,7 @@
|
||||
"glsl",
|
||||
"gofmt",
|
||||
"Gregor",
|
||||
"guttermarker",
|
||||
"Hampus",
|
||||
"hardline",
|
||||
"hardlines",
|
||||
@@ -137,6 +140,7 @@
|
||||
"Kasturi",
|
||||
"kddnewton",
|
||||
"Kearney",
|
||||
"Kempson",
|
||||
"Khatri",
|
||||
"Konstantin",
|
||||
"l’objectif",
|
||||
|
||||
@@ -11,6 +11,71 @@ const {
|
||||
ReactDOM: { createRoot },
|
||||
} = window;
|
||||
|
||||
function getInitialTheme() {
|
||||
const saved = localStorage.getItem("theme");
|
||||
if (saved) {
|
||||
return saved;
|
||||
}
|
||||
|
||||
return window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
? "dark"
|
||||
: "light";
|
||||
}
|
||||
|
||||
function applyTheme(theme) {
|
||||
document.documentElement.dataset.theme = theme;
|
||||
}
|
||||
|
||||
function ThemeToggle() {
|
||||
const [theme, setTheme] = React.useState(getInitialTheme);
|
||||
|
||||
const toggleTheme = () => {
|
||||
const newTheme = theme === "dark" ? "light" : "dark";
|
||||
setTheme(newTheme);
|
||||
localStorage.setItem("theme", newTheme);
|
||||
applyTheme(newTheme);
|
||||
};
|
||||
applyTheme(theme);
|
||||
|
||||
return React.createElement(
|
||||
"button",
|
||||
{
|
||||
onClick: toggleTheme,
|
||||
className: "btn",
|
||||
"aria-label": `Switch to ${theme === "dark" ? "light" : "dark"} theme`,
|
||||
},
|
||||
theme === "dark"
|
||||
? React.createElement(
|
||||
"svg",
|
||||
{
|
||||
class: "theme-icon",
|
||||
viewBox: "0 0 24 24",
|
||||
width: "14",
|
||||
height: "14",
|
||||
"aria-hidden": "true",
|
||||
},
|
||||
React.createElement("path", {
|
||||
fill: "currentColor",
|
||||
d: "M9.37 5.51a7.4 7.4 0 009.12 9.12A7 7 0 119.37 5.51M12 3a9 9 0 108.9 7.64 5.39 5.39 0 01-9.8-3.14 5.4 5.4 0 012.26-4.4Q12.69 3 12 3",
|
||||
}),
|
||||
)
|
||||
: React.createElement(
|
||||
"svg",
|
||||
{
|
||||
class: "theme-icon",
|
||||
viewBox: "0 0 24 24",
|
||||
width: "14",
|
||||
height: "14",
|
||||
"aria-hidden": "true",
|
||||
},
|
||||
React.createElement("path", {
|
||||
fill: "currentColor",
|
||||
d: "M12 9a1 1 0 0 1 0 6 1 1 0 0 1 0-6m0-2a5 5 0 1 0 0 10 5 5 0 0 0 0-10M2 13h2a1 1 0 0 0 0-2H2a1 1 0 0 0 0 2m18 0h2a1 1 0 0 0 0-2h-2a1 1 0 0 0 0 2M11 2v2a1 1 0 0 0 2 0V2a1 1 0 0 0-2 0m0 18v2a1 1 0 0 0 2 0v-2a1 1 0 0 0-2 0M5.99 4.58a1 1 0 1 0-1.41 1.41l1.06 1.06a1 1 0 1 0 1.41-1.41zm12.37 12.37a1 1 0 1 0-1.41 1.41l1.06 1.06a1 1 0 1 0 1.41-1.41zm1.06-10.96a1 1 0 1 0-1.41-1.41l-1.06 1.06a1 1 0 1 0 1.41 1.41zM7.05 18.36a1 1 0 1 0-1.41-1.41l-1.06 1.06a1 1 0 1 0 1.41 1.41z",
|
||||
}),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class App extends React.Component {
|
||||
constructor() {
|
||||
super();
|
||||
@@ -62,6 +127,14 @@ function augmentOption(option) {
|
||||
return option;
|
||||
}
|
||||
|
||||
const linksContainer = document.querySelector(".links");
|
||||
if (linksContainer) {
|
||||
const themeToggleContainer = document.createElement("div");
|
||||
linksContainer.appendChild(themeToggleContainer);
|
||||
const themeToggleRoot = createRoot(themeToggleContainer);
|
||||
themeToggleRoot.render(<ThemeToggle />);
|
||||
}
|
||||
|
||||
const container = document.getElementById("root");
|
||||
const root = createRoot(container);
|
||||
root.render(<App />);
|
||||
@@ -215,7 +215,7 @@ export function InputPanel(props) {
|
||||
matchBrackets={true}
|
||||
showCursorWhenSelecting={true}
|
||||
tabSize={4}
|
||||
rulerColor="#eeeeee"
|
||||
rulerColor="color-mix(in oklab, currentColor 10%, transparent)"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
@@ -226,7 +226,7 @@ export function OutputPanel(props) {
|
||||
<CodeMirrorPanel
|
||||
readOnly={true}
|
||||
lineNumbers={true}
|
||||
rulerColor="#444444"
|
||||
rulerColor="currentColor"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -4,8 +4,16 @@
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: #fafafa;
|
||||
color: #6a6a6a;
|
||||
background-color: light-dark(#fafafa, #1b1b1d);
|
||||
color: light-dark(#6a6a6a, #e3e3e3);
|
||||
--color-border: light-dark(#ddd, #606770);
|
||||
color-scheme: light dark;
|
||||
&[data-theme="light"] {
|
||||
color-scheme: light;
|
||||
}
|
||||
&[data-theme="dark"] {
|
||||
color-scheme: dark;
|
||||
}
|
||||
font-family:
|
||||
-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
|
||||
Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial,
|
||||
@@ -87,10 +95,15 @@ header h1 {
|
||||
|
||||
.links {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
font-size: 16px;
|
||||
align-items: center;
|
||||
}
|
||||
.links > * + * {
|
||||
margin-left: 15px;
|
||||
.links > * {
|
||||
display: flex;
|
||||
}
|
||||
.theme-icon {
|
||||
padding-block: 2px;
|
||||
}
|
||||
|
||||
.editors-container {
|
||||
@@ -110,7 +123,7 @@ header h1 {
|
||||
display: flex;
|
||||
flex: 1 1 100%;
|
||||
position: relative;
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.disabled-output-panel {
|
||||
@@ -140,7 +153,7 @@ header h1 {
|
||||
|
||||
.editor {
|
||||
flex-basis: 50%;
|
||||
border-left: 1px solid #ddd;
|
||||
border-left: 1px solid var(--color-border);
|
||||
margin-left: -1px;
|
||||
}
|
||||
}
|
||||
@@ -165,6 +178,83 @@ header h1 {
|
||||
bottom: 0;
|
||||
line-height: 1.6;
|
||||
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
|
||||
|
||||
&:is([data-theme="dark"] *) {
|
||||
/* Credit: Chris Kempson, Gerard Braad */
|
||||
background: #000000;
|
||||
color: #eaeaea;
|
||||
div.CodeMirror-selected {
|
||||
background: #424242;
|
||||
}
|
||||
.CodeMirror-gutters {
|
||||
background: #000000;
|
||||
border-right: 0px;
|
||||
}
|
||||
.CodeMirror-guttermarker {
|
||||
color: #e78c45;
|
||||
}
|
||||
.CodeMirror-guttermarker-subtle {
|
||||
color: #777;
|
||||
}
|
||||
.CodeMirror-linenumber {
|
||||
color: #424242;
|
||||
}
|
||||
.CodeMirror-cursor {
|
||||
border-left: 1px solid #6a6a6a;
|
||||
}
|
||||
|
||||
span.cm-comment {
|
||||
color: #d27b53;
|
||||
}
|
||||
span.cm-atom {
|
||||
color: #a16a94;
|
||||
}
|
||||
span.cm-number {
|
||||
color: #a16a94;
|
||||
}
|
||||
|
||||
span.cm-property,
|
||||
span.cm-attribute {
|
||||
color: #99cc99;
|
||||
}
|
||||
span.cm-keyword {
|
||||
color: #d54e53;
|
||||
}
|
||||
span.cm-string {
|
||||
color: #e7c547;
|
||||
}
|
||||
|
||||
span.cm-variable {
|
||||
color: #b9ca4a;
|
||||
}
|
||||
span.cm-variable-2 {
|
||||
color: #7aa6da;
|
||||
}
|
||||
span.cm-def {
|
||||
color: #e78c45;
|
||||
}
|
||||
span.cm-bracket {
|
||||
color: #eaeaea;
|
||||
}
|
||||
span.cm-tag {
|
||||
color: #d54e53;
|
||||
}
|
||||
span.cm-link {
|
||||
color: #a16a94;
|
||||
}
|
||||
span.cm-error {
|
||||
background: #d54e53;
|
||||
color: #6a6a6a;
|
||||
}
|
||||
|
||||
.CodeMirror-activeline-background {
|
||||
background: #2a2a2a;
|
||||
}
|
||||
.CodeMirror-matchingbracket {
|
||||
text-decoration: underline;
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
@@ -203,8 +293,8 @@ header h1 {
|
||||
box-sizing: border-box;
|
||||
width: 225px;
|
||||
overflow-y: auto;
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-right: 1px solid #ddd;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
border-right: 1px solid var(--color-border);
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
@@ -222,7 +312,7 @@ header h1 {
|
||||
.sub-options {
|
||||
flex: 1;
|
||||
padding: 15px 0 10px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.sub-options:last-child {
|
||||
@@ -264,39 +354,44 @@ input[type="number"] {
|
||||
display: inline-block;
|
||||
height: 18px;
|
||||
padding: 0 5px;
|
||||
border: 1px solid #d1d2d3;
|
||||
border-radius: 0.25em;
|
||||
background-image: linear-gradient(to bottom, #fafbfc, #e4ebf0);
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
light-dark(#fafbfc, #090a11),
|
||||
light-dark(#e4ebf0, #000)
|
||||
);
|
||||
color: light-dark(#24292e, #fff);
|
||||
border: 1px solid var(--color-border);
|
||||
font-size: 11px;
|
||||
line-height: 18px;
|
||||
font-weight: 600;
|
||||
font-family: inherit;
|
||||
color: #24292e;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.btn:focus {
|
||||
border-color: #c8e1ff;
|
||||
.btn:enabled:is(:hover, :active) {
|
||||
border-color: light-dark(#afb1b2, #6f7b81);
|
||||
}
|
||||
|
||||
.btn:hover:enabled {
|
||||
background-color: #e6ebf1;
|
||||
background-image: linear-gradient(to bottom, #f0f3f6, #dce3ec);
|
||||
border-color: #afb1b2;
|
||||
.btn:enabled:hover {
|
||||
background-color: light-dark(#e6ebf1, #2c3a44);
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
light-dark(#f0f3f6, #1a2b34),
|
||||
light-dark(#dce3ec, #090a11)
|
||||
);
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
background-color: #e9ecef;
|
||||
.btn:enabled:active {
|
||||
background-color: light-dark(#e9ecef, #1a2b34);
|
||||
background-image: none;
|
||||
border-color: #afb1b2;
|
||||
box-shadow: inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15);
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
color: #afb1b2;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
|
||||
Reference in new issue
Block a user