@midscene/visualizer 1.0.1-beta-20251110055007.0 → 1.0.1-beta-20251110130223.0

package/dist/es/icons/setting.mjs

@@ -8,7 +8,7 @@ const SvgSetting = (props)=>/*#__PURE__*/ jsx("svg", {
         viewBox: "0 0 27 27",
         ...props,
         children: /*#__PURE__*/ jsx("path", {
-            stroke: "#000",
+            stroke: "currentColor",
             strokeLinecap: "round",
             strokeLinejoin: "round",
             strokeOpacity: 0.85,

package/dist/es/icons/show-marker.mjs

@@ -8,7 +8,7 @@ const SvgShowMarker = (props)=>/*#__PURE__*/ jsx("svg", {
         viewBox: "0 0 16 16",
         ...props,
         children: /*#__PURE__*/ jsx("path", {
-            fill: "#333",
+            fill: "currentColor",
             d: "M13 1.835a2.165 2.165 0 0 1 .665 4.225v3.88a2.166 2.166 0 1 1-2.725 2.725H5.06a2.165 2.165 0 1 1-2.725-2.726V6.06A2.165 2.165 0 1 1 5.06 3.336h5.88c.281-.87 1.097-1.5 2.06-1.5m-10 9.33a.835.835 0 1 0 0 1.67.835.835 0 0 0 0-1.67m10 0a.835.835 0 1 0 0 1.67.835.835 0 0 0 0-1.67m-7.94-6.5A2.17 2.17 0 0 1 3.665 6.06v3.88c.66.213 1.181.734 1.395 1.395h5.88a2.17 2.17 0 0 1 1.395-1.396V6.06a2.17 2.17 0 0 1-1.395-1.394zM3 3.165a.835.835 0 1 0 0 1.67.835.835 0 0 0 0-1.67m10 0a.835.835 0 1 0 0 1.67.835.835 0 0 0 0-1.67"
         })
     });

package/dist/lib/component/blackboard/index.css

@@ -31,3 +31,11 @@
   width: 100%;
 }
 
+[data-theme="dark"] .blackboard .footer, [data-theme="dark"] .blackboard .bottom-tip-item {
+  color: rgba(255, 255, 255, .45);
+}
+
+[data-theme="dark"] .blackboard-main-content canvas {
+  border-color: rgba(255, 255, 255, .12);
+}
+

package/dist/lib/component/blackboard/index.js

@@ -103,6 +103,9 @@ const Blackboard = (props)=>{
     const elementMarkContainer = (0, external_react_namespaceObject.useMemo)(()=>new external_pixi_js_namespaceObject.Container(), []);
     const [hoverElement, setHoverElement] = (0, external_react_namespaceObject.useState)(null);
     const pixiBgRef = (0, external_react_namespaceObject.useRef)(void 0);
+    const animationFrameRef = (0, external_react_namespaceObject.useRef)(null);
+    const highlightGraphicsRef = (0, external_react_namespaceObject.useRef)([]);
+    const glowFiltersRef = (0, external_react_namespaceObject.useRef)([]);
     const backgroundVisible = true;
     const elementsVisible = true;
     (0, external_react_namespaceObject.useEffect)(()=>{
@@ -129,6 +132,10 @@ const Blackboard = (props)=>{
         })());
         return ()=>{
             console.log('will destroy');
+            if (null !== animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
+                animationFrameRef.current = null;
+            }
             try {
                 app.destroy(true, {
                     children: true,
@@ -199,18 +206,54 @@ const Blackboard = (props)=>{
         elementMarkContainer.removeChildren();
         highlightContainer.eventMode = 'passive';
         elementMarkContainer.eventMode = 'passive';
+        highlightGraphicsRef.current = [];
+        glowFiltersRef.current = [];
         if (highlightRect) {
             const [graphics] = rectMarkForItem(highlightRect, 'Search Area', 'searchArea');
             highlightContainer.addChild(graphics);
         }
         if (highlightElements.length) highlightElements.forEach((element)=>{
             const { rect, content, id } = element;
-            const [graphics] = rectMarkForItem(rect, content, 'highlight');
-            highlightContainer.addChild(graphics);
+            const items = rectMarkForItem(rect, content, 'highlight');
+            const graphics = items[0];
+            const glowFilter = new external_pixi_filters_namespaceObject.GlowFilter({
+                distance: 30,
+                outerStrength: 3,
+                innerStrength: 0,
+                color: 0xfd5907,
+                quality: 0.5
+            });
+            const existingFilters = graphics.filters;
+            if (Array.isArray(existingFilters)) graphics.filters = [
+                ...existingFilters,
+                glowFilter
+            ];
+            else if (existingFilters) graphics.filters = [
+                existingFilters,
+                glowFilter
+            ];
+            else graphics.filters = [
+                glowFilter
+            ];
+            items.forEach((item)=>highlightContainer.addChild(item));
+            highlightGraphicsRef.current.push(graphics);
+            glowFiltersRef.current.push(glowFilter);
         });
         if (null == highlightPoints ? void 0 : highlightPoints.length) highlightPoints.forEach((point)=>{
             const graphics = pointMarkForItem(point, 'highlightPoint');
+            const glowFilter = new external_pixi_filters_namespaceObject.GlowFilter({
+                distance: 25,
+                outerStrength: 2.5,
+                innerStrength: 0,
+                color: 0xfd5907,
+                quality: 0.5
+            });
+            graphics.filters = [
+                glowFilter
+            ];
             highlightContainer.addChild(graphics);
+            highlightGraphicsRef.current.push(graphics);
+            glowFiltersRef.current.push(glowFilter);
         });
         elementMarkContainer.visible = elementsVisible;
         return {
@@ -224,6 +267,46 @@ const Blackboard = (props)=>{
         highlightRect,
         highlightPoints
     ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!appInitialed || 0 === highlightGraphicsRef.current.length) return void console.log('Animation skipped:', {
+            appInitialed,
+            graphicsCount: highlightGraphicsRef.current.length
+        });
+        console.log('Starting pulsing animation for', highlightGraphicsRef.current.length, 'graphics');
+        const graphicsToAnimate = highlightGraphicsRef.current;
+        const glowFilters = glowFiltersRef.current;
+        const pulseDuration = 1200;
+        const minAlpha = 0.4;
+        const maxAlpha = 1.0;
+        const minGlowStrength = 2.0;
+        const maxGlowStrength = 5.0;
+        const startTime = performance.now();
+        const animate = ()=>{
+            const elapsed = performance.now() - startTime;
+            const progress = elapsed % pulseDuration / pulseDuration;
+            const sineValue = Math.sin(progress * Math.PI * 2);
+            const normalizedSine = (sineValue + 1) / 2;
+            const alpha = minAlpha + normalizedSine * (maxAlpha - minAlpha);
+            const glowStrength = minGlowStrength + normalizedSine * (maxGlowStrength - minGlowStrength);
+            graphicsToAnimate.forEach((graphics, index)=>{
+                graphics.alpha = alpha;
+                if (glowFilters[index]) glowFilters[index].outerStrength = glowStrength;
+            });
+            animationFrameRef.current = requestAnimationFrame(animate);
+        };
+        animate();
+        return ()=>{
+            console.log('Stopping pulsing animation');
+            if (null !== animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
+                animationFrameRef.current = null;
+            }
+        };
+    }, [
+        appInitialed,
+        highlightElements,
+        highlightPoints
+    ]);
     let bottomTipA = null;
     if (1 === highlightElementRects.length) bottomTipA = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         className: "bottom-tip",

package/dist/lib/component/env-config-reminder/index.css

@@ -20,3 +20,11 @@
   font-size: 14px;
 }
 
+[data-theme="dark"] .env-config-reminder {
+  background: rgba(82, 38, 7, .3);
+}
+
+[data-theme="dark"] .env-config-reminder .reminder-text {
+  color: rgba(255, 255, 255, .85);
+}
+

package/dist/lib/component/history-selector/index.css

@@ -133,3 +133,35 @@
   padding: 40px 20px;
 }
 
+[data-theme="dark"] .history-selector .history-timestamp, [data-theme="dark"] .history-selector .history-path {
+  color: rgba(255, 255, 255, .45);
+}
+
+[data-theme="dark"] .history-selector .history-description {
+  color: rgba(255, 255, 255, .65);
+}
+
+[data-theme="dark"] .history-selector .history-no-items {
+  color: rgba(255, 255, 255, .45);
+}
+
+[data-theme="dark"] .history-selector .history-item:hover {
+  background: rgba(255, 255, 255, .08);
+}
+
+[data-theme="dark"] .history-selector .history-item .history-clear-icon {
+  border-color: rgba(255, 255, 255, .12);
+}
+
+[data-theme="dark"] .history-selector .history-item .history-clear-icon:hover {
+  border-color: #40a9ff;
+}
+
+[data-theme="dark"] .history-selector .history-load-more {
+  color: #1890ff;
+}
+
+[data-theme="dark"] .history-selector .history-load-more:hover {
+  color: #40a9ff;
+}
+

package/dist/lib/component/logo/index.js

@@ -28,11 +28,33 @@ __webpack_require__.d(__webpack_exports__, {
     LogoUrl: ()=>LogoUrl
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
 require("./index.css");
 const LogoUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/vhaeh7vhabf/Midscene.png';
+const LogoUrlLight = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/nupipfups/Midscene/midscene_with_text_light.png';
+const LogoUrlDark = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/nupipfups/Midscene/midscene_with_text_dark.png';
 const Logo = (param)=>{
     let { hideLogo = false } = param;
+    const [isDark, setIsDark] = (0, external_react_namespaceObject.useState)(false);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        const checkTheme = ()=>{
+            var _document_querySelector;
+            const theme = null == (_document_querySelector = document.querySelector('[data-theme]')) ? void 0 : _document_querySelector.getAttribute('data-theme');
+            setIsDark('dark' === theme);
+        };
+        checkTheme();
+        const observer = new MutationObserver(checkTheme);
+        const target = document.querySelector('[data-theme]') || document.documentElement;
+        observer.observe(target, {
+            attributes: true,
+            attributeFilter: [
+                'data-theme'
+            ]
+        });
+        return ()=>observer.disconnect();
+    }, []);
     if (hideLogo) return null;
+    const logoSrc = isDark ? LogoUrlDark : LogoUrlLight;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         className: "logo",
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("a", {
@@ -41,7 +63,7 @@ const Logo = (param)=>{
             rel: "noreferrer",
             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
                 alt: "Midscene_logo",
-                src: "https://lf3-static.bytednsdoc.com/obj/eden-cn/vhaeh7vhabf/Midscene.png"
+                src: logoSrc
             })
         })
     });

package/dist/lib/component/player/index.css

@@ -183,3 +183,28 @@
   display: flex;
 }
 
+[data-theme="dark"] .player-container {
+  background: #141414;
+  border-color: #141414;
+}
+
+[data-theme="dark"] .player-container[data-fit-mode="height"] {
+  background: #1f1f1f;
+}
+
+[data-theme="dark"] .player-container[data-fit-mode="height"] .canvas-container {
+  background-color: #141414;
+}
+
+[data-theme="dark"] .player-container .canvas-container {
+  background-color: #1f1f1f;
+}
+
+[data-theme="dark"] .player-container .player-tools, [data-theme="dark"] .player-container .player-tools .ant-spin, [data-theme="dark"] .player-container .player-tools .status-icon svg {
+  color: rgba(255, 255, 255, .85);
+}
+
+[data-theme="dark"] .player-container .player-tools .status-icon:hover {
+  background: rgba(255, 255, 255, .08);
+}
+

package/dist/lib/component/player/index.js

@@ -48,8 +48,6 @@ const global_perspective_js_namespaceObject = require("../../icons/global-perspe
 var global_perspective_js_default = /*#__PURE__*/ __webpack_require__.n(global_perspective_js_namespaceObject);
 const player_setting_js_namespaceObject = require("../../icons/player-setting.js");
 var player_setting_js_default = /*#__PURE__*/ __webpack_require__.n(player_setting_js_namespaceObject);
-const show_marker_js_namespaceObject = require("../../icons/show-marker.js");
-var show_marker_js_default = /*#__PURE__*/ __webpack_require__.n(show_marker_js_namespaceObject);
 const store_js_namespaceObject = require("../../store/store.js");
 const pixi_loader_js_namespaceObject = require("../../utils/pixi-loader.js");
 const external_blackboard_index_js_namespaceObject = require("../blackboard/index.js");
@@ -173,19 +171,13 @@ function Player(props) {
     var _scripts_;
     const [titleText, setTitleText] = (0, external_react_namespaceObject.useState)('');
     const [subTitleText, setSubTitleText] = (0, external_react_namespaceObject.useState)('');
-    const { autoZoom, setAutoZoom, elementsVisible, setElementsVisible } = (0, store_js_namespaceObject.useBlackboardPreference)();
+    const { autoZoom, setAutoZoom } = (0, store_js_namespaceObject.useBlackboardPreference)();
     (0, external_react_namespaceObject.useEffect)(()=>{
         if ((null == props ? void 0 : props.autoZoom) !== void 0) setAutoZoom(props.autoZoom);
     }, [
         null == props ? void 0 : props.autoZoom,
         setAutoZoom
     ]);
-    (0, external_react_namespaceObject.useEffect)(()=>{
-        if ((null == props ? void 0 : props.elementsVisible) !== void 0) setElementsVisible(props.elementsVisible);
-    }, [
-        null == props ? void 0 : props.elementsVisible,
-        setElementsVisible
-    ]);
     const scripts = null == props ? void 0 : props.replayScripts;
     const imageWidth = (null == props ? void 0 : props.imageWidth) || 1920;
     const imageHeight = (null == props ? void 0 : props.imageHeight) || 1080;
@@ -208,12 +200,6 @@ function Player(props) {
         container.zIndex = LAYER_ORDER_INSIGHT;
         return container;
     }, []);
-    (0, external_react_namespaceObject.useEffect)(()=>{
-        insightMarkContainer.visible = elementsVisible;
-    }, [
-        elementsVisible,
-        insightMarkContainer
-    ]);
     const basicCameraState = {
         left: 0,
         top: 0,
@@ -842,59 +828,6 @@ function Player(props) {
                                                     })
                                                 ]
                                             })
-                                        },
-                                        {
-                                            key: 'elementsVisible',
-                                            style: {
-                                                height: '39px',
-                                                margin: 0,
-                                                padding: '0 12px'
-                                            },
-                                            label: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                                                style: {
-                                                    display: 'flex',
-                                                    alignItems: 'center',
-                                                    justifyContent: 'space-between',
-                                                    width: '100%',
-                                                    height: '39px'
-                                                },
-                                                children: [
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                                                        style: {
-                                                            display: 'flex',
-                                                            alignItems: 'center',
-                                                            gap: '4px'
-                                                        },
-                                                        children: [
-                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(show_marker_js_default(), {
-                                                                style: {
-                                                                    width: '16px',
-                                                                    height: '16px'
-                                                                }
-                                                            }),
-                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                                                style: {
-                                                                    fontSize: '12px',
-                                                                    marginRight: '16px'
-                                                                },
-                                                                children: "Show element markers"
-                                                            })
-                                                        ]
-                                                    }),
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Switch, {
-                                                        size: "small",
-                                                        checked: elementsVisible,
-                                                        onChange: (checked)=>{
-                                                            setElementsVisible(checked);
-                                                            triggerReplay();
-                                                        },
-                                                        onClick: (_, e)=>{
-                                                            var _e_stopPropagation;
-                                                            return null == e ? void 0 : null == (_e_stopPropagation = e.stopPropagation) ? void 0 : _e_stopPropagation.call(e);
-                                                        }
-                                                    })
-                                                ]
-                                            })
                                         }
                                     ]
                                 },

