Fix: NumberInput tailwind examples utilize darkmode

docs/data/base/components/number-input/NumberInputBasic/tailwind/index.js

@@ -1,17 +1,28 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Unstable_NumberInput as BaseNumberInput } from '@mui/base/Unstable_NumberInput';
+import { useTheme } from '@mui/system';
 import clsx from 'clsx';
 
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
 export default function NumberInputBasic() {
   const [value, setValue] = React.useState();
+  // Replace this with your app logic for determining dark modes
+  const isDarkMode = useIsDarkMode();
+
   return (
-    <NumberInput
-      aria-label="Demo number input"
-      placeholder="Type a number…"
-      value={value}
-      onChange={(event, val) => setValue(val)}
-    />
+    <div className={isDarkMode ? 'dark' : ''}>
+      <NumberInput
+        aria-label="Demo number input"
+        placeholder="Type a number…"
+        value={value}
+        onChange={(event, val) => setValue(val)}
+      />
+    </div>
   );
 }
 

docs/data/base/components/number-input/NumberInputBasic/tailwind/index.tsx

@@ -4,17 +4,28 @@ import {
   NumberInputProps,
   NumberInputOwnerState,
 } from '@mui/base/Unstable_NumberInput';
+import { useTheme } from '@mui/system';
 import clsx from 'clsx';
 
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
 export default function NumberInputBasic() {
   const [value, setValue] = React.useState<number | undefined>();
+  // Replace this with your app logic for determining dark modes
+  const isDarkMode = useIsDarkMode();
+
   return (
-    <NumberInput
-      aria-label="Demo number input"
-      placeholder="Type a number…"
-      value={value}
-      onChange={(event, val) => setValue(val)}
-    />
+    <div className={isDarkMode ? 'dark' : ''}>
+      <NumberInput
+        aria-label="Demo number input"
+        placeholder="Type a number…"
+        value={value}
+        onChange={(event, val) => setValue(val)}
+      />
+    </div>
   );
 }
 

docs/data/base/components/number-input/NumberInputIntroduction/tailwind/index.js

@@ -1,17 +1,28 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Unstable_NumberInput as BaseNumberInput } from '@mui/base/Unstable_NumberInput';
+import { useTheme } from '@mui/system';
 import clsx from 'clsx';
 
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
 export default function NumberInputIntroduction() {
   const [value, setValue] = React.useState();
+  // Replace this with your app logic for determining dark modes
+  const isDarkMode = useIsDarkMode();
+
   return (
-    <NumberInput
-      aria-label="Demo number input"
-      placeholder="Type a number…"
-      value={value}
-      onChange={(event, val) => setValue(val)}
-    />
+    <div className={isDarkMode ? 'dark' : ''}>
+      <NumberInput
+        aria-label="Demo number input"
+        placeholder="Type a number…"
+        value={value}
+        onChange={(event, val) => setValue(val)}
+      />
+    </div>
   );
 }
 

docs/data/base/components/number-input/NumberInputIntroduction/tailwind/index.tsx

@@ -4,17 +4,28 @@ import {
   NumberInputProps,
   NumberInputOwnerState,
 } from '@mui/base/Unstable_NumberInput';
+import { useTheme } from '@mui/system';
 import clsx from 'clsx';
 
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
 export default function NumberInputIntroduction() {
   const [value, setValue] = React.useState<number | undefined>();
+  // Replace this with your app logic for determining dark modes
+  const isDarkMode = useIsDarkMode();
+
   return (
-    <NumberInput
-      aria-label="Demo number input"
-      placeholder="Type a number…"
-      value={value}
-      onChange={(event, val) => setValue(val)}
-    />
+    <div className={isDarkMode ? 'dark' : ''}>
+      <NumberInput
+        aria-label="Demo number input"
+        placeholder="Type a number…"
+        value={value}
+        onChange={(event, val) => setValue(val)}
+      />
+    </div>
   );
 }
 

docs/data/base/components/number-input/QuantityInput/tailwind/index.js

@@ -2,33 +2,44 @@ import * as React from 'react';
 import { Unstable_NumberInput as BaseNumberInput } from '@mui/base/Unstable_NumberInput';
 import RemoveIcon from '@mui/icons-material/Remove';
 import AddIcon from '@mui/icons-material/Add';
