diff --git a/assets/webui/index.html b/assets/webui/index.html
index b8e6575..9c8bd62 100644
--- a/assets/webui/index.html
+++ b/assets/webui/index.html
@@ -455,12 +455,18 @@
-
+
-
+
diff --git a/assets/webui/ofdgo.css b/assets/webui/ofdgo.css
index e76dd9d..b19d544 100644
--- a/assets/webui/ofdgo.css
+++ b/assets/webui/ofdgo.css
@@ -1685,7 +1685,6 @@ button:not(:disabled):hover {
.gradient-stop-row input[type="number"],
.structure-attribute > input,
.print-options select,
-.appearance-material select,
.form-row input[type="text"],
.form-row input[type="password"],
.form-row input[type="number"],
@@ -3220,6 +3219,7 @@ button.outline-link:hover {
text-align: center;
}
+.appearance-choices > [hidden],
.empty-state[hidden],
.editor-group > [hidden],
.panel-row > [hidden],
@@ -4849,7 +4849,10 @@ audio.page-media {
.settings-icon,
.theme-system-icon,
.theme-light-icon,
-.theme-dark-icon {
+.theme-dark-icon,
+.material-solid-icon,
+.material-mica-icon,
+.material-acrylic-icon {
display: inline-block;
width: 18px;
height: 18px;
@@ -4873,6 +4876,18 @@ audio.page-media {
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M20 15.5A9 9 0 0 1 8.5 4a9 9 0 1 0 11.5 11.5z'/%3E%3C/svg%3E");
}
+.material-solid-icon {
+ --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='1'/%3E%3Cpath d='M6 6h12v12H6z' fill='black' fill-opacity='.25' stroke='none'/%3E%3C/svg%3E");
+}
+
+.material-mica-icon {
+ --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='1'/%3E%3Cpath d='M3 13c6-7 12 7 18-2M3 18c6-7 12 7 18-2'/%3E%3C/svg%3E");
+}
+
+.material-acrylic-icon {
+ --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21H3V8'/%3E%3Crect x='7' y='3' width='14' height='14' rx='1'/%3E%3Cpath d='m10 11 5-5m-2 8 5-5'/%3E%3C/svg%3E");
+}
+
.appearance-dialog {
width: 680px;
height: 440px;
@@ -4947,19 +4962,11 @@ audio.page-media {
}
}
-.appearance-material:not([hidden]) {
- display: flex;
- align-items: center;
- justify-content: space-between;
- gap: 12px;
- margin-top: 16px;
+.appearance-material {
+ margin-top: 20px;
}
-.appearance-material select {
- width: 120px;
-}
-
-.appearance-themes {
+.appearance-choices {
display: flex;
gap: 3px;
padding: 3px;
@@ -4967,7 +4974,7 @@ audio.page-media {
background: var(--base);
}
-.appearance-themes button {
+.appearance-choices button {
display: flex;
flex: 1;
flex-direction: column;
@@ -4982,21 +4989,21 @@ audio.page-media {
font-size: 12px;
}
-.appearance-themes button::after {
+.appearance-choices button::after {
content: "";
width: 15px;
height: 2px;
border-radius: 2px;
}
-.appearance-themes [data-pressed="true"] {
+.appearance-choices [data-pressed="true"] {
background: var(--input);
color: var(--accent);
border-color: var(--line);
box-shadow: 0 1px 4px #0001;
}
-.appearance-themes [data-pressed="true"]::after {
+.appearance-choices [data-pressed="true"]::after {
background: var(--accent);
}
diff --git a/assets/webui/ofdgo_theme.js b/assets/webui/ofdgo_theme.js
index 7a04218..69ae8a6 100644
--- a/assets/webui/ofdgo_theme.js
+++ b/assets/webui/ofdgo_theme.js
@@ -3,7 +3,7 @@
const preference = matchMedia("(prefers-color-scheme: dark)");
const key = "ofdgo.theme";
let mode = root.dataset.themeMode || "system";
- let material = root.dataset.titlebarChoice || "mica";
+ let material = root.dataset.titlebarChoice || "acrylic";
let host = null, report = null, pending = Promise.resolve(), revision = 0, committed = null;
if (!root.dataset.themeMode) {
try { mode = localStorage.getItem(key) || "system"; } catch {}
@@ -14,8 +14,7 @@
root.dataset.theme = mode === "system" ? preference.matches ? "dark" : "light" : mode;
document.querySelector('meta[name="theme-color"]').content = root.dataset.theme === "dark" ? "#272e33" : "#fafbfc";
for (const button of document.querySelectorAll("[data-theme-choice]")) button.dataset.pressed = String(button.dataset.themeChoice === mode);
- const select = document.querySelector("#titleBarMaterial");
- if (select) select.value = material;
+ for (const button of document.querySelectorAll("[data-material-choice]")) button.dataset.pressed = String(button.dataset.materialChoice === material);
}
function sync() {
if (!host) return;
@@ -58,12 +57,13 @@
window.ofdgoTheme = {set, flush, connect(value, onError) {
host = value;
report = onError;
- const select = document.querySelector("#titleBarMaterial");
const materials = (root.dataset.titlebarMaterials || "").split(",");
if (host && materials.length > 1) {
- for (const option of [...select.options]) if (!materials.includes(option.value)) option.remove();
- select.closest(".appearance-material").hidden = false;
- select.addEventListener("change", () => { material = select.value; sync(); });
+ document.querySelector(".appearance-material").hidden = false;
+ for (const button of document.querySelectorAll("[data-material-choice]")) {
+ button.hidden = !materials.includes(button.dataset.materialChoice);
+ button.addEventListener("click", () => { material = button.dataset.materialChoice; apply(); sync(); });
+ }
}
apply();
sync();
diff --git a/internal/webview/webview.go b/internal/webview/webview.go
index 29fa0bb..4dc46eb 100644
--- a/internal/webview/webview.go
+++ b/internal/webview/webview.go
@@ -1214,8 +1214,8 @@ func windowOptions(dataDir string) (guigo.Options, error) {
return guigo.Options{}, err
}
material := guigo.TitleBarSolid
- if guigo.SupportsTitleBarMaterial(guigo.TitleBarMica) {
- material = guigo.TitleBarMica
+ if guigo.SupportsTitleBarMaterial(guigo.TitleBarAcrylic) {
+ material = guigo.TitleBarAcrylic
}
return guigo.Options{
AppID: appID,
diff --git a/internal/webview/webview_theme.go b/internal/webview/webview_theme.go
index 61c35a1..52eed27 100644
--- a/internal/webview/webview_theme.go
+++ b/internal/webview/webview_theme.go
@@ -49,7 +49,7 @@ func themeColors(dark bool) guigo.TitleBarColors {
// loadTheme 在创建窗口前读取用户目录中的主题偏好
// 返回: error 读取或解析错误
func (h *Host) loadTheme() error {
- h.theme = applicationTheme{Mode: "system", Material: "mica"}
+ h.theme = applicationTheme{Mode: "system", Material: "acrylic"}
data, err := os.ReadFile(h.themePath)
if os.IsNotExist(err) {
return nil
@@ -92,7 +92,7 @@ func (h *Host) themeIndex() ([]byte, error) {
mode = "system"
}
materials := []string{"solid"}
- for _, choice := range []string{"mica", "acrylic"} {
+ for _, choice := range []string{"acrylic", "mica"} {
if titleBarMaterial(choice) != guigo.TitleBarSolid {
materials = append(materials, choice)
}