Skip to content

Move the script to set light/dark mode to a common JS file. #159

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
geoffrey-wu merged 6 commits into from
Apr 26, 2023
Merged

Move the script to set light/dark mode to a common JS file. #159

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b121710
Move the script to set light/dark mode to a common JS file.
alopezlago Apr 26, 2023
6c134f0
Fix linter issues
alopezlago Apr 26, 2023
edf7197
Merge branch 'main' into alopezlago/applyTheme
alopezlago Apr 26, 2023
0e63442
Update api-docs to use the applyTheme script
alopezlago Apr 26, 2023
aee0081
Fix double quote issue
alopezlago Apr 26, 2023
e2569bf
preload `light.css`
geoffrey-wu Apr 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 2 additions & 12 deletions client/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,9 @@
<link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
<link type="image/x-icon" href="/favicon.ico" rel="icon">

<link href="/bootstrap/light.css" rel="stylesheet">
<link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
<script>
if (localStorage.getItem('color-theme') === 'dark') {
document.querySelector('#custom-css').setAttribute('href', "/bootstrap/dark.css");
} else if (localStorage.getItem('color-theme') === 'light') {
document.querySelector('#custom-css').setAttribute('href', "/bootstrap/light.css");
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
// Get OS preferred color scheme
document.querySelector('#custom-css').setAttribute('href', "/bootstrap/dark.css");
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
document.querySelector('#custom-css').setAttribute('href', "/bootstrap/light.css");
}
</script>
<script src="/apply-theme.js"></script>
</head>

<body>
Expand Down
18 changes: 5 additions & 13 deletions client/api-docs/check-answer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,9 @@
<link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
<link type="image/x-icon" href="/favicon.ico" rel="icon">

<link href="/bootstrap/light.css" rel="stylesheet">
<link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
<script>
if (localStorage.getItem('color-theme') === 'dark') {
document.querySelector('#custom-css').setAttribute('href', "/bootstrap/dark.css");
} else if (localStorage.getItem('color-theme') === 'light') {
document.querySelector('#custom-css').setAttribute('href', "/bootstrap/light.css");
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
// Get OS preferred color scheme
document.querySelector('#custom-css').setAttribute('href', "/bootstrap/dark.css");
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
document.querySelector('#custom-css').setAttribute('href', "/bootstrap/light.css");
}
</script>
<script src="/apply-theme.js"></script>
</head>

<body>
Expand Down Expand Up @@ -122,7 +112,9 @@ <h5 class="mt-4 mb-2">Other</h5>
</div>

<div class="col-9">
<h3 class="md-4"><div><code>GET</code> <code>qbreader.org/api/check-answer</code></div></h3>
<h3 class="md-4">
<div><code>GET</code> <code>qbreader.org/api/check-answer</code></div>
</h3>

<p>
Judge an answer to be correct, incorrect, or prompt. Directed prompts are supported.
Expand Down
14 changes: 2 additions & 12 deletions client/api-docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,9 @@
<link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
<link type="image/x-icon" href="/favicon.ico" rel="icon">

<link href="/bootstrap/light.css" rel="stylesheet">
<link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
<script>
if (localStorage.getItem('color-theme') === 'dark') {
document.querySelector('#custom-css').setAttribute('href', "/bootstrap/dark.css");
} else if (localStorage.getItem('color-theme') === 'light') {
document.querySelector('#custom-css').setAttribute('href', "/bootstrap/light.css");
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
// Get OS preferred color scheme
document.querySelector('#custom-css').setAttribute('href', "/bootstrap/dark.css");
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
document.querySelector('#custom-css').setAttribute('href', "/bootstrap/light.css");
}
</script>
<script src="/apply-theme.js"></script>
</head>

<body>
Expand Down
14 changes: 2 additions & 12 deletions client/api-docs/multiplayer/room-list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,9 @@
<link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
<link type="image/x-icon" href="/favicon.ico" rel="icon">

