Fix coloring of dropdowns and layer heights

TeamLumi · Oct 10, 2024 · 88bf865 · 88bf865
1 parent 867e90a
commit 88bf865
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 5 deletions.
diff --git a/src/components/Pokedex2/ModeSwitch.jsx b/src/components/Pokedex2/ModeSwitch.jsx
@@ -2,8 +2,10 @@ import * as React from 'react';
 import { useGlobalState } from '../common/GlobalState';
 import { FormControl, InputLabel, MenuItem, Select } from '@mui/material';
 import { GAMEDATA2, GAMEDATA3, GAMEDATAV } from '../../../__gamedata';
+import { useColorMode } from '@docusaurus/theme-common';
 
 const ModeSwitch = () => {
+  const { colorMode, setColorMode } = useColorMode();
   const [globalState, updateMode] = useGlobalState();
 
   const handleChange = (event) => {
@@ -15,7 +17,7 @@ const ModeSwitch = () => {
         marginLeft: {xs: "unset", sm: ".25rem"},
         gridArea: "c",
         minWidth: "fit-content",
-        backgroundColor: "var(--mui-palette-common-background)"
+        backgroundColor: colorMode === "dark" ? "var(--ifm-background-color)" : "white",
       }}
     >
       <InputLabel id='version-selector-label'>Version</InputLabel>

diff --git a/src/components/Pokedex2/PokemonPageContent.jsx b/src/components/Pokedex2/PokemonPageContent.jsx
@@ -118,7 +118,7 @@ export const PokemonPageContent = ({ pokemon, pokemonNames, pokemon3, pokemonNam
         sx={{
           position: "sticky",
           top: "75px",
-          zIndex: 999,
+          zIndex: 2,
         }}
       >
         <Box

diff --git a/src/components/Pokedex2/PokemonSearchBox.jsx b/src/components/Pokedex2/PokemonSearchBox.jsx
@@ -3,10 +3,10 @@ import { Autocomplete, TextField } from '@mui/material';
 import { useHistory } from '@docusaurus/router';
 import { usePluginData } from '@docusaurus/useGlobalData';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import { useGlobalState } from '../common/GlobalState';
+import { useColorMode } from '@docusaurus/theme-common';
 
 export const PokemonSearchBox = ({ pokemonNames, formNo, monsNo }) => {
-  const [globalState, updateMode] = useGlobalState();  
+  const { colorMode, setColorMode } = useColorMode();
   const history = useHistory();
   const { path } = usePluginData('luminescent-pokedex-data-plugin');
   const pokedexPath = useBaseUrl(path);
@@ -28,7 +28,7 @@ export const PokemonSearchBox = ({ pokemonNames, formNo, monsNo }) => {
       sx={{
         width: {xs: "250px", sm: "300px"},
         gridArea: "a",
-        backgroundColor: "var(--mui-palette-common-background)"
+        backgroundColor: colorMode === "dark" ? "var(--ifm-background-color)" : "white",
       }}
       options={options}
       value={pokemonName}