Ant Design – Switching between Dark and Light mode

_app.tsx

import '@/styles/themes.scss';
import '@/styles/global.scss';

function App({ Component, pageProps }): JSX.Element {
  return <Component {...pageProps} />
}

export default App;

dark-theme.less

@import '~antd/lib/style/color/colorPalette.less';
@import '~antd/dist/antd.less';
@import '~antd/lib/style/themes/dark.less';

@primary-color: #00adb5;
@border-radius-base: 4px;

@component-background: #303030;
@body-background: #303030;
@popover-background: #303030;
@border-color-base: #6f6c6c;
@border-color-split: #424242;
@table-header-sort-active-bg: #424242;
@card-skeleton-bg: #424242;
@skeleton-color: #424242;
@table-header-sort-active-bg: #424242;

gulpfile.js

const gulp = require('gulp')
const gulpless = require('gulp-less')
const postcssProcess = require('gulp-postcss')
const rename = require('gulp-rename')
const debug = require('gulp-debug')
const csso = require('gulp-csso')
const autoprefixer = require('autoprefixer')
const NpmImportPlugin = require('less-plugin-npm-import')

const parentSelector = function (opts) {
    opts = opts || {};

    // Work with options here
    return {
        postcssPlugin: 'postcss-parent-selector',
        Once(root /*, { result } */) {
            root.walkRules(rule => {
                if (rule.parent && rule.parent.type === 'atrule' &&
                    rule.parent.name.indexOf('keyframes') !== -1) {
                    return;
                }
                rule.selectors = rule.selectors.map(selectors => {
                    return selectors.split(/,[\s]* /g).map(selector => {
                        // don't add the parent class to a rule that is
                        // exactly equal to the one defined by the user
                        if (selector === opts.selector || (Array.isArray(opts.exceptions) && opts.exceptions.includes(selector))) {
                            return selector;
                        }

                        if (Array.isArray(opts.appendTo) && opts.appendTo.includes(selector)) {
                            return `${selector}${opts.selector}`;
                        }

                        // Return new selector
                        return `${opts.selector} ${selector}`;
                    });
                });
            });
        }
    }
};

gulp.task('light-theme', function () {
    const plugins = [autoprefixer(), parentSelector({ selector: '.light-mode', exceptions: ['html'], appendTo: ['body'] })]

    return gulp
        .src('src/styles/themes/light-theme.less')
        .pipe(debug({ title: 'Less files:' }))
        .pipe(
            gulpless({
                javascriptEnabled: true,
                plugins: [new NpmImportPlugin({ prefix: '~' })],
            }),
        )
        .pipe(postcssProcess(plugins))
        .pipe(
            csso({
                debug: true,
            }),
        )
        .pipe(rename(function (path) {
            // Returns a completely new object, make sure you return all keys needed!
            return {
                dirname: path.dirname,
                basename: '_' + path.basename,
                extname: ".scss"
            };
        }))
        .pipe(gulp.dest('./src/styles/themes'))
})

gulp.task('dark-theme', function () {
    const plugins = [autoprefixer(), parentSelector({ selector: '.dark-mode', exceptions: ['html'], appendTo: ['body']  })]

    return gulp
        .src('src/styles/themes/dark-theme.less')
        .pipe(debug({ title: 'Less files:' }))
        .pipe(
            gulpless({
                javascriptEnabled: true,
                plugins: [new NpmImportPlugin({ prefix: '~' })],
            }),
        )
        .pipe(postcssProcess(plugins))
        .pipe(
            csso({
                debug: true,
            }),
        )
        .pipe(rename(function (path) {
            // Returns a completely new object, make sure you return all keys needed!
            return {
                dirname: path.dirname,
                basename: '_' + path.basename,
                extname: ".scss"
            };
        }))
        .pipe(gulp.dest('./src/styles/themes'))
})

light-theme.less

@import '~antd/lib/style/color/colorPalette.less';
@import '~antd/dist/antd.less';
@import '~antd/lib/style/themes/default.less';

// These are shared variables that can be extracted to their own file
@primary-color: #00adb5;
@border-radius-base: 4px;

@component-background: #ffffff;
@body-background: #ffffff;
@popover-background: #ffffff;
@layout-sider-background: #ffffff;
@layout-header-background: #ffffff;
@layout-body-background: #ffffff;
// @border-color-base: #6f6c6c;
// @border-color-split: #424242;
// @table-header-sort-active-bg: #424242;
// @card-skeleton-bg: #424242;
// @skeleton-color: #424242;
// @table-header-sort-active-bg: #424242;

themes.scss

@import 'themes/light-theme';
@import 'themes/dark-theme';