☰

Google Translate Dark Theme

Forces a dark theme on Google Translate by inverting colors.

作者
kubik death
日安装量
0
总安装量
1
评分
0 0 0
版本
2.0
创建于
2025-10-20
更新于
2025-10-20
大小
905 字节
许可证
MIT
适用于

Google Translate Dark Theme Script - Details

Google Translate Dark Theme Script

This document provides a detailed explanation for the script that applies a comprehensive dark theme to the Google Translate website.

Why This Method Works Best


Modern websites like Google Translate are complex and their internal code changes frequently. Initial attempts to create a dark theme often involve manually changing the color of each element (buttons, text boxes, backgrounds) one by one. This approach is fragile because as soon as Google updates its website's code, the script can easily break.


The "Color Invert" method is much more robust. Instead of changing individual elements, it applies a graphical filter to the entire webpage. This single command inverts all the colors, turning white into black, light gray into dark gray, and so on. It's a powerful "catch-all" solution that is far less likely to break after a website update.

How The Code Works

The script is very concise but effective. Here’s a breakdown of the key parts:

  • filter: invert(1) hue-rotate(180deg);
    This is the core of the script. The invert(1) function flips all the colors on the page (black becomes white, blue becomes yellow, etc.). We add hue-rotate(180deg) to rotate the color wheel. This corrects many of the inverted colors, making blues and greens appear more natural in dark mode.

  • background-color: #fff;
    This might seem strange, but it's essential. We tell the browser that the base background is white. When the invert(1) filter is applied, this white background becomes black, forming the foundation of our dark theme.

  • img, video { filter: invert(1) hue-rotate(180deg); }
    This is a crucial fix. Without this rule, all images and videos on the page would also be color-inverted, looking like photo negatives. This rule applies the same filter again to images and videos. Inverting something twice brings it back to its original state, so pictures and videos look normal.


Note: A side effect of this method is that some colors may not be perfect. For example, a bright red might become a cyan shade. This is a small trade-off for a complete and stable dark mode that covers 100% of the website.

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址