React 中的深色模式 (vite)

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《React 中的深色模式 (vite)》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

**create a fresh folder
run the commands npm create vite@latest (in the folder directory)
also cd to the directory and run the command npm install**

step 1
`code in app.jsx`
import react, { usestate } from 'react';
import { fasun, famoon } from 'react-icons/fa'; // import sun and moon icons
import './app.css';

function app() {
  const [darkmode, setdarkmode] = usestate(false);

  // toggle dark mode
  const toggletheme = () => {
    setdarkmode(!darkmode);
  };

  return (
    <div classname={darkmode ? 'dark' : 'light'}>
      <div classname="container">
        <h1>{darkmode ? 'dark mode' : 'light mode'}</h1>
        <button classname="toggle-button" onclick={toggletheme}>
          {darkmode ? <famoon classname="icon" /> : <fasun classname="icon" />}
          {darkmode ? ' dark mode' : ' light mode'}
        </button>
      </div>
    </div>
  );
}

export default app;

Code in App.css
`body {
    margin: 0;
    font-family: Arial, sans-serif;
  }

  .container {
    text-align: center;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  /* Light Mode Styles */
  .light {
    background-color: #f9f9f9;
    color: #333;
  }

  /* Dark Mode Styles */
  .dark {
    background-color: #333;
    color: #f9f9f9;
  }

  /* Toggle Button Styles */
  .toggle-button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    background-color: #007bff;
    color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
  }

  .toggle-button:hover {
    background-color: #0056b3;
    transform: scale(1.05);
  }

  .icon {
    font-size: 20px;
  }`

最终输出

理论要掌握，实操不能落！以上关于《React 中的深色模式 (vite)》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！