Goolge AI Studio弹窗底色变透明

suibianzai

如图，日夜模式都是这样的透明状态，和底下的新闻图重合在一起看不清文字了，但是edge上打开就是好的，请问是怎么回事
百分：

edge：

S8F8ry

因为网站的样式中使用了 123 版本内核起才支持 CSS 函数(Feature: CSS light-dark() Color Function)。目前要在百分中正常显示弹窗的背景色，只能是使用 Stylus 等样式插件为 aistudio.google.com 域名添加以下样式：

1. @media (prefers-color-scheme: light) {
   
2.   :root,
   
3.   :root body:not(.dark-theme),
   
4.   :root .light-theme {
   
5.     --color-primary: #076eff;
   
6.     --color-on-primary: #fff;
   
7.     --color-primary-container: #dae2ff;
   
8.     --color-on-primary-container: #001946;
   
9.     --color-secondary: #0062a1;
   
10.     --color-on-secondary: #fff;
    
11.     --color-secondary-container: #d0e4ff;
    
12.     --color-on-secondary-container: #001d35;
    
13.     --color-tertiary: #845400;
    
14.     --color-on-tertiary: #fff;
    
15.     --color-tertiary-container: #ffddb7;
    
16.     --color-on-tertiary-container: #2a1700;
    
17.     --color-tertiary-green: #deede1;
    
18.     --color-on-tertiary-green: #228634;
    
19.     --color-error: #ba1a1a;
    
20.     --color-on-error: #fff;
    
21.     --color-error-container: #ffdad6;
    
22.     --color-on-error-container: #410002;
    
23.     --color-surface: #f9f9fc;
    
24.     --color-on-surface: #1a1c1e;
    
25.     --color-on-surface-variant: #44474e;
    
26.     --color-surface-dim: #d9dadd;
    
27.     --color-surface-brighter: rgba(255,255,255,0.6);
    
28.     --color-surface-container: #edeef1;
    
29.     --color-surface-container-high: #e8e8eb;
    
30.     --color-surface-container-highest: #e2e2e5;
    
31.     --color-surface-container-low: #f3f3f6;
    
32.     --color-surface-container-lowest: #f9f9fc;
    
33.     --color-outline-variant: rgba(0,0,0,0.12);
    
34.     --color-inverse-surface: #2f3133;
    
35.     --color-inverse-on-surface: #f0f0f4;
    
36.     --color-surface_revamp: #f9f9fc;
    
37.     --color-surface-container_revamp: #fff;
    
38.     --color-surface-container-high_revamp: #edf2fa;
    
39.     --color-surface-container-highest_revamp: #e6ecff;
    
40.     --color-surface-container-low_revamp: #fff;
    
41.     --color-surface-container-lowest_revamp: #f9f9fc;
    
42.     --color-surface-dim_revamp: #d9dadd;
    
43.     --color-surface-bright_revamp: #fff;
    
44.     --color-run-settings-text_revamp: #1a1c1e;
    
45.   }
    
46. }
    
47. 
    
48. @media (prefers-color-scheme: dark) {
    
49.   :root,
    
50.   :root body:not(.light-theme),
    
51.   :root .dark-theme {
    
52.     --color-primary: #87a9ff;
    
53.     --color-on-primary: #002c70;
    
54.     --color-primary-container: #1a73e8;
    
55.     --color-on-primary-container: #dae2ff;
    
56.     --color-secondary: #9cccff;
    
57.     --color-on-secondary: #003257;
    
58.     --color-secondary-container: #00497b;
    
59.     --color-on-secondary-container: #d0e4ff;
    
60.     --color-tertiary: #ffb95c;
    
61.     --color-on-tertiary: #462a00;
    
62.     --color-tertiary-container: #653e00;
    
63.     --color-on-tertiary-container: #ffddb7;
    
64.     --color-tertiary-green: #1e3528;
    
65.     --color-on-tertiary-green: #3ddb85;
    
66.     --color-error: #ffb4ab;
    
67.     --color-on-error: #690005;
    
68.     --color-error-container: #93000a;
    
69.     --color-on-error-container: #ffdad6;
    
70.     --color-surface: #111416;
    
71.     --color-on-surface: #e2e2e5;
    
72.     --color-on-surface-variant: #a8abb4;
    
73.     --color-surface-dim: #111416;
    
74.     --color-surface-brighter: rgba(26,28,30,0.5);
    
75.     --color-surface-container: #1e2022;
    
76.     --color-surface-container-high: #282a2d;
    
77.     --color-surface-container-highest: #333537;
    
78.     --color-surface-container-low: #1a1c1e;
    
79.     --color-surface-container-lowest: #181818;
    
80.     --color-outline-variant: #393939;
    
81.     --color-inverse-surface: #e2e2e5;
    
82.     --color-inverse-on-surface: #2f3133;
    
83.     --color-surface_revamp: #000;
    
84.     --color-surface-container_revamp: #1e2022;
    
85.     --color-surface-container-high_revamp: #393939;
    
86.     --color-surface-container-highest_revamp: #333537;
    
87.     --color-surface-container-low_revamp: #1a1c1e;
    
88.     --color-surface-container-lowest_revamp: #13171f;
    
89.     --color-surface-dim_revamp: #000;
    
90.     --color-surface-bright_revamp: rgba(26,28,30,0.5);
    
91.     --color-run-settings-text_revamp: #c6c6c9;
    
92.   }
    
93. }

复制代码

coult3

S8F8ry 发表于 2025-5-26 12:33
因为网站的样式中使用了 123 版本内核起才支持 CSS 函数(Feature: CSS light-dark() Color Function)。目 ...

