在css grid中实现网格区域随暗黑模式动态切换排列，核心做法是利用媒体查询 (prefers-color-scheme: dark) 结合 grid-template-areas 属性。当系统切换到暗黑模式时，浏览器会自动应用该查询块内的样式，你可以重新定义网格区域的名称映射，从而改变子元素在视觉上的布局位置，而无需修改html结构或javascript逻辑。
如何定义基础网格与区域名称
要实现动态切换，首先需要建立一套标准的网格模板。通过 grid-template-columns 和 grid-template-rows 定义网格的行列尺寸，并使用 grid-template-areas 为每个单元格赋予语义化的名称，如 'header header'、'sidebar main'。这些名称将作为后续暗黑模式下重定位的依据。确保所有子元素都明确指定了 grid-area，以便它们能正确对应到网格中的特定区域。
.container {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
上述代码定义了一个包含页眉、侧边栏、主内容和页脚的典型布局。在默认（亮色）模式下，侧边栏位于左侧，主内容位于右侧。这种结构为后续的暗黑模式切换提供了稳定的基础框架。
如何在暗黑模式下重新映射网格区域
在媒体查询 (prefers-color-scheme: dark) 内部，你可以完全重写 grid-template-areas 的值。例如，可以将侧边栏移动到顶部，或者将主内容置于左侧。只需更改字符串中区域名称的顺序，即可实现布局的动态调整。这种方法的优势在于它完全基于声明式CSS，性能开销极小，且能无缝响应系统主题变化。
@media (prefers-color-scheme: dark) {
.container {
grid-template-areas:
"header header"
"main sidebar"
"footer footer";
}
/* 可选：调整暗黑模式下的颜色 */
.main {
background-color: #1e1e1e;
color: #ffffff;
}
}
在暗黑模式下，上述代码将主内容区域 main 和侧边栏 sidebar 的位置互换。主内容现在位于左侧，侧边栏位于右侧。这种布局变化通常用于在暗黑模式下突出显示主要内容，或适应不同的阅读习惯。同时，可以在此处添加颜色调整，以优化暗黑模式下的视觉体验。
如何处理网格区域重叠或未定义的情况
在重新映射网格区域时，必须确保所有定义的 grid-area 都能在 grid-template-areas 中找到对应的映射。如果某个区域在新布局中被省略，它将不会显示在网格中，除非你显式地将其放置在未定义的区域（这可能导致不可预测的行为）。此外，如果新布局中的行列数与原布局不同，需要同时更新 grid-template-columns 和 grid-template-rows，以避免布局错乱。建议始终使用完整的网格模板定义，以确保在不同模式下布局的一致性和可预测性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
