mirror of
https://github.com/wavetermdev/waveterm.git
synced 2025-01-31 23:11:28 +01:00
try to get meta tag to detect color (#908)
This commit is contained in:
parent
6665e2d96e
commit
8460620196
@ -14,7 +14,6 @@ import clsx from "clsx";
|
||||
import { WebviewTag } from "electron";
|
||||
import * as jotai from "jotai";
|
||||
import React, { memo, useEffect, useState } from "react";
|
||||
import { debounce } from "throttle-debounce";
|
||||
import "./webview.less";
|
||||
|
||||
export class WebViewModel implements ViewModel {
|
||||
@ -386,6 +385,30 @@ const WebView = memo(({ model }: WebViewProps) => {
|
||||
const [webContentsId, setWebContentsId] = useState(null);
|
||||
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(() => {
|
||||
if (model.webviewRef.current && domReady) {
|
||||
const wcId = model.webviewRef.current.getWebContentsId?.();
|
||||
@ -424,9 +447,7 @@ const WebView = memo(({ model }: WebViewProps) => {
|
||||
const stopLoadingHandler = () => {
|
||||
model.setRefreshIcon("rotate-right");
|
||||
model.setIsLoading(false);
|
||||
debounce(1000, () => {
|
||||
webview.style.backgroundColor = "white";
|
||||
})();
|
||||
setBgColor();
|
||||
};
|
||||
const failLoadHandler = (e: any) => {
|
||||
if (e.errorCode === -3) {
|
||||
@ -444,6 +465,7 @@ const WebView = memo(({ model }: WebViewProps) => {
|
||||
};
|
||||
const handleDomReady = () => {
|
||||
setDomReady(true);
|
||||
setBgColor();
|
||||
};
|
||||
|
||||
webview.addEventListener("did-navigate-in-page", navigateListener);
|
||||
|
Loading…
Reference in New Issue
Block a user