I am in the process of creating a website, where currently the only functionality available is to change themes by selecting an option from a dropdown menu (the theme is an attribute that uses CSS variables).
Everything was functioning properly, however today, for some unknown reason, all TypeScript code stopped executing. No matter what I try, there are no console logs being displayed and no attributes are being set.
Here is the code:
'use client';
import { createContext, useEffect, useState } from 'react';
import { Themes, setCssTheme } from './misc/themes';
import { Form } from 'react-bootstrap';
const ThemeContext = createContext(Themes.PrincessPink);
const themeOptions = Object.values(Themes).map((theme) => (
<option value={theme} key={theme}>
{theme}
</option>
));
export default function Home() {
const [theme, setTheme] = useState(Themes.PrincessPink);
useEffect(() => {
setCssTheme(theme);
});
return (
<main className="flex min-h-screen flex-col items-start justify-normal">
<ThemeContext.Provider value={theme}>
<Form.Select
className="m-4"
onChange={(e) => {
//TO DO: If the source code of the page is modified and incorrect value will be passed into here, will it break? How to handle this?
setTheme(e.target.value as Themes);
setCssTheme(theme);
}}
>
{themeOptions}
</Form.Select>
</ThemeContext.Provider>
<div className="ml-4"> selected theme: {theme} </div>
</main>
);
}
Code for themes:
export enum Themes {
PrincessPink = 'PrincessPink',
OrangeDanger = 'OrangeDanger',
NextJsExample = 'NextJsExample',
}
export function setCssTheme(theme: Themes) {
document.documentElement.setAttribute('data-theme', theme);
console.log('theme set to: ' + document.documentElement.getAttribute('data-theme'));
}
Dependencies (which might be relevant):
...On my end, the result is nothing - events are not triggered, code is not executed, only HTML markup and elements from React Bootstrap are visible on the webpage.
This is how it appears on my screen: