style: dark theme for scroller

src/components/highlight-code/index.tsx

@@ -1,3 +1,4 @@
+import useUserSettings from '@/hooks/use-user-settings';
 import React from 'react';
 import CodeViewerDark from './code-viewer-dark';
 import CodeViewerLight from './code-viewer-light';
@@ -22,9 +23,15 @@ const HighlightCode: React.FC<{
     height = 'auto'
   } = props;
 
+  const { userSettings } = useUserSettings();
+
+  const currentTheme = React.useMemo(() => {
+    return theme || userSettings.theme === 'realDark' ? 'dark' : 'light';
+  }, [theme, userSettings.theme]);
+
   return (
     <div className="high-light-wrapper hj-wrapper">
-      {theme === 'dark' ? (
+      {currentTheme === 'dark' ? (
         <CodeViewerDark
           lang={lang}
           code={code}

src/components/highlight-code/styles/dark.less

@@ -31,7 +31,7 @@ hue-6-2: #e6c07b
 .code-pre.dark {
   .hljs {
     color: #abb2bf;
-    background: #282c34;
+    background: var(--color-editor-dark);
   }
 
   .hljs-comment,

src/components/highlight-code/styles/index.less

@@ -60,7 +60,7 @@
     }
 
     &.dark {
-      background-color: #282c34;
+      background-color: var(--color-editor-dark);
 
       &:hover {
         &::-webkit-scrollbar-thumb {

src/components/highlight-code/styles/light.less

@@ -31,7 +31,7 @@ hue-6-2: #c18401
 .code-pre.light {
   .hljs {
     color: #383a42;
-    background: #fafafa;
+    background: var(--color-editor-light);
   }
 
   .hljs-comment,