diff --git a/A00_Common/spreadsheet/spreadsheet_cellstyle.ts b/A00_Common/spreadsheet/spreadsheet_cellstyle.ts
index 4ba194bb..842bca41 100644
--- a/A00_Common/spreadsheet/spreadsheet_cellstyle.ts
+++ b/A00_Common/spreadsheet/spreadsheet_cellstyle.ts
@@ -94,7 +94,7 @@ export function resolveBoxBorders(
/** 빈 글 = 인라인 테두리를 안 그림(css `aislo-grid--gridlines` 눈금선이 비쳐 보임). `scale` = 확대 · 축소 배율(선 굵기도 같이). */
function borderCss(side: BorderSide | undefined, scale: number): string {
if (!side) return "";
- const color = side.색 ?? "#000000";
+ const color = side.색 ?? "currentColor";
const w = (px: number): number => Math.max(1, Math.round(px * scale));
switch (side.선) {
case "hair":
diff --git a/A00_Common/spreadsheet/spreadsheet_grid.css b/A00_Common/spreadsheet/spreadsheet_grid.css
index 9998e5b2..9dd2d789 100644
--- a/A00_Common/spreadsheet/spreadsheet_grid.css
+++ b/A00_Common/spreadsheet/spreadsheet_grid.css
@@ -4,12 +4,16 @@
* ========================================================================== */
.aislo-grid {
- --aislo-grid-line: #d9d9d9;
- --aislo-grid-head-bg: #f3f3f3;
- --aislo-grid-head-fg: #444;
- --aislo-grid-head-border: #cfcfcf;
+ /* 앱 전역 테마 토큰(ui_template_theme.css · :root[data-theme])을 그대로 물려받음 —
+ * 여기서 값을 다시 안 적음(다크 전환 시 앱 토큰이 바뀌면 같이 바뀜). */
+ --aislo-grid-bg: var(--color-surface-raised);
+ --aislo-grid-fg: var(--color-text-body);
+ --aislo-grid-line: var(--color-border);
+ --aislo-grid-head-bg: var(--color-surface);
+ --aislo-grid-head-fg: var(--color-text-secondary);
+ --aislo-grid-head-border: var(--color-border);
--aislo-grid-freeze-shadow: rgba(0, 0, 0, 0.12);
- --aislo-grid-selected: #1a73e8;
+ --aislo-grid-selected: var(--color-accent);
position: relative;
overflow: hidden;
@@ -18,7 +22,8 @@
font:
10pt "굴림",
sans-serif;
- background: #fff;
+ background: var(--aislo-grid-bg);
+ color: var(--aislo-grid-fg);
user-select: none;
-webkit-user-select: none;
}
@@ -94,7 +99,7 @@
.aislo-grid__colhead--hidden-before,
.aislo-grid__rowhead--hidden-before {
- border-left: 3px double #888;
+ border-left: 3px double var(--aislo-grid-head-fg);
}
.aislo-grid__head-label {
@@ -122,7 +127,7 @@
box-sizing: border-box;
padding: 0;
border: 1px solid var(--aislo-grid-head-border);
- background: #fff;
+ background: var(--aislo-grid-head-bg);
color: var(--aislo-grid-head-fg);
font-size: 0.7em;
line-height: 1;
@@ -160,7 +165,7 @@
flex-direction: column;
overflow: hidden;
padding: 0 2px;
- background: #fff;
+ background: var(--aislo-grid-bg);
cursor: cell;
}
@@ -228,7 +233,7 @@
width: 6px;
height: 6px;
background: var(--aislo-grid-selected);
- border: 1px solid #fff;
+ border: 1px solid var(--aislo-grid-bg);
cursor: crosshair;
z-index: 3;
}
diff --git a/A00_Common/spreadsheet/spreadsheet_grid.ts b/A00_Common/spreadsheet/spreadsheet_grid.ts
index 23dc5c68..e17fd02d 100644
--- a/A00_Common/spreadsheet/spreadsheet_grid.ts
+++ b/A00_Common/spreadsheet/spreadsheet_grid.ts
@@ -815,7 +815,7 @@ export function createGrid(ctx: SpreadsheetContext): GridHandle {
node.style.top = `${screen.y}px`;
node.style.width = `${screen.w}px`;
node.style.height = `${screen.h}px`;
- node.style.borderColor = "#1a73e8";
+ node.style.borderColor = "var(--aislo-grid-selected)";
node.style.borderWidth = i === 0 ? "2px" : "1px";
selLayer!.append(node);
}
diff --git a/resources/tester/spreadsheet/spreadsheet_grid_test.html b/resources/tester/spreadsheet/spreadsheet_grid_test.html
index f393d1d4..4d3a65df 100644
--- a/resources/tester/spreadsheet/spreadsheet_grid_test.html
+++ b/resources/tester/spreadsheet/spreadsheet_grid_test.html
@@ -1,8 +1,9 @@
-
+
C 격자 시험 틀
+