fix: styles do not match the dark mode color

Author: wibus-wee

components/EnvVariableConfig/index.tsx

@@ -21,7 +21,7 @@ export function EnvVariableConfig({ variableNames }) {
         <div key={`${name.key}`} className="flex items-center space-x-4 mb-4">
           <input
             type="text"
-            className="border rounded px-2 py-2 w-1/2 bg-transparent focus:outline-none focus:border-black hover:border-white-400 transition duration-300 font-[400] font-sans text-sm cursor-not-allowed"
+            className="border rounded px-2 py-2 w-1/2 bg-transparent focus:outline-none focus:border-black hover:border-white-400 transition duration-300 font-[400] font-sans text-sm cursor-not-allowed dark:border-gray-700 dark:text-gray-300"
             value={name.name || name.key}
             data-tip={name.key}
             onMouseOver={(e: any) => {
@@ -43,7 +43,7 @@ export function EnvVariableConfig({ variableNames }) {
           <input
             type="text"
             // :focus-visible outline none
-            className="border rounded px-2 py-2 w-1/2 focus:outline-none focus:border-black hover:border-gray-400 transition duration-300 font-[400] font-sans text-sm" style={{ outline: "none", boxShadow: "none" }}
+            className="border rounded px-2 py-2 w-1/2 focus:outline-none focus:border-black hover:border-gray-400 transition duration-300 font-[400] font-sans text-sm dark:border-gray-700 dark:text-gray-300" style={{ outline: "none", boxShadow: "none" }}
             placeholder={`Enter value...`}
             value={values[index]}
             onChange={(e) => handleChange(index, e.target.value)}
@@ -54,7 +54,7 @@ export function EnvVariableConfig({ variableNames }) {
         <h2 className="sr-only">环境变量配置</h2>
         <button
           type="button"
-          className="border bg-black w-full text-white px-4 py-2 rounded-lg text-sm transform transition-all duration-300 focus:outline-none hover:bg-gray-700"
+          className="border bg-black w-full text-white px-4 py-2 rounded-lg text-sm transform transition-all duration-300 focus:outline-none hover:bg-gray-700 dark:border-gray-700 dark:text-gray-300"
           onClick={handleCopy}
         >
           复制

pages/docs/advanced.mdx

@@ -153,11 +153,11 @@ export const Configurator = ({ args, template, env }) => {
     <div>
       <div className="p-4 mt-2">
 
-      <div id="config" className="border rounded-lg overflow-hidden h-12 mb-4" style={{
+      <div id="config" className="border rounded-lg overflow-hidden h-12 mb-4 dark:border-gray-700 " style={{
         height: "66.4px",
         transition: 'height 0.5s ease-in-out',
       }}>
-        <div className="flex cursor-pointer items-center justify-between bg-gray-100 p-4" onClick={() => {
+        <div className="flex cursor-pointer items-center justify-between bg-gray-100 p-4 dark:bg-gray-700" onClick={() => {
           const config = document.getElementById('config');
           const h12Exist = config.classList.contains('h-12'); // 12 在那就是未展开, auto 就是展开
           if (!h12Exist) {
@@ -184,8 +184,8 @@ export const Configurator = ({ args, template, env }) => {
             config.classList.remove('h-12');
           }
         }}>
-          <h2 className="text-sm text-gray-500">
-            <span className="text-black">ecosystem.config.js</span> 配置文件 (点击展开)
+          <h2 className="text-sm text-gray-500 dark:text-gray-300">
+            <span className="text-black dark:text-gray-300">ecosystem.config.js</span> 配置文件 (点击展开)
           </h2>
           <button
             type="button"
@@ -221,13 +221,13 @@ export const Configurator = ({ args, template, env }) => {
             <div key={key} className="flex items-center space-x-4 mb-4">
             <input
               type="text"
-              className="border rounded px-2 py-2 w-1/2 bg-transparent focus:outline-none focus:border-black hover:border-white-400 transition duration-300 font-[400] font-sans text-sm cursor-not-allowed"
+              className="border rounded px-2 py-2 w-1/2 bg-transparent focus:outline-none focus:border-black hover:border-white-400 transition duration-300 font-[400] font-sans text-sm cursor-not-allowed dark:border-gray-700 dark:text-gray-300"
               value={`${key} (${env[key].tip})`}
               disabled
               />
               <input
               type={env[key].type}
-              className="border rounded px-2 py-2 w-1/2 focus:outline-none focus:border-black hover:border-gray-400 transition duration-300 font-[400] font-sans text-sm" style={{ outline: "none", boxShadow: "none" }}
+              className="border rounded px-2 py-2 w-1/2 focus:outline-none focus:border-black hover:border-gray-400 transition duration-300 font-[400] font-sans text-sm dark:border-gray-700 dark:text-gray-300" style={{ outline: "none", boxShadow: "none" }}
               placeholder={`Enter value...`}
               value={envValues[Object.keys(env).indexOf(key)]}
               onChange={(e) => handleChange(index, e.target.value)}
@@ -240,8 +240,8 @@ export const Configurator = ({ args, template, env }) => {
         {args.map((arg) => (
           <button
             key={arg}
-            className={`border rounded px-2 py-2 mr-4 mb-4 focus:outline-none focus:border-black hover:border-gray-400 transition duration-300 font-[400] font-sans text-sm ${
-              selectedArgs.includes(arg) ? 'bg-gray-200' : 'bg-transparent'
+            className={`border rounded px-2 py-2 mr-4 mb-4 focus:outline-none focus:border-black hover:border-gray-400 transition duration-300 font-[400] font-sans text-sm  dark:border-gray-700 dark:text-gray-300 ${
+              selectedArgs.includes(arg) ? 'bg-gray-200 dark:bg-gray-800' : 'bg-transparent'
             }`}
             onClick={() => handleToggleArg(arg)}
           >
@@ -253,7 +253,7 @@ export const Configurator = ({ args, template, env }) => {
 
       <button
           type="button"
-          className="border bg-black w-full text-white px-4 py-2 rounded-lg text-sm transform transition-all duration-300 focus:outline-none hover:bg-gray-700"
+          className="border bg-black w-full text-white px-4 py-2 rounded-lg text-sm transform transition-all duration-300 focus:outline-none hover:bg-gray-700 dark:border-gray-700 dark:text-gray-300 "
           onClick={handleCopyToClipboard}
         >
           复制