Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-02-08 00:21:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

try to get meta tag to detect color (#908)

Browse Source
This commit is contained in:
Mike Sawka 2024-09-30 13:51:01 -07:00 committed by GitHub
parent 6665e2d96e
commit 8460620196
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 26 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/app/view/webview/webview.tsx
View File

@ -14,7 +14,6 @@ import clsx from "clsx";
import { WebviewTag } from "electron"; import { WebviewTag } from "electron";
import * as jotai from "jotai"; import * as jotai from "jotai";
import React, { memo, useEffect, useState } from "react"; import React, { memo, useEffect, useState } from "react";
import { debounce } from "throttle-debounce";
import "./webview.less"; import "./webview.less";
export class WebViewModel implements ViewModel { export class WebViewModel implements ViewModel {
@ -386,6 +385,30 @@ const WebView = memo(({ model }: WebViewProps) => {
const [webContentsId, setWebContentsId] = useState(null); const [webContentsId, setWebContentsId] = useState(null);
const [domReady, setDomReady] = useState(false); const [domReady, setDomReady] = useState(false);
function setBgColor() {
const webview = model.webviewRef.current;
if (!webview) {
return;
}
setTimeout(() => {
webview
.executeJavaScript(
`!!document.querySelector('meta[name="color-scheme"]') && document.querySelector('meta[name="color-scheme"]').content?.includes('dark') || false`
)
.then((hasDarkMode) => {
if (hasDarkMode) {
webview.style.backgroundColor = "black"; // Dark mode background
} else {
webview.style.backgroundColor = "white"; // Light mode background
}
})
.catch((e) => {
webview.style.backgroundColor = "black"; // Dark mode background
console.log("Error getting color scheme, defaulting to dark", e);
});
}, 100);
}
useEffect(() => { useEffect(() => {
if (model.webviewRef.current && domReady) { if (model.webviewRef.current && domReady) {
const wcId = model.webviewRef.current.getWebContentsId?.(); const wcId = model.webviewRef.current.getWebContentsId?.();
@ -424,9 +447,7 @@ const WebView = memo(({ model }: WebViewProps) => {
const stopLoadingHandler = () => { const stopLoadingHandler = () => {
model.setRefreshIcon("rotate-right"); model.setRefreshIcon("rotate-right");
model.setIsLoading(false); model.setIsLoading(false);
debounce(1000, () => { setBgColor();
webview.style.backgroundColor = "white";
})();
}; };
const failLoadHandler = (e: any) => { const failLoadHandler = (e: any) => {
if (e.errorCode === -3) { if (e.errorCode === -3) {
@ -444,6 +465,7 @@ const WebView = memo(({ model }: WebViewProps) => {
}; };
const handleDomReady = () => { const handleDomReady = () => {
setDomReady(true); setDomReady(true);
setBgColor();
}; };
webview.addEventListener("did-navigate-in-page", navigateListener); webview.addEventListener("did-navigate-in-page", navigateListener);