暗黑模式

console/client/src/sections/console/containers/index.js

@@ -35,6 +35,13 @@ function calculateIntersection (cx, cy, d, angle) {
 function Index (props) {
     const xyCvs = useRef()
     const xzCvs = useRef()
+    const [darkModde] = useState(true)
+    const [darkColor] = useState({
+        background: '#1E1E1E',
+        textColor: '#F5F5F5',
+        subTextColor: '#D3D3D3',
+        shadow: '#303030'
+    })
 
     useEffect(() => {
         const canvasArea = document.getElementById('canvasArea')
@@ -51,6 +58,10 @@ function Index (props) {
         // 画圆
         xyCtx.beginPath();
         xyCtx.arc(...center, diameter / 2, 0, 2 * Math.PI);
+        if (darkModde) {
+            xyCtx.strokeStyle = darkColor.subTextColor;
+            // xyCtx.fill();
+        }
         xyCtx.stroke();
         // 圆心圆
         xyCtx.beginPath();
@@ -393,20 +404,29 @@ function Index (props) {
         }
         initCanvas()
     }, [])
+    console.log(darkColor, darkModde ? darkColor.textColor : 'auto');
 
+    const cardStyle = {
+        boxShadow: `0 0 10px ${darkModde ? darkColor.shadow : 'rgba(0, 0, 0, 0.2)'}`,
+        color: darkModde ? darkColor.textColor : 'auto'
+    }
     return (
-        <div style={{ height: '100vh', padding: 8 }}>
+        <div style={{
+            height: '100vh', padding: 8,
+            color: darkModde ? darkColor.textColor : 'auto',
+            background: darkModde ? darkColor.background : 'auto'
+        }}>
             <div style={{ height: '80%', padding: 8 }}>
                 <Row style={{ height: '100%' }}>
-                    <Col span={12} id="canvasArea" style={{ paddingRight: 8, }}>
-                        <div className='card'>
+                    <Col span={12} id="canvasArea" style={{ paddingRight: 8, maxHeight: '100%' }}>
+                        <div className='card' style={cardStyle}>
                             <canvas ref={xzCvs} id='xzCvs' height={120} width={120} style={{}}>
                                 您的浏览器不支持canvas,请更换浏览器.
                             </canvas>
                         </div>
                     </Col>
-                    <Col span={12} style={{  paddingLeft: 8,}}>
-                        <div className='card'>
+                    <Col span={12} style={{ paddingLeft: 8, }}>
+                        <div className='card' style={cardStyle}>
                             <canvas ref={xyCvs} id='xyCvs' height={120} width={120} style={{}}>
                                 您的浏览器不支持canvas,请更换浏览器.
                             </canvas>
@@ -451,14 +471,18 @@ function Index (props) {
                             s: '',
                         },].map(s => {
                             return (
-                                <Col span={3} style={{ padding: 8, height: '100%' }}>
-                                    <div class="card">
+                                <Col span={3} style={{
+                                    padding: 8, height: '100%',
+                                    background:
+                                        darkModde ? darkColor.background : 'auto'
+                                }}>
+                                    <div className="card" style={cardStyle}>
                                         {
                                             s.k ?
                                                 <>
-                                                    <h2>{s.k}</h2>
-                                                    <p>{s.v}</p>
-                                                    <span class="status">{s.s}</span>
+                                                    <h2 style={{ color: darkModde ? darkColor.textColor : 'auto' }}>{s.k}</h2>
+                                                    <p style={{ color: darkModde ? darkColor.subTextColor : 'auto' }}>{s.v}</p>
+                                                    <span className="status">{s.s}</span>
                                                 </>
                                                 : ''
                                         }

console/client/src/sections/console/style.less

@@ -1,5 +1,4 @@
 .card {
-    background-color: #ffffff;
     border-radius: 8px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
     padding: 16px;