update: dark mode hook and style in about page
This commit is contained in:
parent
2c1f4f28bf
commit
874fd082f8
@ -6,10 +6,10 @@ export default function useDarkMode() {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const colorSchemeQueryList = window.matchMedia("(prefers-color-scheme: dark)");
|
const colorSchemeQueryList = window.matchMedia("(prefers-color-scheme: dark)");
|
||||||
setDarkMode(colorSchemeQueryList.matches ? true : false);
|
setDarkMode(colorSchemeQueryList.matches);
|
||||||
|
|
||||||
const handleChange = () => {
|
const handleChange = () => {
|
||||||
setDarkMode(colorSchemeQueryList.matches ? true : false);
|
setDarkMode(colorSchemeQueryList.matches);
|
||||||
};
|
};
|
||||||
|
|
||||||
colorSchemeQueryList.addEventListener("change", handleChange);
|
colorSchemeQueryList.addEventListener("change", handleChange);
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "sparkhome",
|
"name": "sparkhome",
|
||||||
"private": false,
|
"private": false,
|
||||||
"version": "5.3.0",
|
"version": "5.5.1",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "bun server.ts",
|
"dev": "bun server.ts",
|
||||||
|
@ -33,12 +33,13 @@ export default function AboutPage() {
|
|||||||
/>
|
/>
|
||||||
<Version
|
<Version
|
||||||
title="Backend API Version"
|
title="Backend API Version"
|
||||||
version={"/v" + apiVersion}
|
version={"/api/v" + apiVersion}
|
||||||
versionClass="bg-orange-500"
|
versionClass="bg-orange-500"
|
||||||
/>
|
/>
|
||||||
<p className="flex items-center my-3">
|
<p className="flex items-center my-3">
|
||||||
<span className="font-bold text-2xl mr-4 w-[36rem]">License</span>
|
<span className="font-bold text-2xl mr-4 w-[36rem]">License</span>
|
||||||
<span className="relative px-2 py-1 text-sm font-bold rounded-md text-nowrap underline bg-green-600">
|
<span className="relative px-2 py-1 text-sm font-bold rounded-md text-nowrap underline
|
||||||
|
bg-green-600 text-white">
|
||||||
<a href="/about/license">→ view</a>
|
<a href="/about/license">→ view</a>
|
||||||
</span>
|
</span>
|
||||||
</p>
|
</p>
|
||||||
@ -58,7 +59,7 @@ function Version(props: { title: string; version: string; versionClass?: string
|
|||||||
<span className="font-bold text-2xl mr-4 w-[36rem]">{props.title}</span>
|
<span className="font-bold text-2xl mr-4 w-[36rem]">{props.title}</span>
|
||||||
<span
|
<span
|
||||||
className={
|
className={
|
||||||
"relative px-2 py-1 text-sm font-bold rounded-md text-nowrap " +
|
"relative px-2 py-1 text-sm font-bold rounded-md text-nowrap text-white " +
|
||||||
props.versionClass ?? ""
|
props.versionClass ?? ""
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
|
Loading…
Reference in New Issue
Block a user