package/dist/lib/component/playground/index.css

@@ -32,6 +32,15 @@
   overflow: scroll;
 }
 
+[data-theme="dark"] .result-wrapper .loading-container .loading-progress-text {
+  color: rgba(255, 255, 255, .65);
+}
+
+[data-theme="dark"] .result-wrapper pre {
+  color: rgba(255, 255, 255, .85);
+  background: #141414;
+}
+
 .prompt-input-wrapper {
   width: 100%;
 }
@@ -423,6 +432,49 @@
   color: #2b83ff;
 }
 
+[data-theme="dark"] .prompt-input .tip-button {
+  background-color: rgba(255, 255, 255, .08);
+}
+
+[data-theme="dark"] .prompt-input .tip-button.active {
+  color: #fff;
+  background-color: #2b83ff;
+}
+
+[data-theme="dark"] .prompt-input .prompt-textarea-wrapper {
+  background-color: rgba(255, 255, 255, .04);
+}
+
+[data-theme="dark"] .prompt-input .prompt-textarea-wrapper:hover, [data-theme="dark"] .prompt-input .prompt-textarea-wrapper.focused {
+  background-color: rgba(255, 255, 255, .08);
+}
+
+[data-theme="dark"] .prompt-input .btn-wrapper .btn-item {
+  color: #fff;
+  background-color: #2b83ff;
+}
+
+[data-theme="dark"] .prompt-input .btn-wrapper .btn-item:hover {
+  background-color: #2b83ff;
+}
+
+[data-theme="dark"] .prompt-input .dropdown-content {
+  background-color: #1f1f1f;
+  border-color: rgba(255, 255, 255, .12);
+}
+
+[data-theme="dark"] .prompt-input .param-label {
+  color: rgba(255, 255, 255, .85);
+}
+
+[data-theme="dark"] .prompt-input .error-message {
+  color: #ff4d4f;
+}
+
+[data-theme="dark"] .prompt-input .send-button-text {
+  color: #2b83ff;
+}
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Noto Sans, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;

