diff --git a/README.md b/README.md index 77b7339..0886d38 100644 --- a/README.md +++ b/README.md @@ -4,11 +4,13 @@

-Zen Browser Website +Zen Browser Website

[![](https://data.jsdelivr.com/v1/package/gh/zen-browser/www/badge)](https://www.jsdelivr.com/package/gh/zen-browser/www) +[Analytics](https://plausible.io/zen-browser.app/) | [Uptime-Phare](https://uptime.zen-browser.app) + This repository contains the source code for the Zen Browser Website. We are thrilled to welcome you to our community. Before you start, please read this document to understand how you can contribute to this project. Zen Browser's website is built with [Next.js](https://nextjs.org/), [TypeScript](https://www.typescriptlang.org/), and [Tailwind CSS](https://tailwindcss.com/). diff --git a/src/app/globals.css b/src/app/globals.css index 28eb341..1197e25 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -50,11 +50,11 @@ */ } - .dark { + [data-theme='dark'], .dark { --background: 0 0% 0%; --foreground: 0 0% 98%; - --surface: rgb(23, 23, 23); + --surface: rgb(23, 23, 23); --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; @@ -85,12 +85,13 @@ } @layer base { + html { + @apply scroll-smooth; + } * { @apply border-border; } body { @apply bg-background text-foreground; - - scroll-behavior: smooth; } -} +} \ No newline at end of file diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 684271c..9e47b35 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -24,12 +24,12 @@ export default async function RootLayout({ + diff --git a/src/components/download.tsx b/src/components/download.tsx index 85fc581..beccd9d 100644 --- a/src/components/download.tsx +++ b/src/components/download.tsx @@ -215,7 +215,7 @@ export default function DownloadPage() {

Downloaded! ❤️

- Zen Browser has been downloaded successfully. Enjoy browsing the + Your download of Zen Browser will begin shortly. Enjoy browsing the web with Zen!

diff --git a/src/components/features.tsx b/src/components/features.tsx index 24252c7..1bcf9a6 100644 --- a/src/components/features.tsx +++ b/src/components/features.tsx @@ -220,7 +220,7 @@ export default function Features() {
- +
diff --git a/src/components/mode-toggle.tsx b/src/components/mode-toggle.tsx index 2d1018c..c320e67 100644 --- a/src/components/mode-toggle.tsx +++ b/src/components/mode-toggle.tsx @@ -1,7 +1,7 @@ "use client"; -import * as React from "react"; -import { MoonIcon, SunIcon } from "@radix-ui/react-icons"; +import {useEffect, useState} from "react"; +import { MoonIcon, SunIcon, Half2Icon } from "@radix-ui/react-icons"; import { useTheme } from "next-themes"; import { Button } from "./ui/button"; import { @@ -12,14 +12,36 @@ import { } from "./ui/dropdown-menu"; export function ModeToggle() { + const [mounted, setMounted] = useState(false); const { theme, setTheme } = useTheme(); const toggleTheme = () => { - setTheme(theme === "light" ? "dark" : "light"); + switch (theme) { + case 'system': + setTheme("dark"); + break; + case 'dark': + setTheme("light"); + break; + case 'light': + setTheme('system'); + break; + } }; + + useEffect(() => { + setMounted(true); + }, []); + + if (!mounted) { + return null; + } + + console.log(theme); return ( );