无法在手机屏幕上切换到暗模式

问：

在手机屏幕上并切换到深色模式时，屏幕保持白色，字体也变为白色，但对这样的大屏幕没有影响。

这是代码 components/layout/sidebar/Profile.jsx

'use client';

import { AnimatePresence } from 'framer-motion';
import { useEffect } from 'react';
import clsx from 'clsx';

import ThemeToggle from '@/components/elements/ThemeToggle';
import Status from '@/components/elements/Status';
import ProfileHeader from './ProfileHeader';
import { useMenu } from '@/context/menu';
import MobileMenuButton from './MobileMenuButton';
import useIsMobile from '@/hooks/useIsMobile';
import MobileMenu from './MobileMenu';


function Profile() {
  const { isOpen, toggleMenu } = useMenu()
  const isMobile = useIsMobile()
  const imageSize = isMobile ? 40 : 100;

  useEffect(() => {
    console.log(isOpen)
    if (isOpen) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = 'auto';
    }

    return () => {
      document.body.style.overflow = 'auto';
    };
  }, [isOpen])

  return (
    <div
      className={clsx(
        'z-20 fixed shadow-sm xl:shadow-none lg:border-none dark:border-b dark:border-neutral-800 bg-white dark:bg-dark lg:!bg-transparent w-full p-5 lg:relative lg:p-0',
        isOpen && 'pb-0'
      )}
    >
      <div className='flex items-start justify-between lg:flex-col lg:space-y-4 '>
        <ProfileHeader expandMenu={isOpen} imageSize={imageSize} />
        {!isMobile && (
          <div className='flex items-center mt-4 w-full justify-between'>
            <Status/>
            <ThemeToggle />
          </div>
        )}
        {isMobile && (
          <div
            className={clsx(
              'flex lg:hidden items-center gap-5 mt-2',
              isOpen && '!items-end flex-col-reverse justify-between h-[120px] pb-1'
            )}
          >
            <ThemeToggle />
            <MobileMenuButton expandMenu={isOpen} setExpandMenu={toggleMenu}/>
          </div>
        )}
      </div>

      {isMobile && <AnimatePresence>{isOpen && <MobileMenu />}</AnimatePresence>}
    </div>
  )
}

export default Profile

我认为问题是因为它使用了类？但是，如果它不使用类，菜单将像这样透明bg-white

如何制作它，以便在移动菜单上。菜单不透明，背景为白色，当它更改为深色模式时，背景变为黑色

这是源代码 https://github.com/allail-qadrillah/Portofolio/blob/master/components/layouts/sidebar/Profile.jsx

您也可以尝试使用此 URL https://mallailqadrillah.vercel.app/