javascript reactjs material-ui themes textfield

With Material UI Text Field of type number, how to make the spin buttons darker?

I am creating a number Text Field with Material UI, and it is not using my theme for the colors of the spin buttons.

Here is the example code from the Material UI docs and a screenshot of it on their site:

<TextField
  id="outlined-number"
  label="Number"
  type="number"
  InputLabelProps={{
    shrink: true,
  }}
/>

Here is the screenshot from my React app when I copy and paste their example:

My reproducible example code has two files, App.js and ThemeUtil.js.

App.js:

import React from 'react';

import darkTheme, {lightTheme, ThemeContext} from "./ThemeUtil";
import {Box, CssBaseline, TextField, ThemeProvider} from "@mui/material";

function App() {
  const initialTheme = localStorage.getItem('theme') === 'light' ? lightTheme : darkTheme;

  const [theme, setTheme] = React.useState(initialTheme);

  const toggleTheme = () => {
    setTheme(prevTheme => {
      const newTheme = prevTheme === darkTheme ? lightTheme : darkTheme
      localStorage.setItem('theme', newTheme === darkTheme ? 'dark' : 'light');

      return newTheme;
    });
  }

  return (
      <ThemeContext.Provider value={{theme, toggleTheme}}>
        <ThemeProvider theme={theme}>
            <CssBaseline/>
            <Box className={"TestAppContainer"} sx={{display: "flex", justifyContent: "center", alignItems: "center", width: "100vw", height: "100vh"}}>
                <TextField
                    label="Number"
                    type="number"
                    InputLabelProps={{
                        shrink: true,
                    }}
                />
            </Box>
        </ThemeProvider>
      </ThemeContext.Provider>
  );
}

export default App;

ThemeUtil.js:

import React from "react";

import {createTheme} from '@mui/material/styles';

const darkTheme = createTheme({
    palette: {
        mode: "dark",
    },
    typography: {
        fontSize: 16,
    },
});

const lightTheme = createTheme({
    palette: {
        mode: "light",
    },
    typography: {
        fontSize: 16,
    },
});

const ThemeContext = React.createContext({
    theme: darkTheme, toggleTheme: () => {
    }
});

export default darkTheme;
export {lightTheme, ThemeContext};

How do I make the spin buttons appear dark, similar to the example on the Material UI site? Can the theme be modified to set those to a specified color?

Solution

You have to set color-scheme style to dark in your body tag.

NOTE: Open DevTools of Material UI website & in Element windows you can find this color-scheme stylesheet in html tag.

function App() {
  const darkTheme = MaterialUI.createTheme({
    palette: {
      mode: "dark",
    },
  });

  const lightTheme = MaterialUI.createTheme({
    palette: {
      mode: "light",
    },
  });

  const [dark, setDark] = React.useState(true);

  return (
    <MaterialUI.ThemeProvider theme={dark ? darkTheme : lightTheme}>
      <MaterialUI.CssBaseline />
      <MaterialUI.Grid
        container
        justifyContent="space-between"
        alignItems="center"
        sx={{
          p: 2,
        }}
      >
        <MaterialUI.TextField
          id="outlined-number"
          label="Number"
          type="number"
        />
        <MaterialUI.Button
          variant="contained"
          onClick={() => {
            setDark(!dark);
            document.body.style.colorScheme = dark ? "light" : "dark";
          }}
        >
          {dark ? "Light" : "Dark"}
        </MaterialUI.Button>
      </MaterialUI.Grid>
    </MaterialUI.ThemeProvider>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

<body style="color-scheme:dark">
  <div id="root"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/@mui/material@5.16.7/umd/material-ui.production.min.js"></script>
</body>