+import { useTheme } from '@mui/system';
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
 
 const NumberInput = React.forwardRef(function CustomNumberInput(props, ref) {
+  // Replace this with your app logic for determining dark modes
+  const isDarkMode = useIsDarkMode();
+
   return (
-    <BaseNumberInput
-      slotProps={{
-        root: {
-          className:
-            'leading-snug font-sans text-slate-900 dark:text-slate-300 flex flex-row flex-nowrap justify-center items-center',
-        },
-        input: {
-          className:
-            'leading-snug font-sans text-sm text-inherit bg-white dark:bg-slate-900 border border-solid border-slate-300 dark:border-slate-600 rounded-[4px] my-0 mx-1 py-2.5 px-3 outline-0 min-w-0 w-16 text-center focus-visible:outline-0 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus-visible:outline-none',
-        },
-        incrementButton: {
-          children: <AddIcon />,
-          className:
-            'order-1 text-sm font-sans box-border leading-normal border-0 rounded-full bg-transparent w-10 h-10 flex flex-row flex-nowrap justify-center items-center transition-all duration-[120ms] focus-visible:outline-0 hover:cursor-pointer hover:bg-purple-100 dark:hover:bg-purple-800',
-        },
-        decrementButton: {
-          children: <RemoveIcon />,
-          className:
-            'text-sm font-sans box-border leading-normal border-0 rounded-full bg-transparent w-10 h-10 flex flex-row flex-nowrap justify-center items-center transition-all duration-[120ms] focus-visible:outline-0 hover:cursor-pointer hover:bg-purple-100 dark:hover:bg-purple-800',
-        },
-      }}
-      {...props}
-      ref={ref}
-    />
+    <div className={isDarkMode ? 'dark' : ''}>
+      <BaseNumberInput
+        slotProps={{
+          root: {
+            className:
+              'leading-snug font-sans text-slate-900 dark:text-slate-300 flex flex-row flex-nowrap justify-center items-center',
+          },
+          input: {
+            className:
+              'leading-snug font-sans text-sm text-inherit bg-white dark:bg-slate-900 border border-solid border-slate-300 dark:border-slate-600 rounded-[4px] my-0 mx-1 py-2.5 px-3 outline-0 min-w-0 w-16 text-center focus-visible:outline-0 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus-visible:outline-none',
+          },
+          incrementButton: {
+            children: <AddIcon />,
+            className:
+              'order-1 text-sm font-sans box-border leading-normal border-0 rounded-full bg-transparent w-10 h-10 flex flex-row flex-nowrap justify-center items-center transition-all duration-[120ms] focus-visible:outline-0 hover:cursor-pointer hover:bg-purple-100 dark:hover:bg-purple-800 dark:text-purple-400',
+          },
+          decrementButton: {
+            children: <RemoveIcon />,
+            className:
+              'text-sm font-sans box-border leading-normal border-0 rounded-full bg-transparent w-10 h-10 flex flex-row flex-nowrap justify-center items-center transition-all duration-[120ms] focus-visible:outline-0 hover:cursor-pointer hover:bg-purple-100 dark:hover:bg-purple-800 dark:text-purple-400',
+          },
+        }}
+        {...props}
+        ref={ref}
+      />
+    </div>
   );
 });
 

docs/data/base/components/number-input/QuantityInput/tailwind/index.tsx

@@ -5,36 +5,47 @@ import {
 } from '@mui/base/Unstable_NumberInput';
 import RemoveIcon from '@mui/icons-material/Remove';
 import AddIcon from '@mui/icons-material/Add';
