Skip to content

Commit 817c71d

Browse files
dpvcdpvc
authored
Merge pull request #52 from mathjax/feature/dark-mode
Add dark-mode support to v4-lab
2 parents c550bb5 + a27599c commit 817c71d

File tree

3 files changed

+145
-108
lines changed

3 files changed

+145
-108
lines changed

‎lib/v4-lab-colors.css‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
:root {
2+
--background-color: #F9FAFB; /* very light gray with slight blue */
3+
--text-color: #1F2937; /* dark slate gray */
4+
--text-background: #FFFFFF; /* pure white */
5+
--text-disabled: #AAAAAA; /* a grey */
6+
--border-color: #D1D5DB; /* soft gray */
7+
--box-background: #FFFFFF; /* pure white */
8+
--box-border: #E5E7EB; /* light gray */
9+
}
10+
11+
@media (prefers-color-scheme: dark) {
12+
:root {
13+
--background-color: #1E1E2F; /* deep navy purple */
14+
--text-color: #E0E0E0; /* light gray */
15+
--text-background: #2C2C3C; /* dark slate */
16+
--text-disabled: #686868; /* a darker grey */
17+
--border-color: #3F3F4F; /* soft border gray-blue */
18+
--box-background: #2A2A3B; /* muted purple-gray */
19+
--box-border: #444456; /* subtle border */
20+
}
21+
}

‎lib/v4-lab.css‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
@import url("v4-lab-colors.css");
2+
3+
/* Global Body Style */
4+
body {
5+
background-color: var(--background-color);
6+
color: var(--text-color);
7+
}
8+
9+
.MJX_LiveRegion_Show {
10+
font-size: 150%;
11+
/* box-shadow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.1),
12+
0 0 .5px 1.5px hsla(230, 13%, 9%, 0.075),
13+
5px 8px 10px hsla(230, 13%, 9%, 0.09) ! important;*/
14+
}
15+
h1 {
16+
margin-left: 1.5em;
17+
margin-top: .25em;
18+
}
19+
body {
20+
min-height: 50em;
21+
}
22+
#layout {
23+
padding-left: .5em;
24+
display: table;
25+
width: 100%;
26+
box-sizing: border-box;
27+
min-height: 20em;
28+
}
29+
#layout > div {
30+
display: table-row;
31+
}
32+
#layout > div > div {
33+
display: table-cell;
34+
vertical-align: top;
35+
}
36+
#layout > div > div:last-child {
37+
width: 18.5em;
38+
max-width: 18.5em;
39+
}
40+
41+
#main {
42+
display: inline-block;
43+
}
44+
#input {
45+
width: 100%;
46+
box-sizing: border-box;
47+
border: 2px solid var(--border-color);
48+
background-color: var(--box-background);
49+
color: var(--text-color);
50+
border-radius: 6px;
51+
padding: 2px 4px;
52+
}
53+
#buttons {
54+
text-align: right;
55+
margin-top: 3px;
56+
margin-bottom: 1em;
57+
}
58+
.output {
59+
border: 2px solid var(--border-color);
60+
background-color: var(--box-background);
61+
border-radius: 6px;
62+
padding: 10px;
63+
width: 100%;
64+
max-width: 45em;
65+
overflow: auto;
66+
box-sizing: border-box;
67+
font-size: 150%;
68+
}
69+
#mathml {
70+
margin-top: 1.1em;
71+
font-size: 90%;
72+
width: 0;
73+
}
74+
75+
#controls {
76+
padding-left: 1em;
77+
font-size: 80%;
78+
}
79+
#controls > div,
80+
#controls details > div {
81+
margin-bottom: .5em;
82+
white-space: nowrap;
83+
}
84+
#controls details details {
85+
margin-left: 1em;
86+
}
87+
summary + * {
88+
margin-top: .5em;
89+
}
90+
#controls > hr {
91+
border: none;
92+
border-top: 2px dotted;
93+
margin: .7em 1em .7em 0;
94+
}
95+
#mml-package,
96+
#tex-package,
97+
#text-package {
98+
column-count: 2;
99+
white-space: normal ! important;
100+
}
101+
#mml-package > span > span,
102+
#tex-package > span > span,
103+
#text-package > span > span {
104+
display: inline-block;
105+
width: 9em;
106+
white-space: nowrap;
107+
}
108+
#mml-package label,
109+
#tex-package label,
110+
#text-package label {
111+
padding-left: 5px;
112+
}
113+
114+
#output-details label:first-child,
115+
#texinput-details label:first-child {
116+
display: inline-block;
117+
min-width: 7em;
118+
text-align: right;
119+
}
120+
121+
input[disabled] + label {
122+
color: var(--text-disabled);
123+
}

