Added toggle button

[kk7188048]

Description

This PR implements a light/dark mode toggle feature as described in issue #95. The toggle allows users to switch between Light Mode and Dark Mode across the editor application, and the theme choice is saved in localStorage to persist across sessions.

Changes Made

• Added light and dark mode CSS styles.
• Implemented a toggle button to switch between modes.

[vercel]

Someone is attempting to deploy a commit to the Dhanush Nehru's projects Team on Vercel.

A member of the Team first needs to authorize it.

[kk7188048]

Pls let me any other change required here.
Thanks

[DhanushNehru]

Hi @kk7188048 please check your code commits eslintrc etc. and make sure the above errors are resolved

[corydalis10]

@kk7188048 You need to run npm run lint:fix locally.

[Copilot]

Pull Request Overview

This PR implements a light/dark mode toggle feature for the editor application, allowing users to switch between themes with a toggle button. The implementation includes Material-UI theme definitions for both modes and updates the Monaco editor theme accordingly.

• Added lightTheme and darkTheme configurations using Material-UI's createTheme
• Implemented theme toggle functionality with state management in the main App component
• Updated UI components to support dynamic theming including the language selector and Monaco editor

Reviewed Changes

Copilot reviewed 8 out of 9 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/theme.js	Replaced single theme export with separate light and dark theme objects
src/App.js	Added theme state management and toggle functionality, updated routing to pass theme props
src/pages/EditorComponent.js	Integrated theme toggle button and applied dynamic theming to Monaco editor
src/components/js/LanguageSelect.js	Added dark mode styling support for the language selection dropdown
src/components/css/index.css	Added CSS classes for light and dark mode styling
src/components/css/EditorComponent.css	Removed hardcoded styling and added transitions for theme changes
package.json	Updated react-icons dependency version
.eslintrc.json	Changed linebreak-style rule from unix to windows

[Copilot]

The theme preference should be persisted in localStorage to maintain user preference across sessions, as mentioned in the PR description. Consider initializing the state from localStorage and updating it when the theme changes.

Suggested change

	const [darkMode, setDarkMode] = useState(false);
	const toggleTheme = () => {
	setDarkMode((prevMode) => !prevMode);
	const [darkMode, setDarkMode] = useState(() => {
	const savedTheme = localStorage.getItem("darkMode");
	return savedTheme === "true" ? true : false;
	});
	const toggleTheme = () => {
	setDarkMode((prevMode) => {
	const newMode = !prevMode;
	localStorage.setItem("darkMode", newMode);
	return newMode;
	});

[Copilot]

The CSS classes 'light-mode' and 'dark-mode' are defined but never applied to any elements in the codebase. Consider removing these unused styles or implementing their usage.

[Copilot]

[nitpick] The magic number '22.3vh' should be replaced with a named constant or CSS variable to improve maintainability and make the layout intention clearer.

Suggested change

	height: 22.3vh;
	height: var(--output-height);

[Copilot]

Changing the linebreak-style from 'unix' to 'windows' affects the entire team's development environment. This change should be coordinated with the team and may not be appropriate for a theme toggle feature.

Suggested change

	// "linebreak-style": ["error", "unix"],
	"linebreak-style": ["error", "windows"],
	"linebreak-style": ["error", "unix"],