react-css-theme-switcher ThemeSwitcherProvider is not working at Next.js

import React from 'react';
import App from 'next/app';
import Head from 'next/head';
import {Provider} from 'react-redux';
import withRedux from 'next-redux-wrapper';
import ThemeProvider from '../containers/ThemeProvider';
import initStore from '../redux/store';
import '@glidejs/glide/dist/css/glide.core.min.css';
import 'react-quill/dist/quill.snow.css';
import 'react-quill/dist/quill.core.css';
import '../style/global.css';
import 'react-image-crop/dist/ReactCrop.css'
import { ThemeSwitcherProvider } from 'react-css-theme-switcher';

const themes = {
  light: 'antd/dist/antd.css',
  dark: 'antd/dist/antd.dark.css',
};

class CustomApp extends App {
  render() {
    const {Component, pageProps, store, router} = this.props;
    let component = <Component {...pageProps} />;
    return (
      <ThemeSwitcherProvider defaultTheme="light" themeMap={themes}>
        <Provider store={store}>
          <ThemeProvider>
            <Head>
              <title>KTX Admin</title>
            </Head>
            {component}
          </ThemeProvider>
        </Provider>
      </ThemeSwitcherProvider>
    );
  }
}

export default withRedux(initStore)(CustomApp);

"antd": "^4.18.8", "next": "^11.1.2", "react": "^17.0.2", react-css-theme-switcher:0.3.0

I try to change different antd.css file at Next.js But ThemeSwitcherProvider is not working....

Nov 10 '22 05:11 DonRyu

You can add this normal browser head tag to the beginning of your document BEFORE your NextJS Head tag, and the Head tag will append all of it's content to your comment.

export default function Document() {
  return (
    <Html lang="en">
      <head dangerouslySetInnerHTML={{ __html: '<!--styles-insertion-point-->' }}>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

May 12 '23 15:05 henriquezolini

Tested it on app router, but it recieves the fhe following warning: What was showed above probably works for pages router.

Warning: Prop `dangerouslySetInnerHTML` did not match. Server: "<!--styles-insertion-point--><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><link rel=\"stylesheet\" href=\"/_next/static/css/app/layout.css?v=1714466852325\" data-precedence=\"next_static/css/app/layout.css\"><link rel=\"preload\" as=\"script\" fetchpriority=\"low\" href=\"/_next/static/chunks/webpack.js?v=1714466852325\"><script src=\"/_next/static/chunks/main-app.js?v=1714466852325\" async=\"\"></script><script src=\"/_next/static/chunks/app-pages-internals.js\" async=\"\"></script><script src=\"/_next/static/chunks/app/layout.js\" async=\"\"></script><script src=\"/_next/static/chunks/app/not-found.js\" async=\"\"></script><script src=\"/_next/static/chunks/app/(main)/layout.js\" async=\"\"></script><title>titletext</title><meta name=\"description\" content=\"descriptiontext\"><link rel=\"icon\" href=\"/favicon.ico\" type=\"image/x-icon\" sizes=\"16x16\"><meta name=\"next-size-adjust\"><script src=\"/_next/static/chunks/polyfills.js\" nomodule=\"\"></script><link rel=\"preload\" href=\"/_next/static/media/c9a5bc6a7c948fb0-s.p.woff2\" as=\"font\" crossorigin=\"\" type=\"font/woff2\"><style id=\"_goober\"> @keyframes go2264125279{from{transform:scale(0) rotate(45deg);opacity:0;}to{transform:scale(1) rotate(45deg);opacity:1;}}@keyframes go3020080000{from{transform:scale(0);opacity:0;}to{transform:scale(1);opacity:1;}}@keyframes go463499852{from{transform:scale(0) rotate(90deg);opacity:0;}to{transform:scale(1) rotate(90deg);opacity:1;}}@keyframes go1268368563{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}@keyframes go1310225428{from{transform:scale(0) rotate(45deg);opacity:0;}to{transform:scale(1) rotate(45deg);opacity:1;}}@keyframes go651618207{0%{height:0;width:0;opacity:0;}40%{height:0;width:6px;opacity:1;}100%{opacity:1;height:10px;}}@keyframes go901347462{from{transform:scale(0.6);opacity:0.4;}to{transform:scale(1);opacity:1;}}.go4109123758{z-index:9999;}.go4109123758 > *{pointer-events:auto;}</style>" Client: "<!--styles-insertion-point-->"
head
html
RootLayout (Server)
RedirectErrorBoundary@webpack-internal:///(app-pages-browser)/../../node_modules/next/dist/client/components/redirect-boundary.js:74:9
RedirectBoundary@webpack-internal:///(app-pages-browser)/../../node_modules/next/dist/client/components/redirect-boundary.js:82:24
NotFoundErrorBoundary@webpack-internal:///(app-pages-browser)/../../node_modules/next/dist/client/components/not-found-boundary.js:76:9
NotFoundBoundary@webpack-internal:///(app-pages-browser)/../../node_modules/next/dist/client/components/not-found-boundary.js:84:62
DevRootNotFoundBoundary@webpack-internal:///(app-pages-browser)/../../node_modules/next/dist/client/components/dev-root-not-found-boundary.js:33:24
ReactDevOverlay@webpack-internal:///(app-pages-browser)/../../node_modules/next/dist/client/components/react-dev-overlay/app/ReactDevOverlay.js:87:9
HotReload@webpack-internal:///(app-pages-browser)/../../node_modules/next/dist/client/components/react-dev-overlay/app/hot-reloader-client.js:321:37
Router@webpack-internal:///(app-pages-browser)/../../node_modules/next/dist/client/components/app-router.js:207:134
ErrorBoundaryHandler@webpack-internal:///(app-pages-browser)/../../node_modules/next/dist/client/components/error-boundary.js:113:9
ErrorBoundary@webpack-internal:///(app-pages-browser)/../../node_modules/next/dist/client/components/error-boundary.js:160:67
AppRouter@webpack-internal:///(app-pages-browser)/../../node_modules/next/dist/client/components/app-router.js:577:47
ServerRoot@webpack-internal:///(app-pages-browser)/../../node_modules/next/dist/client/app-index.js:112:27
Root@webpack-internal:///(app-pages-browser)/../../node_modules/next/dist/client/app-index.js:117:24

Apr 30 '24 08:04 ThomasAunvik

react-css-theme-switcher react-css-theme-switcher copied to clipboard

ThemeSwitcherProvider is not working at Next.js

react-css-theme-switcher
react-css-theme-switcher copied to clipboard