エディターと通常シンタックスハイライトの色をテーマに合わせて上書き

Author: na-trium-144

app/[docs_id]/markdown.tsx

@@ -152,7 +152,7 @@ function CodeComponent({
       <SyntaxHighlighter
         language={match[1]}
         PreTag="div"
-        className="border border-current/20 mx-2 my-2 rounded-box p-4!"
+        className="border-2 border-current/20 mx-2 my-2 rounded-box p-4! bg-base-300! text-base-content!"
         style={codetheme}
         {...props}
       >
@@ -164,7 +164,7 @@ function CodeComponent({
     return (
       <SyntaxHighlighter
         PreTag="div"
-        className="border border-current/20 mx-2 my-2 rounded-box p-4!"
+        className="border-2 border-current/20 mx-2 my-2 rounded-box p-4! bg-base-300! text-base-content!"
         style={codetheme}
         {...props}
       >

app/globals.css

@@ -88,6 +88,23 @@ mycdark:
 
 @custom-variant dark (&:where([data-theme=mycdark], [data-theme=mycdark] *));
 
+/* Aceの背景色と文字色を上書き */
+.ace_editor {
+  background-color: var(--color-base-300) !important;
+  color: var(--color-base-content) !important;
+}
+.ace_gutter {
+  background: inherit !important;
+  color: inherit !important;
+}
+.ace_active-line {
+  background: var(--color-base-content) !important;
+  opacity: 0.1;
+}
+.ace_gutter-active-line {
+  background-color: color-mix(in oklch, var(--color-base-content) 20%, var(--color-base-300)) !important;
+}
+
 /* CDNからダウンロードするURLを指定したらなんかエラー出るので、npmでインストールしてlayout.tsxでimportすることにした */
 @theme {
   /*

app/terminal/editor.tsx

@@ -97,7 +97,7 @@ export function EditorComponent(props: EditorProps) {
 
   return (
     <div className="border border-accent border-2 shadow-md m-2 rounded-box overflow-hidden">
-      <div className="flex flex-row items-center">
+      <div className="flex flex-row items-center bg-base-200">
         <div className="font-mono text-sm mt-2 mb-1 ml-4 mr-2">
           {props.filename}
           {props.readonly && <span className="font-sans ml-2">(編集不可)</span>}

app/terminal/exec.tsx

@@ -73,7 +73,7 @@ export function ExecFile(props: ExecProps) {
 
   return (
     <div className="border border-accent border-2 shadow-md m-2 rounded-box overflow-hidden relative">
-      <div>
+      <div className="bg-base-200">
         <button
           className="btn btn-soft btn-accent rounded-none"
           onClick={() => {