├── README.md
├── src
    ├── preload.js
    ├── renderer.js
    └── main.js
├── static
    ├── config.json
    └── settings.html
├── manifest.json
└── LICENSE


/README.md:
--------------------------------------------------------------------------------
1 | # More Materials
2 | 
3 | LiteLoaderQQNT 插件，添加更多的背景材质，替换原本的透明效果（Windows 11 22H2 及以上，Linux + KDE + X11）
4 | 


--------------------------------------------------------------------------------
/src/preload.js:
--------------------------------------------------------------------------------
1 | const { contextBridge, ipcRenderer } = require("electron");
2 | 
3 | 
4 | contextBridge.exposeInMainWorld("more_materials", {
5 |     update: () => ipcRenderer.invoke("mojinran.more_materials.update"),
6 | });
7 | 


--------------------------------------------------------------------------------
/static/config.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "win32": {
 3 |         "material": "mica",
 4 |         "color": "rgba(0, 0, 0, 0)",
 5 |         "transparent": false
 6 |     },
 7 |     "linux": {
 8 |         "material": "blur",
 9 |         "color": "rgba(255, 255, 255, 0.2)",
10 |         "transparent": true
11 |     }
12 | }


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "manifest_version": 4,
 3 |     "type": "theme",
 4 |     "name": "More Materials",
 5 |     "slug": "more_materials",
 6 |     "description": "添加更多的背景材质，替换原本的透明效果（Windows 11 22H2 及以上，Linux + KDE + X11）",
 7 |     "version": "1.1.2",
 8 |     "authors": [
 9 |         {
10 |             "name": "沫烬染",
11 |             "link": "https://github.com/mo-jinran"
12 |         }
13 |     ],
14 |     "platform": [
15 |         "win32",
16 |         "linux"
17 |     ],
18 |     "injects": {
19 |         "renderer": "./src/renderer.js",
20 |         "main": "./src/main.js",
21 |         "preload": "./src/preload.js"
22 |     },
23 |     "repository": {
24 |         "repo": "mo-jinran/More-Materials",
25 |         "branch": "main",
26 |         "release": {
27 |             "tag": "1.1.2"
28 |         }
29 |     }
30 | }
31 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 沫烬染
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/renderer.js:
--------------------------------------------------------------------------------
 1 | import manifest from "../manifest.json" with {type: "json"};
 2 | import default_config from "../static/config.json" with {type: "json"};
 3 | 
 4 | 
 5 | export const onSettingWindowCreated = async view => {
 6 |     const config = await LiteLoader.api.config.get(manifest.slug, default_config);
 7 |     const plugin_path = LiteLoader.plugins[manifest.slug].path.plugin;
 8 | 
 9 |     view.innerHTML = await (await fetch(`local:///${plugin_path}/static/settings.html`)).text();
10 | 
11 |     if (LiteLoader.os.platform == "win32") {
12 |         view.querySelector(".windows setting-list").setAttribute("is-active", "");
13 |     }
14 |     if (LiteLoader.os.platform == "linux") {
15 |         view.querySelector(".linux setting-list").setAttribute("is-active", "");
16 |     }
17 | 
18 |     const win32_material = view.querySelectorAll(".windows setting-select")[0];
19 |     win32_material.querySelector(`[data-value="${config.win32.material}"]`).click()
20 |     win32_material.addEventListener("selected", update((event, config) => {
21 |         config.win32.material = event.detail.value;
22 |     }));
23 | 
24 |     const win32_color = view.querySelectorAll(".windows input")[0];
25 |     win32_color.value = config.win32.color;
26 |     win32_color.addEventListener("change", update((event, config) => {
27 |         config.win32.color = event.target.value;
28 |     }));
29 | 
30 |     const win32_transparent = view.querySelectorAll(".windows setting-switch")[0];
31 |     win32_transparent.toggleAttribute("is-active", config.win32.transparent);
32 |     win32_transparent.addEventListener("click", update((event, config) => {
33 |         event.target.toggleAttribute("is-active");
34 |         config.win32.transparent = event.target.hasAttribute("is-active");
35 |     }));
36 | 
37 |     const linux_material = view.querySelectorAll(".linux setting-select")[0];
38 |     linux_material.querySelector(`[data-value="${config.linux.material}"]`).click()
39 |     linux_material.addEventListener("selected", update((event, config) => {
40 |         config.linux.material = event.detail.value;
41 |     }));
42 | 
43 |     const linux_color = view.querySelectorAll(".linux input")[0];
44 |     linux_color.value = config.linux.color;
45 |     linux_color.addEventListener("change", update((event, config) => {
46 |         config.linux.color = event.target.value;
47 |     }));
48 | 
49 |     const linux_transparent = view.querySelectorAll(".linux setting-switch")[0];
50 |     linux_transparent.toggleAttribute("is-active", config.linux.transparent);
51 |     linux_transparent.addEventListener("click", update((event, config) => {
52 |         event.target.toggleAttribute("is-active");
53 |         config.linux.transparent = event.target.hasAttribute("is-active");
54 |     }));
55 | }
56 | 
57 | 
58 | function update(callback) {
59 |     return async (event) => {
60 |         const config = await LiteLoader.api.config.get(manifest.slug, default_config);
61 |         callback(event, config);
62 |         await LiteLoader.api.config.set(manifest.slug, config);
63 |         await more_materials.update();
64 |     }
65 | }
66 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | const manifest = require("../manifest.json");
 2 | const default_config = require("../static/config.json");
 3 | const { execSync } = require("child_process");
 4 | const { BrowserWindow, ipcMain } = require("electron");
 5 | 
 6 | 
 7 | exports.onBrowserWindowCreated = window => {
 8 |     window.on("show", () => update(window));
 9 |     window.on("focus", () => update(window));
10 | }
11 | 
12 | 
13 | ipcMain.handle("mojinran.more_materials.update", () => {
14 |     for (const window of BrowserWindow.getAllWindows()) {
15 |         update(window);
16 |     }
17 | });
18 | 
19 | 
20 | const blacklist = [
21 |     "#/screen-record",      // 录屏
22 |     "#/desktop-screenshot", // 截屏
23 |     "#/notification",       // 通知
24 |     "/screenshot.html"      // 26299版截屏
25 | ];
26 | 
27 | 
28 | function update(window) {
29 |     const url = window.webContents.getURL();
30 |     const config = LiteLoader.api.config.get(manifest.slug, default_config);
31 |     if (blacklist.some(item => url.includes(item))) {
32 |         return;
33 |     }
34 |     if (!window.isVisible()) {
35 |         return;
36 |     }
37 |     if (LiteLoader.os.platform == "win32") {
38 |         if (!config.win32.transparent) {
39 |             window.setBackgroundMaterial(config.win32.material);
40 |         }
41 |         window.setBackgroundColor(config.win32.color);
42 |     }
43 |     if (LiteLoader.os.platform == "linux") {
44 |         try {
45 |             const ids = execSync(`wmctrl -xl | grep qq.QQ`, { encoding: "utf-8" });
46 |             for (const id of ids.trim().split("\n")) {
47 |                 if (config.linux.material === "none" || !config.linux.transparent) {
48 |                     execSync(`xprop -id ${id.split(" ")[0]} -remove _KDE_NET_WM_BLUR_BEHIND_REGION`);
49 |                 } else if (config.linux.material === "blur") {
50 |                     execSync(`xprop -id ${id.split(" ")[0]} -f _KDE_NET_WM_BLUR_BEHIND_REGION 32c -set _KDE_NET_WM_BLUR_BEHIND_REGION 0x0`);
51 |                 }
52 |             }
53 |         } catch (e) {
54 |             console.log(e);
55 |         }
56 |         window.setBackgroundColor(config.linux.color);
57 |     }
58 | }
59 | 
60 | 
61 | require.cache["electron"] = new Proxy(require.cache["electron"], {
62 |     get(target, property, receiver) {
63 |         const electron = Reflect.get(target, property, receiver);
64 |         return property != "exports" ? electron : new Proxy(electron, {
65 |             get(target, property, receiver) {
66 |                 const BrowserWindow = Reflect.get(target, property, receiver);
67 |                 return property != "BrowserWindow" ? BrowserWindow : new Proxy(BrowserWindow, {
68 |                     construct(target, [options], newTarget) {
69 |                         const config = LiteLoader.api.config.get(manifest.slug, default_config);
70 |                         if (LiteLoader.os.platform == "win32") {
71 |                             return Reflect.construct(target, [{
72 |                                 ...options,
73 |                                 transparent: options.transparent || config.win32.transparent,
74 |                             }], newTarget);
75 |                         }
76 |                         if (LiteLoader.os.platform == "linux") {
77 |                             return Reflect.construct(target, [{
78 |                                 ...options,
79 |                                 transparent: options.transparent || config.linux.transparent,
80 |                             }], newTarget);
81 |                         }
82 |                     }
83 |                 });
84 |             }
85 |         });
86 |     }
87 | });