package/dist/lib/component/playground-result/index.css

@@ -32,3 +32,12 @@
   overflow: scroll;
 }
 
+[data-theme="dark"] .result-wrapper .loading-container .loading-progress-text {
+  color: rgba(255, 255, 255, .65);
+}
+
+[data-theme="dark"] .result-wrapper pre {
+  color: rgba(255, 255, 255, .85);
+  background: #141414;
+}
+

package/dist/lib/component/prompt-input/index.css

@@ -389,3 +389,46 @@
   color: #2b83ff;
 }
 
+[data-theme="dark"] .prompt-input .tip-button {
+  background-color: rgba(255, 255, 255, .08);
+}
+
+[data-theme="dark"] .prompt-input .tip-button.active {
+  color: #fff;
+  background-color: #2b83ff;
+}
+
+[data-theme="dark"] .prompt-input .prompt-textarea-wrapper {
+  background-color: rgba(255, 255, 255, .04);
+}
+
+[data-theme="dark"] .prompt-input .prompt-textarea-wrapper:hover, [data-theme="dark"] .prompt-input .prompt-textarea-wrapper.focused {
+  background-color: rgba(255, 255, 255, .08);
+}
+
+[data-theme="dark"] .prompt-input .btn-wrapper .btn-item {
+  color: #fff;
+  background-color: #2b83ff;
+}
+
+[data-theme="dark"] .prompt-input .btn-wrapper .btn-item:hover {
+  background-color: #2b83ff;
+}
+
+[data-theme="dark"] .prompt-input .dropdown-content {
+  background-color: #1f1f1f;
+  border-color: rgba(255, 255, 255, .12);
+}
+
+[data-theme="dark"] .prompt-input .param-label {
+  color: rgba(255, 255, 255, .85);
+}
+
+[data-theme="dark"] .prompt-input .error-message {
+  color: #ff4d4f;
+}
+
+[data-theme="dark"] .prompt-input .send-button-text {
+  color: #2b83ff;
+}
+

