如何让Google Sheets侧边栏加载时直接应用指定单元格主题色？

你的问题根源在于客户端需要先加载页面、再异步请求主题值，导致页面先显示默认主题，拿到值后才切换目标主题，出现闪烁。要实现初始加载就直接应用正确主题，在服务器端渲染HTML时直接注入主题值是最高效的方案，具体修改如下：

1. 修改Google Apps Script代码 #

调整showSidebar函数，提前获取主题值并传递给HTML模板，无需客户端异步请求：

function onOpen(e) {
  SpreadsheetApp.getUi()
    .createMenu("Sidebar")
    .addItem("Show sidebar", "showSidebar")
    .addToUi();
}

function showSidebar() {
  // 提前读取Sheet1:A1的主题值
  const colorTheme = SpreadsheetApp.getActive().getRange("Sheet1!A1").getDisplayValue();
  // 加载HTML模板并绑定主题变量
  const template = HtmlService.createTemplateFromFile('Test');
  template.colorTheme = colorTheme;
  // 渲染模板并显示侧边栏
  const htmlWidget = template.evaluate().setTitle("Theme Test");
  SpreadsheetApp.getUi().showSidebar(htmlWidget);
}

// 原getColorTheme函数不再需要，可删除

2. 修改侧边栏HTML模板 #

直接在根元素（<html>标签）上设置模板变量对应的主题类，页面渲染完成时直接应用对应主题：

<!DOCTYPE html>
<html class="<?= colorTheme ?>">
<head>
  <base target="_top">
  <style>
    :root,
    :root.Default {
      --bg-color: #45818e;
    }
    :root.Orange {
      --bg-color: #e69138;
    }
    body {
      background-color: var(--bg-color);
    }
  </style>
</head>
<body>
  <p>Hello world</p>
</body>
</html>

原理说明 #

修改后流程变为：

1. 用户点击显示侧边栏时，服务器先读取Sheet1:A1的主题值
2. 服务器渲染HTML模板时，直接给<html>标签设置对应的主题类
3. 侧边栏加载完成时，CSS会直接匹配对应的:root.主题名选择器，应用正确的背景色，完全避免了异步请求导致的主题切换闪烁。

内容的提问来源于stack exchange，提问作者MeesterZee