<link href="/bootstrap/light.css" rel="stylesheet">
<link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
<script>
if (localStorage.getItem('color-theme') === 'dark') {
document.querySelector('#custom-css').setAttribute('href', "/bootstrap/dark.css");
} else if (localStorage.getItem('color-theme') === 'light') {
document.querySelector('#custom-css').setAttribute('href', "/bootstrap/light.css");
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
// Get OS preferred color scheme
document.querySelector('#custom-css').setAttribute('href', "/bootstrap/dark.css");
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
document.querySelector('#custom-css').setAttribute('href', "/bootstrap/light.css");
}
</script>
<script src="/apply-theme.js"></script>
</head>

<body>
Expand Down
18 changes: 5 additions & 13 deletions client/api-docs/num-packets.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,9 @@
<link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
<link type="image/x-icon" href="/favicon.ico" rel="icon">

<link href="/bootstrap/light.css" rel="stylesheet">
<link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
<script>
if (localStorage.getItem('color-theme') === 'dark') {
document.querySelector('#custom-css').setAttribute('href', "/bootstrap/dark.css");
} else if (localStorage.getItem('color-theme') === 'light') {
document.querySelector('#custom-css').setAttribute('href', "/bootstrap/light.css");
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
// Get OS preferred color scheme
document.querySelector('#custom-css').setAttribute('href', "/bootstrap/dark.css");
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
document.querySelector('#custom-css').setAttribute('href', "/bootstrap/light.css");
}
</script>
<script src="/apply-theme.js"></script>
</head>

<body>
Expand Down Expand Up @@ -122,7 +112,9 @@ <h5 class="mt-4 mb-2">Other</h5>
</div>

<div class="col-9">
<h3 class="md-4"><div><code>GET</code> <code>qbreader.org/api/num-packets</code></div></h3>
<h3 class="md-4">
<div><code>GET</code> <code>qbreader.org/api/num-packets</code></div>
</h3>

<p>
Get the number of packets in a set.
Expand Down
21 changes: 7 additions & 14 deletions client/api-docs/packet-bonuses.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,9 @@
<link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
<link type="image/x-icon" href="/favicon.ico" rel="icon">

<link href="/bootstrap/light.css" rel="stylesheet">
<link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
<script>
if (localStorage.getItem('color-theme') === 'dark') {
document.querySelector('#custom-css').setAttribute('href', "/bootstrap/dark.css");
} else if (localStorage.getItem('color-theme') === 'light') {
document.querySelector('#custom-css').setAttribute('href', "/bootstrap/light.css");
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
// Get OS preferred color scheme
document.querySelector('#custom-css').setAttribute('href', "/bootstrap/dark.css");
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
document.querySelector('#custom-css').setAttribute('href', "/bootstrap/light.css");
}
</script>
<script src="/apply-theme.js"></script>
</head>

<body>
Expand Down Expand Up @@ -122,7 +112,9 @@ <h5 class="mt-4 mb-2">Other</h5>
</div>

<div class="col-9">
<h3 class="md-4"><div><code>GET</code> <code>qbreader.org/api/packet-bonuses</code></div></h3>
<h3 class="md-4">
<div><code>GET</code> <code>qbreader.org/api/packet-bonuses</code></div>
</h3>

<p>
Get only bonuses from a packet.
Expand Down Expand Up @@ -161,7 +153,8 @@ <h4 class="mt-4 md-2" id="returns">Returns</h4>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div>
<code>bonuses</code><code class="text-muted">: <a href="/api-docs/schemas#bonus" target="_blank" class="text-muted">Bonus</a>[]</code>
<code>bonuses</code><code
class="text-muted">: <a href="/api-docs/schemas#bonus" target="_blank" class="text-muted">Bonus</a>[]</code>
</div>
<div>
An array of
Expand Down
21 changes: 7 additions & 14 deletions client/api-docs/packet-tossups.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,9 @@
<link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
<link type="image/x-icon" href="/favicon.ico" rel="icon">

