From ad3b49a01a07d9adacd8f6be4dd928896538d629 Mon Sep 17 00:00:00 2001 From: tarunsoftprodigy Date: Thu, 10 Oct 2024 20:08:17 +0530 Subject: [PATCH] theme color changes accordign to the app --- mirror-2/.vscode/settings.json | 10 +++-- mirror-2/app/globals.css | 61 +++++++++++++++++++++++++- mirror-2/app/layout.client.tsx | 23 +++++----- mirror-2/components/theme-switcher.tsx | 5 ++- mirror-2/components/ui/button.tsx | 8 ++-- mirror-2/components/ui/input.tsx | 16 +++---- 6 files changed, 92 insertions(+), 31 deletions(-) diff --git a/mirror-2/.vscode/settings.json b/mirror-2/.vscode/settings.json index 3ecdef9d..735b441f 100644 --- a/mirror-2/.vscode/settings.json +++ b/mirror-2/.vscode/settings.json @@ -1,5 +1,10 @@ { - "deno.enablePaths": ["supabase/functions"], + "[typescript]": { + "editor.defaultFormatter": "denoland.vscode-deno" + }, + "deno.enablePaths": [ + "supabase/functions" + ], "deno.lint": true, "deno.unstable": [ "bare-node-builtins", @@ -16,8 +21,5 @@ "http", "net" ], - "[typescript]": { - "editor.defaultFormatter": "denoland.vscode-deno" - }, "typescript.tsdk": "node_modules/typescript/lib" } diff --git a/mirror-2/app/globals.css b/mirror-2/app/globals.css index e0e1120c..259dae22 100644 --- a/mirror-2/app/globals.css +++ b/mirror-2/app/globals.css @@ -2,7 +2,7 @@ @tailwind components; @tailwind utilities; -@layer base { +/* @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; @@ -57,7 +57,66 @@ --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; } +} */ + +@layer base { + .blue-theme { + --background: 222.2 84% 4.9%; + --foreground: 210 40% 98%; + --card: 222.2 84% 4.9%; + --card-foreground: 210 40% 98%; + --popover: 222.2 84% 4.9%; + --popover-foreground: 210 40% 98%; + --primary: 217.2 91.2% 59.8%; + --primary-foreground: 222.2 47.4% 11.2%; + --secondary: 217.2 32.6% 17.5%; + --secondary-foreground: 210 40% 98%; + --muted: 217.2 32.6% 17.5%; + --muted-foreground: 215 20.2% 65.1%; + --accent: 217.2 32.6% 17.5%; + --accent-foreground: 210 40% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 210 40% 98%; + --border: 217.2 32.6% 17.5%; + --input: 217.2 32.6% 17.5%; + --radius: 0.5rem; + --ring: 224.3 76.3% 48%; + --chart-1: 220 70% 50%; + --chart-2: 160 60% 45%; + --chart-3: 30 80% 55%; + --chart-4: 280 65% 60%; + --chart-5: 340 75% 55%; + } + + .red-theme { + --background: 0 0% 3.9%; + --foreground: 0 0% 98%; + --card: 0 0% 3.9%; + --card-foreground: 0 0% 98%; + --popover: 0 0% 3.9%; + --popover-foreground: 0 0% 98%; + --primary: 0 72.2% 50.6%; + --primary-foreground: 0 85.7% 97.3%; + --secondary: 0 0% 14.9%; + --secondary-foreground: 0 0% 98%; + --muted: 0 0% 14.9%; + --muted-foreground: 0 0% 63.9%; + --accent: 0 0% 14.9%; + --accent-foreground: 0 0% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 14.9%; + --input: 0 0% 14.9%; + --radius: 0rem; + --ring: 0 72.2% 50.6%; + --chart-1: 220 70% 50%; + --chart-2: 160 60% 45%; + --chart-3: 30 80% 55%; + --chart-4: 280 65% 60%; + --chart-5: 340 75% 55%; + } } + .ant-tree-switcher_close { margin-top: 0.5rem !important; } diff --git a/mirror-2/app/layout.client.tsx b/mirror-2/app/layout.client.tsx index 51435a2b..b46dafb9 100644 --- a/mirror-2/app/layout.client.tsx +++ b/mirror-2/app/layout.client.tsx @@ -1,6 +1,6 @@ -"use client" +"use client"; import { store } from "@/state/store"; -import { Provider } from 'react-redux' +import { Provider } from "react-redux"; import { ThemeProvider } from "next-themes"; import { useSetupAuthEvents } from "@/hooks/auth"; @@ -8,26 +8,25 @@ export default function ClientLayout({ children }) { return ( - ) + ); } // separate component here because auth setup needs to be within the store export function AuthLayout({ children }) { - useSetupAuthEvents() + useSetupAuthEvents(); return (
-
- {children} -
+
{children}
- - ) + ); } diff --git a/mirror-2/components/theme-switcher.tsx b/mirror-2/components/theme-switcher.tsx index 1b55856d..f63ee37a 100644 --- a/mirror-2/components/theme-switcher.tsx +++ b/mirror-2/components/theme-switcher.tsx @@ -15,11 +15,12 @@ import { useEffect, useState } from "react"; const ThemeSwitcher = () => { const [shown, setShown] = useState(false); const { theme, setTheme } = useTheme(); + const appName = process.env.NEXT_PUBLIC_APP_NAME; // useEffect only runs on the client, so now we can safely show the UI useEffect(() => { - setTheme("dark"); - }, []); + setTheme(appName === "The Mirror" ? "blue-theme" : "red-theme"); + }, [appName]); if (!shown) { return null; diff --git a/mirror-2/components/ui/button.tsx b/mirror-2/components/ui/button.tsx index c1271eac..63be4c83 100644 --- a/mirror-2/components/ui/button.tsx +++ b/mirror-2/components/ui/button.tsx @@ -9,7 +9,7 @@ const buttonVariants = cva( { variants: { variant: { - default: "bg-primary text-primary-foreground hover:bg-primary/90 delay-0", + default: "bg-primary hover:bg-primary/90 delay-0", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: @@ -30,12 +30,12 @@ const buttonVariants = cva( variant: "default", size: "default", }, - }, + } ); export interface ButtonProps extends React.ButtonHTMLAttributes, - VariantProps { + VariantProps { asChild?: boolean; } @@ -49,7 +49,7 @@ const Button = React.forwardRef( {...props} /> ); - }, + } ); Button.displayName = "Button"; diff --git a/mirror-2/components/ui/input.tsx b/mirror-2/components/ui/input.tsx index 8c7c7429..dff5142b 100644 --- a/mirror-2/components/ui/input.tsx +++ b/mirror-2/components/ui/input.tsx @@ -1,9 +1,9 @@ -import * as React from "react" +import * as React from "react"; -import { cn } from "@/lib/utils" +import { cn } from "@/lib/utils"; export interface InputProps - extends React.InputHTMLAttributes { } + extends React.InputHTMLAttributes {} const Input = React.forwardRef( ({ className, type, ...props }, ref) => { @@ -11,15 +11,15 @@ const Input = React.forwardRef( - ) + ); } -) -Input.displayName = "Input" +); +Input.displayName = "Input"; -export { Input } +export { Input };