package/dist/lib/component/universal-playground/index.css

@@ -339,3 +339,72 @@
   text-decoration: underline;
 }
 
+[data-theme="dark"] .universal-playground .error-hint {
+  color: rgba(255, 255, 255, .45);
+}
+
+[data-theme="dark"] .universal-playground .status-indicator {
+  color: rgba(255, 255, 255, .85);
+}
+
+[data-theme="dark"] .universal-playground .status-indicator.error {
+  color: #ff4d4f;
+}
+
+[data-theme="dark"] .universal-playground .status-indicator.success {
+  color: #52c41a;
+}
+
+[data-theme="dark"] .universal-playground .operation-label {
+  color: rgba(255, 255, 255, .85);
+}
+
+[data-theme="dark"] .universal-playground .alert-message {
+  color: rgba(255, 255, 255, .85);
+  background-color: rgba(82, 38, 7, .3);
+}
+
+[data-theme="dark"] .universal-playground .operation-item .operation-icon-wrapper {
+  background-color: rgba(255, 255, 255, .08);
+}
+
+[data-theme="dark"] .universal-playground .operation-item .operation-content {
+  background-color: rgba(0, 0, 0, 0);
+}
+
+[data-theme="dark"] .universal-playground .operation-item .operation-content .operation-title {
+  color: rgba(255, 255, 255, .45);
+}
+
+[data-theme="dark"] .universal-playground .playground-footer {
+  background-color: rgba(255, 255, 255, .04);
+}
+
+[data-theme="dark"] .universal-playground .playground-footer .status-text {
+  color: rgba(255, 255, 255, .85);
+}
+
+[data-theme="dark"] .universal-playground .results-info {
+  color: rgba(255, 255, 255, .45);
+}
+
+[data-theme="dark"] .universal-playground .result-section .result-title {
+  color: rgba(255, 255, 255, .85);
+}
+
+[data-theme="dark"] .universal-playground .result-section .result-details {
+  color: rgba(255, 255, 255, .65);
+}
+
+[data-theme="dark"] .universal-playground .result-section .result-value {
+  color: rgba(255, 255, 255, .85);
+}
+
+[data-theme="dark"] .universal-playground .result-section .result-value.success {
+  color: #52c41a;
+}
+
+[data-theme="dark"] .universal-playground .result-section .result-value.error {
+  color: #ff4d4f;
+}
+