+import { useTheme } from '@mui/system';
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
 
 const NumberInput = React.forwardRef(function CustomNumberInput(
   props: NumberInputProps,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
+  // Replace this with your app logic for determining dark modes
+  const isDarkMode = useIsDarkMode();
+
   return (
-    <BaseNumberInput
-      slotProps={{
-        root: {
-          className:
-            'leading-snug font-sans text-slate-900 dark:text-slate-300 flex flex-row flex-nowrap justify-center items-center',
-        },
-        input: {
-          className:
-            'leading-snug font-sans text-sm text-inherit bg-white dark:bg-slate-900 border border-solid border-slate-300 dark:border-slate-600 rounded-[4px] my-0 mx-1 py-2.5 px-3 outline-0 min-w-0 w-16 text-center focus-visible:outline-0 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus-visible:outline-none',
-        },
-        incrementButton: {
-          children: <AddIcon />,
-          className:
-            'order-1 text-sm font-sans box-border leading-normal border-0 rounded-full bg-transparent w-10 h-10 flex flex-row flex-nowrap justify-center items-center transition-all duration-[120ms] focus-visible:outline-0 hover:cursor-pointer hover:bg-purple-100 dark:hover:bg-purple-800',
-        },
-        decrementButton: {
-          children: <RemoveIcon />,
-          className:
-            'text-sm font-sans box-border leading-normal border-0 rounded-full bg-transparent w-10 h-10 flex flex-row flex-nowrap justify-center items-center transition-all duration-[120ms] focus-visible:outline-0 hover:cursor-pointer hover:bg-purple-100 dark:hover:bg-purple-800',
-        },
-      }}
-      {...props}
-      ref={ref}
-    />
+    <div className={isDarkMode ? 'dark' : ''}>
+      <BaseNumberInput
+        slotProps={{
+          root: {
+            className:
+              'leading-snug font-sans text-slate-900 dark:text-slate-300 flex flex-row flex-nowrap justify-center items-center',
+          },
+          input: {
+            className:
+              'leading-snug font-sans text-sm text-inherit bg-white dark:bg-slate-900 border border-solid border-slate-300 dark:border-slate-600 rounded-[4px] my-0 mx-1 py-2.5 px-3 outline-0 min-w-0 w-16 text-center focus-visible:outline-0 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus-visible:outline-none',
+          },
+          incrementButton: {
+            children: <AddIcon />,
+            className:
+              'order-1 text-sm font-sans box-border leading-normal border-0 rounded-full bg-transparent w-10 h-10 flex flex-row flex-nowrap justify-center items-center transition-all duration-[120ms] focus-visible:outline-0 hover:cursor-pointer hover:bg-purple-100 dark:hover:bg-purple-800 dark:text-purple-400',
+          },
+          decrementButton: {
+            children: <RemoveIcon />,
+            className:
+              'text-sm font-sans box-border leading-normal border-0 rounded-full bg-transparent w-10 h-10 flex flex-row flex-nowrap justify-center items-center transition-all duration-[120ms] focus-visible:outline-0 hover:cursor-pointer hover:bg-purple-100 dark:hover:bg-purple-800 dark:text-purple-400',
+          },
+        }}
+        {...props}
+        ref={ref}
+      />
+    </div>
   );
 });
 

docs/data/base/components/number-input/UseNumberInputCompact/tailwind/index.js

@@ -2,8 +2,14 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useNumberInput as useNumberInput } from '@mui/base/unstable_useNumberInput';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
+import { useTheme } from '@mui/system';
 import clsx from 'clsx';
 
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
 const CompactNumberInput = React.forwardRef(function CompactNumberInput(props, ref) {
   const { className, ...rest } = props;
   const {
@@ -72,9 +78,15 @@ CompactNumberInput.propTypes = {
 
 export default function UseNumberInputCompact() {
   const [value, setValue] = React.useState();
+  // Replace this with your app logic for determining dark modes
+  const isDarkMode = useIsDarkMode();
 
   return (
-    <div className="flex flex-row flex-nowrap items-center gap-x-8">
+    <div
+      className={`${
+        isDarkMode ? 'dark' : ''
+      } flex flex-row flex-nowrap items-center gap-x-8`}
+    >
       <CompactNumberInput
         aria-label="Compact number input"
         placeholder="Type a number…"

docs/data/base/components/number-input/UseNumberInputCompact/tailwind/index.tsx

@@ -4,8 +4,14 @@ import {
   UseNumberInputParameters,
 } from '@mui/base/unstable_useNumberInput';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
+import { useTheme } from '@mui/system';
 import clsx from 'clsx';
 
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
 const CompactNumberInput = React.forwardRef(function CompactNumberInput(
   props: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> &
     UseNumberInputParameters,
@@ -74,9 +80,15 @@ const CompactNumberInput = React.forwardRef(function CompactNumberInput(
 
 export default function UseNumberInputCompact() {
   const [value, setValue] = React.useState<number | undefined>();
+  // Replace this with your app logic for determining dark modes
+  const isDarkMode = useIsDarkMode();
 
   return (
-    <div className="flex flex-row flex-nowrap items-center gap-x-8">
+    <div
+      className={`${
+        isDarkMode ? 'dark' : ''
+      } flex flex-row flex-nowrap items-center gap-x-8`}
+    >
       <CompactNumberInput
         aria-label="Compact number input"
         placeholder="Type a number…"