Feat(Theme): Support dark mode

src/components/Playground/Output/Transform/index.module.less

@@ -1,13 +0,0 @@
-.root {
-  position: relative;
-
-  .errorMessage {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    color: white;
-    background-color: #FF4D4FAA;
-    padding: 5px 10px;
-    font-size: 1.2em;
-  }
-}

src/components/Playground/Output/Transform/index.style.ts

@@ -0,0 +1,17 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(({ token }) => ({
+    root: {
+        position: 'relative'
+    },
+
+    errorMessage: {
+        position: 'absolute',
+        bottom: 0,
+        width: '100%',
+        color: token.colorErrorText,
+        backgroundColor: token.colorErrorBg,
+        padding: '5px 10px',
+        fontSize: token.fontSize
+    }
+}))

src/components/Playground/Output/Transform/index.tsx

@@ -1,6 +1,6 @@
 import MonacoEditor from '@monaco-editor/react'
 import { Loader } from 'esbuild-wasm'
-import styles from '@/components/Playground/Output/Transform/index.module.less'
+import useStyles from '@/components/Playground/Output/Transform/index.style'
 import { IFile, ITheme } from '@/components/Playground/shared'
 import { cssToJsFromFile, jsonToJsFromFile } from '@/components/Playground/files'
 import Compiler from '@/components/Playground/compiler'
@@ -12,6 +12,7 @@ interface OutputProps {
 }
 
 const Transform = ({ file, theme }: OutputProps) => {
+    const { styles } = useStyles()
     const [compiledCode, setCompiledCode] = useState('')
     const [errorMsg, setErrorMsg] = useState('')