117笔记问答Grafana 允许您通过自定义 CSS 和配置文件来定制主题
-
创建一个新的文件夹，用于存放您的自定义主题文件。例如，在您的 Grafana 数据目录下创建一个名为
custom-theme的文件夹。默认情况下，Grafana 数据目录位于/var/lib/grafana。 -
在
custom-theme文件夹中创建一个名为custom.css的文件。在此文件中，您可以编写自定义 CSS 代码来定制 Grafana 的外观。例如：
/* 更改页面背景颜色 */
body {
background-color: #f0f0f0;
}
/* 更改面板背景颜色 */
.panel-container {
background-color: #ffffff;
}
/* 更改文本颜色 */
.dashboard-container h2, .dashboard-container h3, .dashboard-container h4, .dashboard-container h5, .dashboard-container h6 {
color: #333333;
}
- 在
custom-theme文件夹中创建一个名为theme.json的文件。在此文件中，您可以配置主题的基本信息。例如：
{
"name": "Custom Theme",
"version": "1.0.0",
"type": "dark",
"author": {
"name": "Your Name",
"email": "your.email@example.com"
},
"colors": {
"primary": "#3276b1",
"secondary": "#6c757d",
"success": "#28a745",
"warning": "#ffc107",
"danger": "#dc3545",
"info": "#17a2b8",
"light": "#f8f9fa",
"dark": "#343a40"
}
}
-
将
custom-theme文件夹复制到 Grafana 的public/img/themes目录下。这样，Grafana 就会识别并加载您的自定义主题。 -
重启 Grafana 服务以应用更改。在 Linux 上，您可以使用以下命令重启 Grafana：
sudo systemctl restart grafana-server
- 登录到 Grafana Web 界面，然后转到 “Configuration”（配置）> “Preferences”（首选项）> “Theme”（主题）部分。在这里，您应该能看到您的自定义主题。选择它并保存更改。现在，您的 Grafana 实例应该显示自定义主题。
请注意，这些步骤仅适用于 Grafana 7.0 及更高版本。对于早期版本的 Grafana，您需要编辑 Grafana 源代码并重新编译。