Skip to content

Commit 2f01274

Browse files
rhysdrhysd
committed
support both light and dark modes in playground
1 parent ccaabc8 commit 2f01274

File tree

3 files changed

+41
-23
lines changed

3 files changed

+41
-23
lines changed

‎playground/index.html

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="en" data-theme="dark">
2+
<html lang="en" >
33
<head>
44
<title>actionlint playground</title>
55
<meta charset="utf-8"/>
@@ -60,20 +60,20 @@ <h2 class="subtitle">Static checker for GitHub Actions workflow files</h2>
6060
<h2><i id="res-icon" class="devicon-githubactions-plain"></i>Resources</h2>
6161
<p>
6262
<ul>
63-
<li><a class="has-text-link-light" target="_blank" rel="noopener" href="https://github.com/rhysd/actionlint/blob/v1.7.1/docs/checks.md">Checks by actionlint</a></li>
64-
<li><a class="has-text-link-light" target="_blank" rel="noopener" href="https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions">Workflow syntax for GitHub Actions</a></li>
65-
<li><a class="has-text-link-light" target="_blank" rel="noopener" href="https://docs.github.com/en/actions/learn-github-actions/contexts">Available contexts in workflow</a></li>
66-
<li><a class="has-text-link-light" target="_blank" rel="noopener" href="https://docs.github.com/en/actions/security-guides/security-hardening-for-github-actions">Security hardening for GitHub Actions</a></li>
63+
<li><a class="has-text-link-my-light" target="_blank" rel="noopener" href="https://github.com/rhysd/actionlint/blob/v1.7.1/docs/checks.md">Checks by actionlint</a></li>
64+
<li><a class="has-text-link-my-light" target="_blank" rel="noopener" href="https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions">Workflow syntax for GitHub Actions</a></li>
65+
<li><a class="has-text-link-my-light" target="_blank" rel="noopener" href="https://docs.github.com/en/actions/learn-github-actions/contexts">Available contexts in workflow</a></li>
66+
<li><a class="has-text-link-my-light" target="_blank" rel="noopener" href="https://docs.github.com/en/actions/security-guides/security-hardening-for-github-actions">Security hardening for GitHub Actions</a></li>
6767
</ul>
6868
</p>
6969
</div>
7070
</section>
7171
</main>
7272
<footer class="footer">
73-
<div class="content is-small has-text-centered has-text-grey-light">
73+
<div class="content is-small has-text-centered has-text-grey">
7474
<p>
75-
<a class="has-text-link-light" rel="noopener" href="https://github.com/rhysd/actionlint">actionlint</a> by <a class="has-text-link-light" rel="noopener" href="https://github.com/rhysd">@rhysd</a>.
76-
The source code and website content are licensed <a class="has-text-link-light" rel="noopener" href="https://github.com/rhysd/actionlint/blob/main/LICENSE.txt">MIT</a>.
75+
<a class="has-text-link-my-light" rel="noopener" href="https://github.com/rhysd/actionlint">actionlint</a> by <a class="has-text-link-my-light" rel="noopener" href="https://github.com/rhysd">@rhysd</a>.
76+
The source code and website content are licensed <a class="has-text-link-my-light" rel="noopener" href="https://github.com/rhysd/actionlint/blob/main/LICENSE.txt">MIT</a>.
7777
</p>
7878
</div>
7979
</footer>

‎playground/index.ts

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,11 @@
1919
const checkUrlInput = getElementById('check-url-input') as HTMLInputElement;
2020
const permalinkButton = getElementById('permalink-btn');
2121
const invalidInputMessage = getElementById('invalid-input');
22+
const preferDark = window.matchMedia('(prefers-color-scheme: dark)');
23+
24+
function colorTheme(isDark: boolean): 'material-darker' | 'default' {
25+
return isDark ? 'material-darker' : 'default';
26+
}
2227

2328
async function getRemoteSource(url: string): Promise<string> {
2429
function getUrlToFetch(u: string): string {
@@ -104,7 +109,7 @@ jobs:
104109

105110
const editorConfig: CodeMirror.EditorConfiguration = {
106111
mode: 'yaml',
107-
theme: 'material-darker',
112+
theme: colorTheme(preferDark.matches),
108113
lineNumbers: true,
109114
lineWrapping: true,
110115
autofocus: true,
@@ -207,7 +212,7 @@ jobs:
207212
a.href = url;
208213
a.rel = 'noopener';
209214
a.textContent = url;
210-
a.className = 'has-text-link-light is-underlined';
215+
a.className = 'has-text-link-my-light is-underlined';
211216
a.addEventListener('click', e => e.stopPropagation());
212217
ret.push(a);
213218

@@ -306,6 +311,10 @@ jobs:
306311
window.location.hash = b64;
307312
});
308313

314+
preferDark.addListener(event => {
315+
editor.setOption('theme', colorTheme(event.matches));
316+
});
317+
309318
const go = new Go();
310319

311320
let result;

‎playground/style.css

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,6 @@ main {
2727
flex-direction: row;
2828
}
2929

30-
@media (width <= 1200px) {
31-
#linter {
32-
flex-direction: column;
33-
}
34-
}
35-
3630
#version {
3731
margin-left: 1em;
3832
}
@@ -61,12 +55,6 @@ main {
6155
flex-direction: column;
6256
}
6357

64-
@media (width <= 1200px) {
65-
.split-pane {
66-
width: 100%;
67-
}
68-
}
69-
7058
#error-msg,
7159
#success-msg {
7260
display: none;
@@ -83,7 +71,7 @@ main {
8371
}
8472

8573
#lint-result {
86-
--bulma-table-background-color: #222;
74+
--bulma-table-background-color: #efeff8;
8775

8876
border-radius: 8px;
8977
cursor: pointer;
@@ -102,3 +90,24 @@ main {
10290
footer {
10391
margin-top: 32px;
10492
}
93+
94+
@media (width <= 1200px) {
95+
#linter {
96+
flex-direction: column;
97+
}
98+
99+
.split-pane {
100+
width: 100%;
101+
}
102+
}
103+
104+
@media (prefers-color-scheme: dark) {
105+
#lint-result {
106+
--bulma-table-background-color: #222;
107+
}
108+
109+
/* Similar to `.has-text-link-light`, but use a light color only in dark mode */
110+
.has-text-link-my-light {
111+
--bulma-color-l: var(--bulma-link-light-l);
112+
}
113+
}

0 commit comments

Comments
 (0)