Skip to content

Setup in Vite that enables seamless toggling between light and dark themes using CSS variables, MUI's theming capabilities, and state management via the Context API, providing dynamic theme switching without reloading the application.

Notifications You must be signed in to change notification settings

sanju1098/vite-light-dark-mode

Repository files navigation

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

  • Configure the top-level parserOptions property like this:
export default tseslint.config({
  languageOptions: {
    // other options...
    parserOptions: {
      project: ["./tsconfig.node.json", "./tsconfig.app.json"],
      tsconfigRootDir: import.meta.dirname,
    },
  },
});
  • Replace tseslint.configs.recommended to tseslint.configs.recommendedTypeChecked or tseslint.configs.strictTypeChecked
  • Optionally add ...tseslint.configs.stylisticTypeChecked
  • Install eslint-plugin-react and update the config:
// eslint.config.js
import react from "eslint-plugin-react";

export default tseslint.config({
  // Set the react version
  settings: { react: { version: "18.3" } },
  plugins: {
    // Add the react plugin
    react,
  },
  rules: {
    // other rules...
    // Enable its recommended rules
    ...react.configs.recommended.rules,
    ...react.configs["jsx-runtime"].rules,
  },
});

About

Setup in Vite that enables seamless toggling between light and dark themes using CSS variables, MUI's theming capabilities, and state management via the Context API, providing dynamic theme switching without reloading the application.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published