package/dist/lib/components/screenshot-viewer/index.css

@@ -168,3 +168,51 @@
   color: #999;
 }
 
+[data-theme="dark"] .screenshot-viewer.offline, [data-theme="dark"] .screenshot-viewer.loading, [data-theme="dark"] .screenshot-viewer.error {
+  color: rgba(255, 255, 255, .65);
+}
+
+[data-theme="dark"] .screenshot-viewer.offline .screenshot-placeholder h3, [data-theme="dark"] .screenshot-viewer.loading .screenshot-placeholder h3, [data-theme="dark"] .screenshot-viewer.error .screenshot-placeholder h3 {
+  color: #1890ff;
+}
+
+[data-theme="dark"] .screenshot-viewer.offline .screenshot-placeholder p, [data-theme="dark"] .screenshot-viewer.loading .screenshot-placeholder p, [data-theme="dark"] .screenshot-viewer.error .screenshot-placeholder p {
+  color: rgba(255, 255, 255, .65);
+}
+
+[data-theme="dark"] .screenshot-viewer.offline .screenshot-placeholder p.error-message, [data-theme="dark"] .screenshot-viewer.loading .screenshot-placeholder p.error-message, [data-theme="dark"] .screenshot-viewer.error .screenshot-placeholder p.error-message {
+  color: #ff4d4f;
+}
+
+[data-theme="dark"] .screenshot-viewer .screenshot-header .screenshot-title h3 {
+  color: rgba(255, 255, 255, .85);
+}
+
+[data-theme="dark"] .screenshot-viewer .screenshot-header .screenshot-title .screenshot-subtitle {
+  color: rgba(255, 255, 255, .45);
+}
+
+[data-theme="dark"] .screenshot-viewer .screenshot-container {
+  background: #141414;
+}
+
+[data-theme="dark"] .screenshot-viewer .screenshot-container .screenshot-overlay .device-name-overlay {
+  color: rgba(255, 255, 255, .85);
+}
+
+[data-theme="dark"] .screenshot-viewer .screenshot-container .screenshot-overlay .screenshot-controls .last-update-time {
+  color: rgba(255, 255, 255, .65);
+}
+
+[data-theme="dark"] .screenshot-viewer .screenshot-container .screenshot-overlay .screenshot-controls .ant-btn:hover {
+  background-color: rgba(255, 255, 255, .08);
+}
+
+[data-theme="dark"] .screenshot-viewer .screenshot-container .screenshot-overlay .screenshot-controls .ant-btn .anticon {
+  color: rgba(255, 255, 255, .65);
+}
+
+[data-theme="dark"] .screenshot-viewer .screenshot-container .screenshot-content .screenshot-placeholder {
+  color: rgba(255, 255, 255, .45);
+}
+

