feat(web): init feature flags + kill switch on startup, fix hardcoded colors
- Providers.tsx now calls initFeatureFlags() and checkKillSwitch() on mount (both were wired but never initialized). - globals.css: replace hardcoded #0b1020 with color-mix() from canvas token. - layout.tsx: make themeColor responsive (dark/light media queries). - use-theme.ts: prefix localStorage key with PRODUCT_ID for consistency.
This commit is contained in:
parent
4246d58798
commit
58a778bc1e
@ -14,7 +14,7 @@ html {
|
|||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background: linear-gradient(180deg, var(--nl-bg-canvas) 0%, #0b1020 100%);
|
background: linear-gradient(180deg, var(--nl-bg-canvas) 0%, color-mix(in srgb, var(--nl-bg-canvas) 70%, black) 100%);
|
||||||
color: var(--nl-text-primary);
|
color: var(--nl-text-primary);
|
||||||
font-family: var(--nl-font-body);
|
font-family: var(--nl-font-body);
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
|
|||||||
@ -24,7 +24,10 @@ export const metadata: Metadata = {
|
|||||||
export const viewport: Viewport = {
|
export const viewport: Viewport = {
|
||||||
width: "device-width",
|
width: "device-width",
|
||||||
initialScale: 1,
|
initialScale: 1,
|
||||||
themeColor: "#06070A",
|
themeColor: [
|
||||||
|
{ media: "(prefers-color-scheme: dark)", color: "#06070A" },
|
||||||
|
{ media: "(prefers-color-scheme: light)", color: "#F8FAFC" },
|
||||||
|
],
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function RootLayout({
|
export default function RootLayout({
|
||||||
|
|||||||
@ -6,12 +6,16 @@ import { Toaster } from "sonner";
|
|||||||
import { AuthProvider } from "@/lib/auth";
|
import { AuthProvider } from "@/lib/auth";
|
||||||
import { initDiagnostics } from "@/lib/diagnostics";
|
import { initDiagnostics } from "@/lib/diagnostics";
|
||||||
import { initTelemetry } from "@/lib/telemetry";
|
import { initTelemetry } from "@/lib/telemetry";
|
||||||
|
import { initFeatureFlags } from "@/lib/feature-flags";
|
||||||
|
import { checkKillSwitch } from "@/lib/kill-switch";
|
||||||
import { flushOfflineQueue } from "@/lib/offline-queue";
|
import { flushOfflineQueue } from "@/lib/offline-queue";
|
||||||
|
|
||||||
export function Providers({ children }: { children: ReactNode }) {
|
export function Providers({ children }: { children: ReactNode }) {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
initTelemetry();
|
initTelemetry();
|
||||||
initDiagnostics();
|
initDiagnostics();
|
||||||
|
initFeatureFlags().catch(() => {});
|
||||||
|
checkKillSwitch().catch(() => {});
|
||||||
flushOfflineQueue().catch(() => {});
|
flushOfflineQueue().catch(() => {});
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
|||||||
@ -1,14 +1,16 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useState, useEffect, useCallback } from 'react';
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
|
import { PRODUCT_ID } from '@/lib/product-config';
|
||||||
|
|
||||||
type Theme = 'dark' | 'light';
|
type Theme = 'dark' | 'light';
|
||||||
|
const STORAGE_KEY = `${PRODUCT_ID}_theme`;
|
||||||
|
|
||||||
export function useTheme() {
|
export function useTheme() {
|
||||||
const [theme, setThemeState] = useState<Theme>('dark');
|
const [theme, setThemeState] = useState<Theme>('dark');
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const stored = localStorage.getItem('theme') as Theme | null;
|
const stored = localStorage.getItem(STORAGE_KEY) as Theme | null;
|
||||||
const initial = stored ?? 'dark';
|
const initial = stored ?? 'dark';
|
||||||
setThemeState(initial);
|
setThemeState(initial);
|
||||||
document.documentElement.setAttribute('data-theme', initial);
|
document.documentElement.setAttribute('data-theme', initial);
|
||||||
@ -16,7 +18,7 @@ export function useTheme() {
|
|||||||
|
|
||||||
const setTheme = useCallback((t: Theme) => {
|
const setTheme = useCallback((t: Theme) => {
|
||||||
setThemeState(t);
|
setThemeState(t);
|
||||||
localStorage.setItem('theme', t);
|
localStorage.setItem(STORAGE_KEY, t);
|
||||||
document.documentElement.setAttribute('data-theme', t);
|
document.documentElement.setAttribute('data-theme', t);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user