테마 적용

src/app/editor/panels/TextPropertiesPanel.tsx

@@ -99,7 +99,7 @@ export function TextPropertiesPanel({
       <div className="space-y-1">
         <p className="text-xs text-slate-400">선택한 텍스트 블록 내용</p>
         <textarea
-          className="w-full min-h-[80px] rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
+          className="w-full min-h-[80px] rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
           aria-label="선택한 텍스트 블록 내용"
           value={textProps.text}
           onChange={(e) => {
@@ -116,7 +116,7 @@ export function TextPropertiesPanel({
         <label className="flex flex-col gap-1 text-xs text-slate-400">
           <span>정렬</span>
           <select
-            className="rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
+            className="rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
             aria-label="정렬"
             value={textProps.align}
             onChange={(e) => {
@@ -140,7 +140,7 @@ export function TextPropertiesPanel({
               className={`px-2 py-0.5 rounded border text-[11px] ${
                 textProps.underline
                   ? "border-sky-500 bg-sky-900/40 text-sky-100"
-                  : "border-slate-700 bg-slate-900 text-slate-300"
+                  : "border-slate-300 bg-white text-slate-900 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
               }`}
               onClick={() => {
                 updateBlock(selectedBlockId, {
@@ -155,7 +155,7 @@ export function TextPropertiesPanel({
               className={`px-2 py-0.5 rounded border text-[11px] ${
                 textProps.strike
                   ? "border-sky-500 bg-sky-900/40 text-sky-100"
-                  : "border-slate-700 bg-slate-900 text-slate-300"
+                  : "border-slate-300 bg-white text-slate-900 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
               }`}
               onClick={() => {
                 updateBlock(selectedBlockId, {
@@ -170,7 +170,7 @@ export function TextPropertiesPanel({
               className={`px-2 py-0.5 rounded border text-[11px] ${
                 textProps.italic
                   ? "border-sky-500 bg-sky-900/40 text-sky-100"
-                  : "border-slate-700 bg-slate-900 text-slate-300"
+                  : "border-slate-300 bg-white text-slate-900 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
               }`}
               onClick={() => {
                 updateBlock(selectedBlockId, {
@@ -246,7 +246,7 @@ export function TextPropertiesPanel({
           <span>글자 간격</span>
           <div className="flex items-center gap-2">
             <select
-              className="w-32 rounded border border-slate-700 bg-slate-900 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+              className="w-32 rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
               aria-label="글자 간격 프리셋"
               value={letterSpacingPreset}
               onChange={(e) => {
@@ -457,7 +457,7 @@ export function TextPropertiesPanel({
           <span>최대 너비</span>
           <div className="flex items-center gap-2">
             <select
-              className="w-32 rounded border border-slate-700 bg-slate-900 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+              className="w-32 rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
               aria-label="최대 너비 프리셋"
               value={maxWidthScale}
               onChange={(e) => {
@@ -502,7 +502,7 @@ export function TextPropertiesPanel({
             />
           </div>
           <input
-            className="w-full rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
+            className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
             aria-label="최대 너비 커스텀"
             placeholder="예: 600px, 40rem, 80%, 60ch"
             value={textProps.maxWidthCustom ?? ""}