Skip to content

Commit

Permalink
Merge pull request #72 from bitesinbyte/bug/system-dark-mode
Browse files Browse the repository at this point in the history 
bug: Use system theme
  • Loading branch information
@manishtiwari25
manishtiwari25 authored Feb 15, 2025
2 parents 5005f1c + f80e5c2 commit e3db5c6
Show file tree
Hide file tree
Showing 7 changed files with 139 additions and 25 deletions.
1 change: 1 addition & 0 deletions src/app/android/app/capacitor.build.gradle
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ dependencies {
implementation project(':capacitor-keyboard')
implementation project(':capacitor-local-notifications')
implementation project(':capacitor-status-bar')
implementation project(':capawesome-capacitor-android-dark-mode-support')
implementation project(':capawesome-capacitor-android-edge-to-edge-support')
implementation project(':capawesome-capacitor-app-update')

Expand Down
3 changes: 3 additions & 0 deletions src/app/android/capacitor.settings.gradle
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@ project(':capacitor-local-notifications').projectDir = new File('../web/node_mod
include ':capacitor-status-bar'
project(':capacitor-status-bar').projectDir = new File('../web/node_modules/@capacitor/status-bar/android')

include ':capawesome-capacitor-android-dark-mode-support'
project(':capawesome-capacitor-android-dark-mode-support').projectDir = new File('../web/node_modules/@capawesome/capacitor-android-dark-mode-support/android')

include ':capawesome-capacitor-android-edge-to-edge-support'
project(':capawesome-capacitor-android-edge-to-edge-support').projectDir = new File('../web/node_modules/@capawesome/capacitor-android-edge-to-edge-support/android')

Expand Down
3 changes: 1 addition & 2 deletions src/app/web/app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,6 @@ export default function RootLayout({
<html lang="en" suppressHydrationWarning={true}>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="google-adsense-account" content="ca-pub-2889277787752693" />
</head>
<body
className={clsx(
Expand All @@ -117,7 +116,7 @@ export default function RootLayout({
)}
>
<SpeedInsights />
<Providers themeProps={{ attribute: "class", enableSystem: false, defaultTheme: "light" }}>
<Providers themeProps={{ attribute: "class", enableSystem: true }}>
<div className="flex flex-col min-h-screen">
<NavigationBar />
<main className="container mx-auto flex flex-col flex-grow w-full p-4">
Expand Down
57 changes: 37 additions & 20 deletions src/app/web/components/theme-switch.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,41 +4,58 @@ import { MoonFilledIcon } from "@/icons/MoonFilledIcon";
import { SunFilledIcon } from "@/icons/SunFilledIcon";
import { Capacitor } from "@capacitor/core";
import { StatusBar, Style } from "@capacitor/status-bar";
import { Switch } from "@heroui/switch";
import { useTheme } from "next-themes";
import { useEffect, useState } from "react";
import { EdgeToEdge } from '@capawesome/capacitor-android-edge-to-edge-support';
import { Button } from "@heroui/button";
import { SunMoonIcon } from "@/icons/SunMoonIcon";
import { useEffect } from "react";

export const ThemeSwitch = () => {
const { theme, setTheme } = useTheme();
const [isSelected, setIsSelected] = useState(!(theme === "light"));
const onChange = () => {
theme === "light" ? setTheme("dark") : setTheme("light");
setIsSelected(theme === "light");

const onChange = (newTheme: string) => {
setTheme(newTheme)
};

useEffect(() => {
if (Capacitor.isNativePlatform()) {
const style = theme === "light" ? Style.Light : Style.Dark;
const backgroundColor = theme === "light" ? "#FFFFFF" : "#000000";
let tempTheme = theme;
if (theme === "system") {
const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)");
tempTheme = darkModePreference.matches ? "dark" : "light";
}
const style = tempTheme === "light" ? Style.Light : Style.Dark;
const backgroundColor = tempTheme === "light" ? "#FFFFFF" : "#000000";
EdgeToEdge.setBackgroundColor({ color: backgroundColor });
StatusBar.setBackgroundColor({ color: backgroundColor });
StatusBar.setStyle({ style: style });
};
}
}, [theme]);

return (
<div className="h-auto bg-transparent rounded-lg justify-center group-data-[selected=true]:bg-transparent !text-default-500">
<Switch
defaultSelected
size="lg"
color="success"
startContent={<SunFilledIcon />}
endContent={<MoonFilledIcon />}
isSelected={isSelected}
onChange={onChange}
>
</Switch>
<div className="flex gap-1">
{theme &&
<>
<Button
variant={theme === "light" ? "bordered" : "light"}
color={theme === "light" ? "primary" : "default"}
onPress={() => onChange("light")}
isIconOnly
startContent={<SunFilledIcon />} />
<Button
variant={theme === "system" ? "bordered" : "light"}
color={theme === "system" ? "primary" : "default"}
onPress={() => onChange("system")}
isIconOnly
startContent={<SunMoonIcon />} />
<Button
variant={theme === "dark" ? "bordered" : "light"}
color={theme === "dark" ? "primary" : "default"}
onPress={() => onChange("dark")}
isIconOnly
startContent={<MoonFilledIcon />} />
</>
}
</div>
);
};
73 changes: 73 additions & 0 deletions src/app/web/icons/SunMoonIcon.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import { IconSvgProps } from "../types";

export const SunMoonIcon = ({
size = 24,
width,
height,
...props
}: IconSvgProps) => (
<svg
height={size || height}
viewBox="0 0 32 32"
width={size || width}
{...props}
>
<circle fill="currentColor"
clipRule="evenodd"
fillRule="evenodd"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
cx="21" cy="16" r="8" />
<line fill="currentColor"
clipRule="evenodd"
fillRule="evenodd"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10" x1="14" y1="5" x2="14" y2="6" />
<line fill="currentColor"
clipRule="evenodd"
fillRule="evenodd"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10" x1="4.81" y1="6.81" x2="6.93" y2="8.93" />
<line fill="currentColor"
clipRule="evenodd"
fillRule="evenodd"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10" x1="3" y1="16" x2="4" y2="16" />
<line fill="currentColor"
clipRule="evenodd"
fillRule="evenodd"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10" x1="4.81" y1="25.19" x2="6.93" y2="23.07" />
<line fill="currentColor"
clipRule="evenodd"
fillRule="evenodd"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10" x1="14" y1="27" x2="14" y2="26" />
<path fill="currentColor"
clipRule="evenodd"
fillRule="evenodd"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10" d="M16.43,22.57C15.67,22.85,14.85,23,14,23c-3.87,0-7-3.13-7-7s3.13-7,7-7c0.85,0,1.67,0.15,2.43,0.43" />
</svg>
);
24 changes: 22 additions & 2 deletions src/app/web/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion src/app/web/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "leben-in-deutschland",
"version": "1.10.4",
"version": "1.11.0",
"private": true,
"scripts": {
"dev": "next dev",
Expand All @@ -18,6 +18,7 @@
"@capacitor/keyboard": "^7.0.0",
"@capacitor/local-notifications": "^7.0.0",
"@capacitor/status-bar": "^7.0.0",
"@capawesome/capacitor-android-dark-mode-support": "^7.0.0",
"@capawesome/capacitor-android-edge-to-edge-support": "^7.0.0",
"@capawesome/capacitor-app-update": "^7.0.1",
"@heroui/button": "^2.0.33",
Expand Down

0 comments on commit e3db5c6

Please sign in to comment.