테마 적용

src/app/editor/panels/ListPropertiesPanel.tsx

@@ -30,7 +30,7 @@ export function ListPropertiesPanel({
         <label className="flex flex-col gap-1 text-xs text-slate-400">
           <span>리스트 아이템 (줄바꿈으로 구분)</span>
           <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={(() => {
               const tree = (listProps as any).itemsTree as any[] | undefined;
@@ -85,7 +85,7 @@ export function ListPropertiesPanel({
         <label className="flex items-center gap-2">
           <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={listProps.align}
             onChange={(e) => {
@@ -101,7 +101,7 @@ export function ListPropertiesPanel({
       </div>
 
       <div className="mt-3 space-y-2 border-t border-slate-800 pt-3 text-xs text-slate-400">
-        <h4 className="text-[11px] font-semibold text-slate-200">리스트 스타일</h4>
+        <h4 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">리스트 스타일</h4>
 
         {/* 글자 크기 */}
         <NumericPropertyControl
@@ -153,10 +153,12 @@ export function ListPropertiesPanel({
           label="텍스트 색상"
           ariaLabelColorInput="리스트 텍스트 색상 피커"
           ariaLabelHexInput="리스트 텍스트 색상 HEX"
+          // textColorCustom 이 비어 있으면 커스텀 색상을 사용하지 않고, "없음" 상태로 취급한다.
+          // 이 경우 HEX 인풋은 빈 문자열을 유지하고, 팔레트 라벨은 "없음"으로 표시된다.
           value={
             listProps.textColorCustom && listProps.textColorCustom.trim() !== ""
               ? listProps.textColorCustom
-              : "#e5e7eb"
+              : ""
           }
           onChange={(hex) => {
             updateBlock(selectedBlockId, { textColorCustom: hex } as any);
@@ -182,7 +184,7 @@ export function ListPropertiesPanel({
         <label className="flex flex-col gap-1">
           <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={listProps.bulletStyle ?? "disc"}
             onChange={(e) => {