We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
use devblog for reference
next.js v13 page router config:
import { useEffect, useState } from 'react'; import type { AppProps, NextWebVitalsMetric } from 'next/app'; import { GoogleTagManager } from '@with-nx/analytics'; import { ThemeProvider } from '@with-nx/theme'; import { themes } from '../styles/themes'; import '../styles/styles.css'; function CustomApp({ Component, pageProps }: AppProps) { return ( <ThemeProvider themes={themes} initialThemeName="dark"> <main className="app"> <Component {...pageProps} /> </main> <GoogleTagManager /> </ThemeProvider> ); } export function reportWebVitals(metric: NextWebVitalsMetric) { // Conversion to seconds and minutes const valueInMilliseconds = metric.value; const valueInSeconds = (valueInMilliseconds / 1000).toFixed(2); // Logging the converted values console.log(`${metric.name} - Seconds: ${valueInSeconds}`); if ( process.env.NODE_ENV !== 'production' && metric.name === 'CLS' && metric.value ) { console.error('NONZERO CLS ', metric.value); } } export default CustomApp;
//themes.ts export const themes = { light: { name: 'light', 'primary-color': '#FFB3A2', 'secondary-color': '#4a5568', 'accent-color': '#575c67', 'bg-color': '#ffffff', 'surface-color': '#F5F5F5', 'text-color': '#000000', 'text-on-primary-color': '#ffffff', 'text-on-secondary-color': '#ffffff', 'primary-icon-color': '#4a5568', 'secondary-icon-color': '#a0aec0', 'success-color': '#28A745', 'error-color': '#DC3545', 'warning-color': '#FFC107', 'info-color': '#17A2B8', 'border-color': '#EDEDED', 'hover-color': '#E8E8E8', 'active-color': '#C5C5C5', 'hover-secondary-color': '#3b4352', 'active-secondary-color': '#2a2f40', 'disabled-color': '#EDEDED', 'sun-icon-color': '#FFD700', 'moon-icon-color': '#C0C0C0', 'bg-opacity-color': 'rgba(255, 255, 255, 0.6)', sound: 'https://app-assets.vercel.app/sounds/air-swoosh.wav', }, dark: { name: 'dark', 'primary-color': '#f25626', 'secondary-color': '#9DA3A8', 'accent-color': '#ffffff', 'bg-color': '#1a202c', 'surface-color': '#3D3D3D', 'text-color': '#e2e8f0', 'text-on-primary-color': '#ffffff', 'text-on-secondary-color': '#2a2f40', 'primary-icon-color': '#e2e8f0', 'secondary-icon-color': '#5a6678', 'success-color': '#55D68B', 'error-color': '#F56565', 'warning-color': '#FFD600', 'info-color': '#3DB8E9', 'border-color': '#414141', 'hover-color': '#1D1D1D', 'active-color': '#0E0E0E', 'hover-secondary-color': '#8B9297', 'active-secondary-color': '#72787D', 'disabled-color': '#5B5B5B', 'sun-icon-color': '#FFA700', 'moon-icon-color': '#D3D3D3', 'bg-opacity-color': 'rgba(26, 32, 44, 0.6)', sound: 'https://app-assets.vercel.app/sounds/air-swoosh.wav', }, };
.btn-primary { background-color: var(--primary-color); color: var(--text-on-primary-color); } .btn-primary:hover { background-color: var(--hover-color); } .btn-primary:active { background-color: var(--active-color); } .btn-primary:focus { outline: none; box-shadow: var(--box-shadow); } .disabled, .btn-primary:disabled { background-color: var(--disabled-color); cursor: not-allowed; } .btn-secondary { background-color: var(--secondary-color); color: var(--text-on-primary-color); } .btn-secondary:hover { background-color: var(--hover-secondary-color); } .btn-secondary:active { background-color: var(--active-secondary-color); } .btn-secondary:focus { outline: none; box-shadow: var(--box-shadow); } .btn-secondary:disabled { background-color: var(--disabled-secondary-color); cursor: not-allowed; } /* TYPOGRAPHY CLASSES */ .text-on-primary { color: var(--text-on-primary-color); } .text-on-secondary { color: var(--text-on-secondary-color); } .text-github { color: var(--github-icon-color); } /* BACKGROUND CLASSES */ .bg-image-overlay { background-color: var(--bg-opacity-color); transition: background-color 0.3s; } @media (min-width: 1024px) { .image-overlay:hover { background-color: transparent; } } .bg-opposite-theming { background-color: var(--text-color); } /* DARK LIGHT STYLES */ .moon, .sun { transition: opacity 0.3s, transform 0.3s; } .sun { color: var(--sun-icon-color); } .moon { color: var(--moon-icon-color); } .moon.fade-out, .sun.fade-out { opacity: 0; transform: scale(0.9); /* Slight shrink */ } .icon-white svg { stroke: #ffffff; }
const { theme, toggleTheme, fadeClass } = useTheme();
The text was updated successfully, but these errors were encountered:
potential next.js v14 solution:
// app/layout.tsx import { ThemeProvider } from '../components/ThemeProvider'; import { AuthProvider } from '../components/AuthProvider'; export default function RootLayout({ children }) { return ( <ThemeProvider> <AuthProvider> <html lang="en"> <body> <main>{children}</main> </body> </html> </AuthProvider> </ThemeProvider> ); }
Sorry, something went wrong.
No branches or pull requests
use devblog for reference
next.js v13 page router config:
The text was updated successfully, but these errors were encountered: