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(() => {
const colorSchemeQueryList = window.matchMedia("(prefers-color-scheme: dark)");
setDarkMode(colorSchemeQueryList.matches ? true : false);
setDarkMode(colorSchemeQueryList.matches);
const handleChange = () => {
setDarkMode(colorSchemeQueryList.matches ? true : false);
setDarkMode(colorSchemeQueryList.matches);
};
colorSchemeQueryList.addEventListener("change", handleChange);

View File

@ -1,7 +1,7 @@
{
"name": "sparkhome",
"private": false,
"version": "5.3.0",
"version": "5.5.1",
"type": "module",
"scripts": {
"dev": "bun server.ts",

View File

@ -33,12 +33,13 @@ export default function AboutPage() {
/>
<Version
title="Backend API Version"
version={"/v" + apiVersion}
version={"/api/v" + apiVersion}
versionClass="bg-orange-500"
/>
<p className="flex items-center my-3">
<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>
</span>
</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={
"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 ?? ""
}
>