can't change background colour in base web

Question

can't change background colour in base web

356 Views Asked by Pratham At 14 June 2025 at 16:47

i am using next js in my project and when i create a button to change colour they only change the base web components colour not background colour.

_app.tsx

import '../styles/globals.css';
import type { AppProps } from 'next/app';
import { Provider as StyletronProvider } from 'styletron-react';
import { LightTheme, BaseProvider, ThemeProvider, DarkTheme } from 'baseui';
import { styletron } from '../helpers/styletron';
import { useState } from 'react';

const THEME = {
    light: 'light',
    dark: 'dark',
};

function MyApp({ Component, pageProps }: AppProps) {
    const [theme, setTheme] = useState(THEME.light);
    return (
        <StyletronProvider value={styletron}>
            <BaseProvider
                theme={theme === THEME.light ? LightTheme : DarkTheme}
            >
                <Component
                    {...pageProps}
                    THEMES={THEME}
                    theme={theme}
                    settheme={setTheme}
                />
            </BaseProvider>
        </StyletronProvider>
    );
}

export default MyApp;

index.tsx

import type { NextPage } from 'next';
import Navbar from '../components/Navbar';

interface props {
    THEMES: {
        light: string;
        dark: string;
    };
    settheme: any;
    theme: any;
}

const Home: NextPage<props> = ({ THEMES, settheme, theme }) => {
    return (
        <>
            <Navbar />
            <button
                onClick={() =>
                    settheme(theme === THEMES.dark ? THEMES.light : THEMES.dark)
                }
            >
                change
            </button>
        </>
    );
};

export default Home;

and when i click on button it not change the background colour to black

like you see above it not change the background

Original Q&A

There are 1 best solutions below

**Pratham** · Accepted Answer

don't known it's the best way of doing it but it's work

what i do is add a class in html tag called theme which indicate the current theme which user select and store that theme name in localstorage and using css to add background colour according to html class name

if anyone has better solution pls don't hesitate to share.

_app.tsx

import '../styles/globals.css';
import type { AppProps } from 'next/app';
import { Provider as StyletronProvider } from 'styletron-react';
import { LightTheme, BaseProvider, DarkTheme } from 'baseui';
import { styletron } from '../helpers/styletron';
import { useEffect, useState } from 'react';

const THEME = {
    light: 'light',
    dark: 'dark',
};

function MyApp({ Component, pageProps }: AppProps) {
    const [theme, setTheme] = useState<string>('');
    useEffect(() => {
        if (typeof window !== 'undefined') {
            !localStorage.getItem('theme')
                ? localStorage.setItem('theme', 'dark')
                : '';
            let user_themes = localStorage.getItem('theme');
            document
                .getElementById('theme')
                ?.classList?.add(user_themes || theme);
            setTheme(user_themes || theme);
        }
    }, []);
    useEffect(() => {
        if (theme) {
            document
                .getElementById('theme')
                ?.classList?.remove(
                    theme === THEME.dark ? THEME.light : THEME.dark
                );
            document.getElementById('theme')?.classList?.add(theme);
            localStorage.setItem('theme', theme);
        }
    }, [theme]);
    return (
        <StyletronProvider value={styletron}>
            <BaseProvider
                theme={theme === THEME.light ? LightTheme : DarkTheme}
            >
                <Component
                    {...pageProps}
                    THEMES={THEME}
                    theme={theme}
                    settheme={setTheme}
                />
            </BaseProvider>
        </StyletronProvider>
    );
}

export default MyApp;

_document.tsx

import Document, { Html, Head, Main, NextScript } from 'next/document';

export default class CustomDocument extends Document {
    render() {
        return (
            <Html id='theme'>
                <Head />
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        );
    }
}

index.tsx

import type { NextPage } from 'next';
import Navbar from '../components/Navbar';

interface props {
    THEMES: {
        light: string;
        dark: string;
    };
    settheme: any;
    theme: any;
}

const Home: NextPage<props> = ({ THEMES, settheme, theme }) => {
    return (
        <>
            <Navbar />
            <button
                onClick={() =>
                    settheme(theme === THEMES.dark ? THEMES.light : THEMES.dark)
                }
            >
                change
            </button>
        </>
    );
};

export default Home;

globals.css

body {
    padding: 0;
    margin: 0;
}

html.dark {
    background: rgba(12, 12, 12);
}

html.light {
    background: rgb(252, 252, 252);
}

can't change background colour in base web

_app.tsx

index.tsx

There are 1 best solutions below

_app.tsx

_document.tsx

index.tsx

globals.css

Related Questions in JAVASCRIPT

Related Questions in REACTJS

Related Questions in NEXT.JS

Related Questions in BASEWEB

Trending Questions

Popular # Hahtags

Popular Questions