Hi @nimble star. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#How to change the default color of my page backgrounds
lone ledgeBOT
To change the default color of your page backgrounds in a Next.js application, you can use CSS custom properties (variables) and set them dynamically. Here is an example of how you can achieve this by setting CSS variables in JavaScript:
root.style.setProperty('--color-background', newColors.background!);
root.style.setProperty('--color-muted-background', newColors.mutedBackground!);
root.style.setProperty('--color-success-background', newColors.successBackground!);
root.style.setProperty('--color-error-background', newColors.errorBackground!);
root.style.setProperty('--color-alert-background', newColors.alertBackground!);
In this example, newColors is an object containing your desired color values. You can set these properties in your component or globally in your application.
For instance, if you want to set the background color to a specific value, you can do it like this:
document.documentElement.style.setProperty('--color-background', '#f0f0f0');
This will set the background color of your page to #f0f0f0.
For more detailed examples and context, you can refer to the Github Issue (https://github.com/vercel/next.js/issues/52786) where similar techniques are discussed.
If you need to apply these styles conditionally based on user preferences (like dark mode), you can use media queries in your CSS:
@media (prefers-color-scheme: dark) {
body {
color: #fff;
background: #000;
}
}
This CSS snippet will change the background color to black and text color to white when the user prefers a dark color scheme.
For more information, you can refer to the Next.js documentation (https://nextjs.org/docs/app/api-reference/next-config-js/urlImports#urls-in-css) for handling URLs in CSS.