update: dark mode hook and style in about page

This commit is contained in:
alikia2x 2024-07-14 13:41:44 +08:00
parent 2c1f4f28bf
commit 874fd082f8
3 changed files with 7 additions and 6 deletions

View File

@ -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);

View File

@ -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",

View File

@ -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 ?? ""
} }
> >