package/dist/lib/icons/global-perspective.js

@@ -36,7 +36,7 @@ const SvgGlobalPerspective = (props)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObj
         viewBox: "0 0 16 16",
         ...props,
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
-            fill: "#333",
+            fill: "currentColor",
             d: "M1.333 13v-2.5a.667.667 0 0 1 1.334 0V13c0 .184.149.333.333.333h2.5a.667.667 0 0 1 0 1.334H3c-.92 0-1.667-.746-1.667-1.667m12 0v-2.5a.667.667 0 0 1 1.334 0V13c0 .92-.746 1.667-1.667 1.667h-2.5a.667.667 0 0 1 0-1.334H13a.333.333 0 0 0 .333-.333m-12-7.5V3c0-.92.747-1.667 1.667-1.667h2.5a.667.667 0 0 1 0 1.334H3A.333.333 0 0 0 2.667 3v2.5a.667.667 0 0 1-1.334 0m12 0V3A.333.333 0 0 0 13 2.667h-2.5a.667.667 0 0 1 0-1.334H13c.92 0 1.667.747 1.667 1.667v2.5a.667.667 0 0 1-1.334 0M5.667 10.333h4.666V5.667H5.667zm6 .167c0 .644-.523 1.167-1.167 1.167h-5A1.167 1.167 0 0 1 4.333 10.5v-5c0-.644.523-1.167 1.167-1.167h5c.644 0 1.167.523 1.167 1.167z"
         })
     });

package/dist/lib/icons/history.js

@@ -37,7 +37,7 @@ const SvgHistory = (props)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(
         ...props,
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
-                stroke: "#000",
+                stroke: "currentColor",
                 strokeLinecap: "round",
                 strokeLinejoin: "round",
                 strokeOpacity: 0.85,
@@ -45,7 +45,7 @@ const SvgHistory = (props)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(
                 d: "M6.63 9.021c-2.862 6.126 2.197 10.501 6.063 10.501a7 7 0 1 0-6.063-10.5"
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
-                stroke: "#000",
+                stroke: "currentColor",
                 strokeLinecap: "round",
                 strokeLinejoin: "round",
                 strokeOpacity: 0.85,

package/dist/lib/icons/magnifying-glass.js

@@ -37,7 +37,7 @@ const SvgMagnifyingGlass = (props)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObjec
         ...props,
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("g", {
-                stroke: "#000",
+                stroke: "currentColor",
                 strokeLinejoin: "round",
                 strokeOpacity: 0.65,
                 strokeWidth: 1.5,