Fix: Switch code highlighting theme to min-light/min-dark (#1815)

- Change the code highlighting theme from github-light/github-dark to min-light/min-dark
- Add global text selection style with a blue background (rgb(191 219 254 / 0.8))

Author: juanlou1217

moon/apps/web/components/CodeView/BlobView/BlobEditor.tsx

@@ -214,7 +214,7 @@ export default function BlobEditor({ fileContent, filePath, fileName, onCancel }
         <FileDiff
           fileDiff={fileDiffMetadata}
           options={{
-            theme: { dark: 'github-dark', light: 'github-light' },
+            theme: { dark: 'min-dark', light: 'min-light' },
             diffStyle: 'split',
             diffIndicators: 'classic',
             overflow: 'wrap',

moon/apps/web/components/CodeView/BlobView/CodeContent.module.css

@@ -67,9 +67,12 @@
   background-color: rgb(61, 19, 0);
 }
 
-.codeContainer :global(*::selection),
-.blameContainer :global(*::selection),
-.previewContainer :global(*::selection) {
-  background-color: #0969da;
-  color: #fff;
+.blameContainer span::selection,
+.codeContainer span::selection {
+  color: inherit;
+}
+
+.blameContainer span::-moz-selection,
+.codeContainer span::-moz-selection {
+  color: inherit;
 }

moon/apps/web/components/CodeView/BlobView/CodeContent.tsx

@@ -144,7 +144,7 @@ const CodeContent = ({
     setIsShikiLoading(true)
     codeToTokens(fileContent, {
       lang: detectedLanguage as any,
-      theme: 'github-light'
+      theme: 'min-light'
     })
       .then((result) => {
         if (!cancelled) {
@@ -405,7 +405,7 @@ const CodeContent = ({
           try {
             const result = await codeToTokens(blockContent, {
               lang: detectedLanguage as any,
-              theme: 'github-light'
+              theme: 'min-light'
             })
 
             return { block, tokens: result.tokens }
@@ -603,16 +603,15 @@ const CodeContent = ({
                               {line.lineNumber}
                             </div>
 
-                            <div
-                              className='flex items-center py-1 pl-3 pr-4 font-mono text-sm'
-                              style={{ whiteSpace: 'pre' }}
-                            >
-                              {lineTokens.map((token, key) => (
-                                // eslint-disable-next-line react/no-array-index-key
-                                <span key={key} style={{ color: token.color, display: 'inline' }}>
-                                  {token.content}
-                                </span>
-                              ))}
+                            <div className='py-1 pl-3 pr-4 font-mono text-sm' style={{ whiteSpace: 'pre' }}>
+                              <span style={{ display: 'inline' }}>
+                                {lineTokens.map((token, key) => (
+                                  // eslint-disable-next-line react/no-array-index-key
+                                  <span key={key} style={{ color: token.color, display: 'inline' }}>
+                                    {token.content}
+                                  </span>
+                                ))}
+                              </span>
                             </div>
                           </div>
                         )

moon/apps/web/components/DiffView/FileDiff.tsx

@@ -133,7 +133,7 @@ export default function FileDiff({
         <PierreFileDiff
           fileDiff={fileDiffMetadata}
           options={{
-            theme: { dark: 'github-dark', light: 'github-light' },
+            theme: { dark: 'min-dark', light: 'min-light' },
             diffStyle: 'unified',
             diffIndicators: 'classic',
             overflow: 'wrap',

moon/apps/web/styles/global.css

@@ -25,6 +25,15 @@ html {
     scrollbar-color: var(--scrollbar-color) transparent;
   }
 
+  /* Global text selection color */
+  *::selection {
+    background-color: rgb(191 219 254 / 0.8);
+  }
+
+  *::-moz-selection {
+    background-color: rgb(191 219 254 / 0.8);
+  }
+
   #__next {
     /* @apply isolate flex h-full min-h-[100svh] flex-1 flex-col overflow-auto; */
     /*@apply isolate flex min-h-[100svh] flex-1 flex-col overflow-auto;*/