--------------------------------------------------------------------------------
/static/settings.html:
--------------------------------------------------------------------------------
  1 | <style>
  2 |     .more_materials {
  3 |         setting-select {
  4 |             width: 150px;
  5 |         }
  6 | 
  7 |         input {
  8 |             & {
  9 |                 width: 150px;
 10 |                 height: 24px;
 11 |                 border-radius: 4px;
 12 |                 transition: all 100ms ease-out;
 13 |             }
 14 | 
 15 |             &:focus {
 16 |                 background-color: var(--overlay_active);
 17 |             }
 18 | 
 19 |             @media (prefers-color-scheme: light) {
 20 |                 & {
 21 |                     color: black;
 22 |                 }
 23 |             }
 24 | 
 25 |             @media (prefers-color-scheme: dark) {
 26 |                 & {
 27 |                     color: white;
 28 |                 }
 29 |             }
 30 |         }
 31 |     }
 32 | </style>
 33 | 
 34 | 
 35 | <setting-section data-title="使用前必读">
 36 |     <setting-panel>
 37 |         <setting-list data-direction="column">
 38 |             <setting-item>
 39 |                 <setting-text>Windows 11 22H2 及以上，需关闭 <strong>通用-其他-透明效果</strong></setting-text>
 40 |             </setting-item>
 41 |             <setting-item>
 42 |                 <setting-text>Linux + KDE + X11，需安装 <strong>wmctrl</strong> 和 <strong>xorg-xprop</strong></setting-text>
 43 |             </setting-item>
 44 |             <setting-item>
 45 |                 <setting-text>插件仅修改窗体相关，若想正常使用，可能还需安装适配此插件的第三方主题</setting-text>
 46 |             </setting-item>
 47 |         </setting-list>
 48 |     </setting-panel>
 49 | </setting-section>
 50 | 
 51 | 
 52 | <setting-section data-title="自定义窗体">
 53 |     <setting-panel class="windows">
 54 |         <setting-list is-collapsible data-direction="column" data-title="Windows">
 55 |             <setting-item>
 56 |                 <div>
 57 |                     <setting-text>材质</setting-text>
 58 |                     <setting-text data-type="secondary">需关闭 Transparent 选项后生效，建议调整后重启</setting-text>
 59 |                 </div>
 60 |                 <setting-select>
 61 |                     <setting-option data-value="none">不设置任何材质</setting-option>
 62 |                     <setting-option data-value="auto">由 DWM 自动设置</setting-option>
 63 |                     <setting-option data-value="mica">使用 Mica 材质</setting-option>
 64 |                     <setting-option data-value="acrylic">使用 Acrylic 材质</setting-option>
 65 |                     <setting-option data-value="tabbed">使用 Tabbed 材质</setting-option>
 66 |                 </setting-select>
 67 |             </setting-item>
 68 |             <setting-item>
 69 |                 <div>
 70 |                     <setting-text>颜色</setting-text>
 71 |                     <setting-text data-type="secondary">格式为 Hex, RGB, RGBA, HSL, HSLA 或 CSS 命名颜色</setting-text>
 72 |                 </div>
 73 |                 <input type="text" spellcheck="false" placeholder="请输入">
 74 |             </setting-item>
 75 |             <setting-item>
 76 |                 <div>
 77 |                     <setting-text>透明</setting-text>
 78 |                     <setting-text data-type="secondary">开启此选项后，窗体将透明并且圆角与阴影被移除，可适当调整 颜色 透明度</setting-text>
 79 |                 </div>
 80 |                 <setting-switch></setting-switch>
 81 |             </setting-item>
 82 |         </setting-list>
 83 |     </setting-panel>
 84 |     <setting-panel class="linux">
 85 |         <setting-list is-collapsible data-direction="column" data-title="Linux">
 86 |             <setting-item>
 87 |                 <div>
 88 |                     <setting-text>材质</setting-text>
 89 |                     <setting-text data-type="secondary">需开启 Transparent 选项后生效，建议调整后重启</setting-text>
 90 |                 </div>
 91 |                 <setting-select>
 92 |                     <setting-option data-value="none">不设置任何材质</setting-option>
 93 |                     <setting-option data-value="blur">使用 Blur 材质</setting-option>
 94 |                 </setting-select>
 95 |             </setting-item>
 96 |             <setting-item>
 97 |                 <div>
 98 |                     <setting-text>颜色</setting-text>
 99 |                     <setting-text data-type="secondary">格式为 Hex, RGB, RGBA, HSL, HSLA 或 CSS 命名颜色</setting-text>
100 |                 </div>
101 |                 <input type="text" spellcheck="false" placeholder="请输入">
102 |             </setting-item>
103 |             <setting-item>
104 |                 <div>
105 |                     <setting-text>透明</setting-text>
106 |                     <setting-text data-type="secondary">本选项用于控制是否设置材质, 当颜色 alpha 值不为 1 时才有意义</setting-text>
107 |                 </div>
108 |                 <setting-switch></setting-switch>
109 |             </setting-item>
110 |         </setting-list>
111 |     </setting-panel>
112 | </setting-section>


--------------------------------------------------------------------------------