Skip to content

Commit 2de4bac

Browse files
peterpppeterpp
committed
Add support for dark mode
1 parent 6f7a323 commit 2de4bac

File tree

3 files changed

+95
-60
lines changed

3 files changed

+95
-60
lines changed

‎demo.html

Lines changed: 34 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,44 @@
11
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
22
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
33
<head>
4-
<title>JUSH - Demo</title>
5-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4+
<title>JUSH - Demo</title>
5+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6+
<style type="text/css">
7+
@media (prefers-color-scheme: dark) {
8+
body { background: #111; color: #ccc; }
9+
}
10+
</style>
611
</head>
712

813
<body>
14+
<form action="">
15+
<div>
16+
<textarea id="source" name="source" rows="12" cols="80" wrap="off"></textarea><br />
17+
Language: <select name="language">
18+
<option value="htm">HTML</option>
19+
<option value="css">CSS</option>
20+
<option value="js">JavaScript</option>
21+
<option value="php">PHP</option>
22+
<option value="sql">MySQL</option>
23+
<option value="sqlite">SQLite</option>
24+
<option value="pgsql">PostgreSQL</option>
25+
<option value="mssql">MS SQL</option>
26+
<option value="oracle">Oracle</option>
27+
<option value="simpledb">SimpleDB</option>
28+
<option value="cnf">Apache</option>
29+
<option value="phpini">php.ini</option>
30+
<option value="http">HTTP</option>
31+
<option value="mail">E-mail</option>
32+
<option value="xml">XML</option>
33+
<option value="txt">Text</option>
34+
</select>
35+
</div>
36+
</form>
937

10-
<form action="">
11-
<div>
12-
<textarea id="source" name="source" rows="12" cols="80" wrap="off"></textarea><br />
13-
Language: <select name="language">
14-
<option value="htm">HTML</option>
15-
<option value="css">CSS</option>
16-
<option value="js">JavaScript</option>
17-
<option value="php">PHP</option>
18-
<option value="sql">MySQL</option>
19-
<option value="sqlite">SQLite</option>
20-
<option value="pgsql">PostgreSQL</option>
21-
<option value="mssql">MS SQL</option>
22-
<option value="oracle">Oracle</option>
23-
<option value="simpledb">SimpleDB</option>
24-
<option value="cnf">Apache</option>
25-
<option value="phpini">php.ini</option>
26-
<option value="http">HTTP</option>
27-
<option value="mail">E-mail</option>
28-
<option value="xml">XML</option>
29-
<option value="txt">Text</option>
30-
</select>
31-
</div>
32-
</form>
33-
34-
<pre><code id="result"></code></pre>
35-
36-
<script type="text/javascript" src="jush.js"></script>
37-
<script type="text/javascript" src="jush-api.js"></script>
38-
<script type="text/javascript" src="demo.js"></script>
38+
<pre><code id="result"></code></pre>
3939

40+
<script type="text/javascript" src="jush.js"></script>
41+
<script type="text/javascript" src="jush-api.js"></script>
42+
<script type="text/javascript" src="demo.js"></script>
4043
</body>
4144
</html>

‎jush.css

Lines changed: 42 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,53 @@
1-
.jush { color: black; }
1+
.jush {
2+
--text-color: #000;
3+
--keyword-color: #03c;
4+
--identifier-color: #f00;
5+
--string-color: #808;
6+
--number-color: #090;
7+
--attribute-color: teal;
8+
--js-bg-color: #f0f6ff;
9+
--css-bg-color: #fffae0;
10+
--php-bg-color: #fff3f0;
11+
--php-sql-bg-color: #fffae0;
12+
}
13+
@media (prefers-color-scheme: dark) {
14+
.jush {
15+
--text-color: #ccc;
16+
--keyword-color: #acf;
17+
--identifier-color: #f88;
18+
--string-color: #e6e;
19+
--number-color: #0c0;
20+
--attribute-color: #3cc;
21+
--js-bg-color: #036;
22+
--css-bg-color: #404000;
23+
--php-bg-color: #520;
24+
--php-sql-bg-color: #404000;
25+
}
26+
}
27+
.jush { color: var(--text-color); }
228
.jush-htm_com, .jush-com, .jush-com_code, .jush-one, .jush-php_doc, .jush-php_com, .jush-php_one, .jush-js_one, .jush-js_doc { color: gray; }
3-
.jush-php, .jush-php_new, .jush-php_fun { color: #000033; background-color: #FFF0F0; }
4-
.jush-php_quo, .jush-quo, .jush-quo_one, .jush-php_eot, .jush-apo, .jush-sql_apo, .jush-sqlite_apo, .jush-sql_quo, .jush-sql_eot { color: green; }
5-
.jush-php_apo { color: #009F00; }
29+
.jush-php, .jush-php_new, .jush-php_fun { color: var(--text-color); background-color: var(--php-bg-color); }
30+
.jush-php_quo, .jush-quo, .jush-quo_one, .jush-php_eot, .jush-apo, .jush-php_apo, .jush-sql_apo, .jush-sqlite_apo, .jush-sql_quo, .jush-sql_eot { color: var(--string-color); }
631
.jush-php_quo_var, .jush-php_var, .jush-sql_var { font-style: italic; }
732
.jush-php_apo .jush-php_quo_var, .jush-php_apo .jush-php_var { font-style: normal; }
8-
.jush-php_halt2 { background-color: white; color: black; }
9-
.jush-tag_css, .jush-att_css .jush-att_quo, .jush-att_css .jush-att_apo, .jush-att_css .jush-att_val { color: black; background-color: #FFFFE0; }
10-
.jush-tag_js, .jush-att_js .jush-att_quo, .jush-att_js .jush-att_apo, .jush-att_js .jush-att_val, .jush-css_js { color: black; background-color: #F0F0FF; }
11-
.jush-tag, .jush-xml_tag { color: navy; }
12-
.jush-att, .jush-xml_att, .jush-att_js, .jush-att_css, .jush-att_http { color: teal; }
13-
.jush-att_quo, .jush-att_apo, .jush-att_val { color: purple; }
14-
.jush-ent { color: purple; }
15-
.jush-js_key, .jush-js_key .jush-quo, .jush-js_key .jush-apo { color: purple; }
16-
.jush-js_reg { color: navy; }
33+
.jush-php_halt2 { background-color: white; color: var(--text-color); }
34+
.jush-tag_css, .jush-att_css .jush-att_quo, .jush-att_css .jush-att_apo, .jush-att_css .jush-att_val { color: var(--text-color); background-color: var(--css-bg-color); }
35+
.jush-tag_js, .jush-att_js .jush-att_quo, .jush-att_js .jush-att_apo, .jush-att_js .jush-att_val, .jush-css_js { color: var(--text-color); background-color: var(--js-bg-color); }
36+
.jush-tag, .jush-xml_tag { color: var(--keyword-color); }
37+
.jush-att, .jush-xml_att, .jush-att_js, .jush-att_css, .jush-att_http { color: var(--attribute-color); }
38+
.jush-att_quo, .jush-att_apo, .jush-att_val { color: var(--string-color); }
39+
.jush-ent { color: var(--string-color); }
40+
.jush-js_key, .jush-js_key .jush-quo, .jush-js_key .jush-apo { color: var(--string-color); }
41+
.jush-js_reg { color: var(--keyword-color); }
1742
.jush-php_sql .jush-php_quo, .jush-php_sql .jush-php_apo,
1843
.jush-php_sqlite .jush-php_quo, .jush-php_sqlite .jush-php_apo,
1944
.jush-php_pgsql .jush-php_quo, .jush-php_pgsql .jush-php_apo,
2045
.jush-php_mssql .jush-php_quo, .jush-php_mssql .jush-php_apo,
21-
.jush-php_oracle .jush-php_quo, .jush-php_oracle .jush-php_apo
22-
{ background-color: #FFBBB0; }
23-
.jush-bac, .jush-php_bac, .jush-bra, .jush-mssql_bra, .jush-sqlite_quo { color: red; }
24-
.jush-num, .jush-clr { color: #007F7F; }
46+
.jush-php_oracle .jush-php_quo, .jush-php_oracle .jush-php_apo { background-color: var(--php-sql-bg-color); }
47+
.jush-bac, .jush-php_bac, .jush-bra, .jush-mssql_bra, .jush-sqlite_quo { color: var(--identifier-color); }
48+
.jush-num, .jush-clr { color: var(--number-color); }
2549

26-
.jush a { color: navy; }
50+
.jush a { color: var(--keyword-color); }
2751
.jush a.jush-help { cursor: help; }
2852
.jush-sql a, .jush-sql_code a, .jush-sqlite a, .jush-pgsql a, .jush-mssql a, .jush-oracle a, .jush-simpledb a { font-weight: bold; }
2953
.jush-php_sql .jush-php_quo a, .jush-php_sql .jush-php_apo a { font-weight: normal; }

‎tests.html

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,24 @@
11
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
22
<html lang="en">
3-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4-
<title>JUSH - Tests</title>
5-
<link rel="stylesheet" type="text/css" href="jush.css" />
6-
<style type="text/css">
7-
.error { background: red; color: white; }
8-
</style>
9-
<body>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5+
<title>JUSH - Tests</title>
6+
<link rel="stylesheet" type="text/css" href="jush.css" />
7+
<style type="text/css">
8+
.error { background: #e00; color: #fee; }
9+
@media (prefers-color-scheme: dark) {
10+
body { background: #111; color: #ccc; }
11+
.error { background: #900; color: #fcc; }
12+
}
13+
</style>
14+
</head>
1015

11-
<div id="result"></div>
16+
<body>
17+
<div id="result"></div>
1218

13-
<script type="text/javascript" src="jush.js"></script>
14-
<script type="text/javascript" src="tests.js"></script>
19+
<script type="text/javascript" src="jush.js"></script>
20+
<script type="text/javascript" src="tests.js"></script>
1521

16-
<noscript><p>Enable JavaScript to run tests.</p></noscript>
22+
<noscript><p>Enable JavaScript to run tests.</p></noscript>
23+
</body>
24+
</html>

0 commit comments

Comments
 (0)