确实是 light-dark() 要123内核才支持。

另外发现去掉 mat-mdc-dialog-container 这个class也可以解决，但有一个问题。

直接在 https://aistudio.google.com/prompts/new_chat 控制台 使用


const dialogContainer = document.querySelector('mat-dialog-container');
dialogContainer.classList.remove('mat-mdc-dialog-container');


会报错，说找不到 mat-dialog-container 标签。

经过探究，发现html层级为：


<div class="cdk-overlay-container">

        <div class="cdk-global-overlay-wrapper" dir="ltr" style="justify-content: flex-start; align-items: flex-start;">

                <div id="cdk-overlay-42" class="cdk-overlay-pane model-info-dialog-panel gmat-mdc-dialog mat-mdc-dialog-panel" style="position: static; margin-left: 763px; margin-top: 140px; width: 432px;">

                        <mat-dialog-container tabindex="-1" class="mat-mdc-dialog-container mdc-dialog cdk-dialog-container mdc-dialog--open" style="--mat-dialog-transition-duration: 150ms;" id="mat-mdc-dialog-25" role="dialog" aria-modal="false">



然后在鼠标没有移动到 “run settings ”下方的 “ Gemini 2.0 Flash ” 时，body > div.cdk-overlay-container 也就是 <div class="cdk-overlay-container"> ，这个标签没有内嵌标签，也就没有上面的层级关系，没有 <mat-dialog-container> 标签。只有一个单独的一行 <div class="cdk-overlay-container"> 。

但是当 鼠标移动到 “run settings ”下方的 “ Gemini 2.0 Flash ” 时，出现半透明对话框，<div class="cdk-overlay-container"> 出现了内嵌标签，也出现了<mat-dialog-container> 标签，这时运行如上脚本就能成功运行，也发现对话框背景变成实体的不透明的了。

所以请问为什么鼠标移动到 “ Gemini 2.0 Flash ” 时，会增加 html 标签，是哪个js吗？

还有如何在正常情况下（即鼠标没有移动到 “ Gemini 2.0 Flash ” 时，没有出现半透明对话框）时，如何去掉 mat-mdc-dialog-container 这个类？

S8F8ry

coult3 发表于 2025-5-26 15:35
确实是 light-dark() 要123内核才支持。

另外发现去掉 mat-mdc-dialog-container 这个class也可以解决， ...

网页有为那个选择器元素绑定了 mouseenter 事件，以在鼠标移入时创建相关的弹窗元素，引入的脚本是在：





至于想要删除弹窗元素上的 mat-mdc-dialog-container 类名，最常见的做法是使用 MutationObserver 接口观察 .cdk-overlay-container 元素，然后在子节点变更时执行相应的删除类名操作。

或者你也可以直接借助 uBO 等去广告插件添加以下规则来实现删除类名的效果：

1. aistudio.google.com##.mat-mdc-dialog-container:remove-class(mat-mdc-dialog-container)

复制代码

coult3

S8F8ry 发表于 2025-5-26 20:09
网页有为那个选择器元素绑定了 mouseenter 事件，以在鼠标移入时创建相关的弹窗元素，引入的脚本是在：

...

厉害！谢谢超版🙏
用ublock扩展规则简单多了。

suibianzai

coult3 发表于 2025-5-26 22:11
厉害！谢谢超版🙏
用ublock扩展规则简单多了。

两位的讨论看得我一愣一愣的
能否讲得小白一点？需要安装什么插件？（我有安装uBlock）然后怎么操作啊？

coult3

suibianzai 发表于 2025-5-28 10:59
两位的讨论看得我一愣一愣的
能否讲得小白一点？需要安装什么插件？（我有安装uBlock）然后怎么操作啊？ ...

第一种方法：使用 uBlock ，右键选项，自定义静态规则 那 填入

1. aistudio.google.com##.mat-mdc-dialog-container:remove-class(mat-mdc-dialog-container)

复制代码

然后点 应用更改就可以，

第二种办法，用 stylus 扩展，给 https://aistudio.google.com/prompts/new_chat 添加一个自定义样式，直接把背景颜色写死就好了。

1. 
   
2. @media (prefers-color-scheme: light) {
   
3.    body:not(.dark-theme) .gmat-mdc-dialog .mat-mdc-dialog-container {
   
4.                 background-color: white;
   
5.         }
   
6. }
   
7. 
   
8. 
   
9. .dark-theme .gmat-mdc-dialog .mat-mdc-dialog-container {
   
10.     background-color: #202124;
    
11. }
    
12. 
    

复制代码

S8F8ry

suibianzai 发表于 2025-5-28 10:59
两位的讨论看得我一愣一愣的
能否讲得小白一点？需要安装什么插件？（我有安装uBlock）然后怎么操作啊？ ...

你可以安装 Stylus 之类的样式插件然后为 aistudio.google.com 域名添加 2 楼中的样式；或者若你只是想处理掉这个弹窗透明的现象，可以在 uBO 的自定义静态规则中添加楼上的那条规则。

suibianzai

coult3 发表于 2025-5-28 12:12
第一种方法：使用 uBlock ，右键选项，自定义静态规则 那 填入
然后点 应用更改就可以，

用uBlock成功了 界面终于顺眼了 感谢

suibianzai

S8F8ry 发表于 2025-5-28 12:13
你可以安装 Stylus 之类的样式插件然后为 aistudio.google.com 域名添加 2 楼中的样式；或者若你只是想处 ...

明白了 谢谢管理员