UPDATE: I recently included a placeholder item in my carousel because the local database feed was not working, and now the theme is malfunctioning locally as well.
Something seems off with the carousel items causing issues.
END OF UPDATE
I successfully applied a theme to my website by adding "data-bs-theme="dark"" to the HTML tag. Although it functions properly, when attempting to apply data-bs-theme="light" to an element, it only works on my local machine. The issue arises after building the app with Vite and deploying it to the server.
I noticed that while child elements receive the "light" theme, the parent element still inherits bs-theme="dark", preventing the override of the parent theme.
Here's the React/HTML snippet:
<Modal
show={picsShow}
size="xl"
onHide={() => setPicsShow(false)}
className="transparent"
>
<ModalHeader closeButton />
<Modal.Body
style={{
maxHeight: "80vh",
}}
data-bs-theme="light"
>
<Carousel interval={null} indicators={false} fade>
{pics.map((pic) => {
return (
<Carousel.Item
key={pic.key}
className="d-flex justify-content-center"
style={{
maxHeight: "80vh",
display: "flex",
alignItems: "center",
}}
>
<Image
src={`./pics/${pic.path}`}
alt={lang === "en" ? pic.name : pic.nameEl}
style={{ maxHeight: "80vh", alignSelf: "center" }}
/>
<Carousel.Caption>
<h3 data-bs-theme="light">
{lang === "en" ? pic.name : pic.nameEl}
</h3>
</Carousel.Caption>
</Carousel.Item>
);
})}
</Carousel>
</Modal.Body>
</Modal>
);
};
This is how the element appears locally during inspection:
https://i.sstatic.net/yWvI5.png
And this is how the same element appears live:
https://i.sstatic.net/M8yTe.png
I am puzzled about why this discrepancy is happening.
I also attempted to add "data-bs-theme="light"" to every other element in the tree, but with no success.
Here's an excerpt from my package-lock.json file:
"packages": {
"": {
"name": "about",
"version": "0.0.0",
"dependencies": {
"axios": "^1.4.0",
"bootstrap": "^5.3.2",
"react": "^18.2.0",
"react-bootstrap": "^2.9.0",
"react-dom": "^18.2.0",
"react-google-recaptcha-v3": "^1.10.1",
"react-type-animation": "^3.0.1"
},
"devDependencies": {
"@types/node": "^18.16.1",
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"@types/react-google-recaptcha": "^2.1.5",
"@typescript-eslint/eslint-plugin": "^5.57.1",
"@typescript-eslint/parser": "^5.57.1",
"@vitejs/plugin-react-swc": "^3.0.0",
"eslint": "^8.38.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.3.4",
"typescript": "^5.0.2",
"vite": "^4.3.0",
"vite-plugin-compression2": "^0.10.5"
}
},