<link href="/bootstrap/light.css" rel="stylesheet">
<link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
<script>
if (localStorage.getItem('color-theme') === 'dark') {
document.querySelector('#custom-css').setAttribute('href', "/bootstrap/dark.css");
} else if (localStorage.getItem('color-theme') === 'light') {
document.querySelector('#custom-css').setAttribute('href', "/bootstrap/light.css");
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
// Get OS preferred color scheme
document.querySelector('#custom-css').setAttribute('href', "/bootstrap/dark.css");
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
document.querySelector('#custom-css').setAttribute('href', "/bootstrap/light.css");
}
</script>
<script src="/apply-theme.js"></script>
</head>

<body>
Expand Down Expand Up @@ -122,7 +112,9 @@ <h5 class="mt-4 mb-2">Other</h5>
</div>

<div class="col-9">
<h3 class="md-4"><div><code>GET</code> <code>qbreader.org/api/packet-tossups</code></div></h3>
<h3 class="md-4">
<div><code>GET</code> <code>qbreader.org/api/packet-tossups</code></div>
</h3>

<p>
Get only tossups from a packet.
Expand Down Expand Up @@ -161,7 +153,8 @@ <h4 class="mt-4 md-2" id="returns">Returns</h4>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div>
<code>tossups</code><code class="text-muted">: <a href="/api-docs/schemas#tossup" target="_blank" class="text-muted">Tossup</a>[]</code>
<code>tossups</code><code
class="text-muted">: <a href="/api-docs/schemas#tossup" target="_blank" class="text-muted">Tossup</a>[]</code>
</div>
<div>
An array of
Expand Down
24 changes: 9 additions & 15 deletions client/api-docs/packet.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,9 @@
<link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
<link type="image/x-icon" href="/favicon.ico" rel="icon">

<link href="/bootstrap/light.css" rel="stylesheet">
<link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
<script>
if (localStorage.getItem('color-theme') === 'dark') {
document.querySelector('#custom-css').setAttribute('href', "/bootstrap/dark.css");
} else if (localStorage.getItem('color-theme') === 'light') {
document.querySelector('#custom-css').setAttribute('href', "/bootstrap/light.css");
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
// Get OS preferred color scheme
document.querySelector('#custom-css').setAttribute('href', "/bootstrap/dark.css");
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
document.querySelector('#custom-css').setAttribute('href', "/bootstrap/light.css");
}
</script>
<script src="/apply-theme.js"></script>
</head>

<body>
Expand Down Expand Up @@ -122,7 +112,9 @@ <h5 class="mt-4 mb-2">Other</h5>
</div>

<div class="col-9">
<h3 class="md-4"><div><code>GET</code> <code>qbreader.org/api/packet</code></div></h3>
<h3 class="md-4">
<div><code>GET</code> <code>qbreader.org/api/packet</code></div>
</h3>

<p>
Get a specific packet from a set.
Expand Down Expand Up @@ -161,7 +153,8 @@ <h4 class="mt-4 md-2" id="returns">Returns</h4>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div>
<code>tossups</code><code class="text-muted">: <a href="/api-docs/schemas#tossup" target="_blank" class="text-muted">Tossup</a>[]</code>
<code>tossups</code><code
class="text-muted">: <a href="/api-docs/schemas#tossup" target="_blank" class="text-muted">Tossup</a>[]</code>
</div>
<div>
An array of
Expand All @@ -172,7 +165,8 @@ <h4 class="mt-4 md-2" id="returns">Returns</h4>
</li>
<li class="list-group-item">
<div>
<code>bonuses</code><code class="text-muted">: <a href="/api-docs/schemas#bonus" target="_blank" class="text-muted">Bonus</a>[]</code>
<code>bonuses</code><code
class="text-muted">: <a href="/api-docs/schemas#bonus" target="_blank" class="text-muted">Bonus</a>[]</code>
</div>
<div>
An array of
Expand Down
18 changes: 5 additions & 13 deletions client/api-docs/random-name.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,9 @@
<link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
<link type="image/x-icon" href="/favicon.ico" rel="icon">

<link href="/bootstrap/light.css" rel="stylesheet">
<link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
<script>
if (localStorage.getItem('color-theme') === 'dark') {
document.querySelector('#custom-css').setAttribute('href', "/bootstrap/dark.css");
} else if (localStorage.getItem('color-theme') === 'light') {
document.querySelector('#custom-css').setAttribute('href', "/bootstrap/light.css");
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
// Get OS preferred color scheme
document.querySelector('#custom-css').setAttribute('href', "/bootstrap/dark.css");
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
document.querySelector('#custom-css').setAttribute('href', "/bootstrap/light.css");
}
</script>
<script src="/apply-theme.js"></script>
</head>

<body>
Expand Down Expand Up @@ -122,7 +112,9 @@ <h5 class="mt-4 mb-2">Other</h5>
</div>

<div class="col-9">
<h3 class="md-4"><div><code>GET</code> <code>qbreader.org/api/random-name</code></div></h3>
<h3 class="md-4">
<div><code>GET</code> <code>qbreader.org/api/random-name</code></div>
</h3>

<p>
Get a random adjective-noun pair that can be used as a name.
Expand Down
20 changes: 6 additions & 14 deletions client/api-docs/random-question.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,9 @@
<link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
<link type="image/x-icon" href="/favicon.ico" rel="icon">

<link href="/bootstrap/light.css" rel="stylesheet">
<link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
<script>
if (localStorage.getItem('color-theme') === 'dark') {
document.querySelector('#custom-css').setAttribute('href', "/bootstrap/dark.css");
} else if (localStorage.getItem('color-theme') === 'light') {
document.querySelector('#custom-css').setAttribute('href', "/bootstrap/light.css");
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
// Get OS preferred color scheme
document.querySelector('#custom-css').setAttribute('href', "/bootstrap/dark.css");
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
document.querySelector('#custom-css').setAttribute('href', "/bootstrap/light.css");
}
</script>
<script src="/apply-theme.js"></script>
</head>

<body>
Expand Down Expand Up @@ -122,7 +112,9 @@ <h5 class="mt-4 mb-2">Other</h5>
</div>

<div class="col-9">
<h3 class="md-4"><div><code>POST</code> <code>qbreader.org/api/random-question</code></div></h3>
<h3 class="md-4">
<div><code>POST</code> <code>qbreader.org/api/random-question</code></div>
</h3>

<p>
Get random questions from the database.
Expand Down Expand Up @@ -188,7 +180,7 @@ <h4 class="mt-4 md-2" id="parameters">Parameters</h4>
<li>This API endpoint does <b>not</b> check for consistency between categories and
subcategories.</li>
<li><i>For example, requesting the <code>"History"</code> and the <code>"Biology"</code>
and <code>"Chemistry"</code> subcategories will return no questions.</i></li>
and <code>"Chemistry"</code> subcategories will return no questions.</i></li>
</ul>
</div>
</li>
Expand Down
18 changes: 5 additions & 13 deletions client/api-docs/report-question.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,9 @@
<link href="/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
<link type="image/x-icon" href="/favicon.ico" rel="icon">

<link href="/bootstrap/light.css" rel="stylesheet">
<link href="/bootstrap/dark.css" rel="stylesheet" id="custom-css">
<script>
if (localStorage.getItem('color-theme') === 'dark') {
document.querySelector('#custom-css').setAttribute('href', "/bootstrap/dark.css");
} else if (localStorage.getItem('color-theme') === 'light') {
document.querySelector('#custom-css').setAttribute('href', "/bootstrap/light.css");
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
// Get OS preferred color scheme
document.querySelector('#custom-css').setAttribute('href', "/bootstrap/dark.css");
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
document.querySelector('#custom-css').setAttribute('href', "/bootstrap/light.css");
}
</script>
<script src="/apply-theme.js"></script>
</head>

<body>
Expand Down Expand Up @@ -122,7 +112,9 @@ <h5 class="mt-4 mb-2">Other</h5>
</div>

<div class="col-9">
<h3 class="md-4"><div><code>POST</code> <code>qbreader.org/api/report-question</code></div></h3>
<h3 class="md-4">
<div><code>POST</code> <code>qbreader.org/api/report-question</code></div>
</h3>

<p>
Report a question error.
Expand Down
Loading