‎v4-lab.html‎

Lines changed: 1 addition & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html>
33
<head>
44
<meta charset="utf-8" />
5+
<link rel="stylesheet" href="lib/v4-lab.css">
56
<title>MathJax v4 Interactive Lab</title>
67
<script type="importmap">
78
{
@@ -27,114 +28,6 @@
2728
module = {exports: {}};
2829
PACKAGE_VERSION = "4.0.0-test";
2930
</script>
30-
<style>
31-
.MJX_LiveRegion_Show {
32-
font-size: 150%;
33-
}
34-
h1 {
35-
margin-left: 1.5em;
36-
margin-top: .25em;
37-
}
38-
body {
39-
min-height: 50em;
40-
}
41-
#layout {
42-
padding-left: .5em;
43-
display: table;
44-
width: 100%;
45-
box-sizing: border-box;
46-
min-height: 20em;
47-
}
48-
#layout > div {
49-
display: table-row;
50-
}
51-
#layout > div > div {
52-
display: table-cell;
53-
vertical-align: top;
54-
}
55-
#layout > div > div:last-child {
56-
width: 18.5em;
57-
max-width: 18.5em;
58-
}
59-
60-
#main {
61-
display: inline-block;
62-
}
63-
#input {
64-
width: 100%;
65-
box-sizing: border-box;
66-
}
67-
#buttons {
68-
text-align: right;
69-
margin-top: 3px;
70-
margin-bottom: 1em;
71-
}
72-
.output {
73-
border: 1px solid black;
74-
padding: 10px;
75-
width: 100%;
76-
max-width: 45em;
77-
overflow: auto;
78-
box-sizing: border-box;
79-
font-size: 150%;
80-
}
81-
#mathml {
82-
margin-top: 1.1em;
83-
font-size: 90%;
84-
width: 0;
85-
}
86-
87-
#controls {
88-
padding-left: 1em;
89-
font-size: 80%;
90-
}
91-
#controls > div,
92-
#controls details > div {
93-
margin-bottom: .5em;
94-
white-space: nowrap;
95-
}
96-
#controls details details {
97-
margin-left: 1em;
98-
}
99-
summary + * {
100-
margin-top: .5em;
101-
}
102-
#controls > hr {
103-
border: none;
104-
border-top: 2px dotted;
105-
margin: .7em 1em .7em 0;
106-
}
107-
#mml-package,
108-
#tex-package,
109-
#text-package {
110-
column-count: 2;
111-
white-space: normal ! important;
112-
}
113-
#mml-package > span > span,
114-
#tex-package > span > span,
115-
#text-package > span > span {
116-
display: inline-block;
117-
width: 9em;
118-
white-space: nowrap;
119-
}
120-
#mml-package label,
121-
#tex-package label,
122-
#text-package label {
123-
padding-left: 5px;
124-
}
125-
126-
#output-details label:first-child,
127-
#texinput-details label:first-child {
128-
display: inline-block;
129-
min-width: 7em;
130-
text-align: right;
131-
}
132-
133-
input[disabled] + label {
134-
color: #AAAAAA;
135-
}
136-
137-
</style>
13831
</head>
13932
<body>
14033

0 commit comments

Comments
 (0)