Google Photos dark theme

A darker look

当前为 2024-02-02 提交的版本,查看 最新版本

您需要先安装一个扩展,例如 篡改猴Greasemonkey暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴Userscripts ,之后才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。

您需要先安装用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         Google Photos dark theme
// @namespace    http://tampermonkey.net/
// @version      0.8.5
// @description  A darker look
// @author       https://greasyfork.org/en/users/810921-guywmustang
// @match        https://photos.google.com/*
// @icon         https://www.google.com/s2/favicons?domain=google.com
// @grant        GM_addStyle
// @run-at       document-start
// @license      MIT
// ==/UserScript==

(function () {
    'use strict';

    function addInitialStyle() {
        GM_addStyle(`
            /* top bar */
            .QtDoYb {
            background-color: black;
            }

            /* background for main page & side bar */
            body, .wDSX5e, .RSjvib, .yDSiEe.uGCjIb.zcLWac.eejsDc.TWmIyd {
            background-color: #252525;
            }

            /* album page background */
            .B6Rt6d {
            background-color: #252525;
            }

            /* album page text color and background */
            textarea.ajQY2.v3oaBb {
            background-color: #252525;
            color: #dddddd;
            }

            /* Search bar coloring */
            /*.Aul2T, .Aul2T.qs41qe, .cI2tlc .tWfTvb .jBmls {
                background: #444444;
            }*/

            /* Settings page */
            .P0eWkf {
                color: #dddddd;
            }
        `);
    }

    function addStyle() {

        GM_addStyle(`
            :root {
                --darkgray: #252525;
                --white-text: #dddddd;
                --hover-color: #F1F3F4;
                --light-gray: #dfdfdf;
            }

            /* top bar */
            .QtDoYb {
            background-color: black;
            }

            /* Settings page */
            .P0eWkf, .rvEjke, .IGdgBf {
              color: var(--white-text);
            }

            /* background for main page & side bar */
            body, .wDSX5e, .RSjvib, .yDSiEe.uGCjIb.zcLWac.eejsDc.TWmIyd {
                background-color: var(--darkgray);
            }

            /* Search bar coloring */
            /*.Aul2T, .Aul2T.qs41qe, .cI2tlc .tWfTvb .jBmls {
                background: #444444;
                color: var(--white-text);
            }*/

            /* Main page font color */
            .xA0gfb, .G7ubtf, .RLo1Hf, .HksvWb, .xA0gfb {
            color: var(--white-text);
            }

            /* background color on search page */
            c-wiz.B6Rt6d.zcLWac.eejsDc.G9Yhnf, div.eReC4e.FbgB9 {
            background-color: var(--darkgray);
            }

            /* font color on search page */
            div.ZEmz6b, h2.ZEmz6b, .OgirMe, .hsohWb, div.hsohWb, .ApP0z, div.dykGZb, div.avzd9e, div.R1QzSc.ecU3Ec > div {
            color: var(--white-text);
            }

            /* album name hover colors */
            div.R1QzSc:hover > *, div.JBVD2d:hover > * {
              color: black;
              background-color: var(--hover-color);
            }

            /* View all link on search page */
            div.dykGZb span {
                color: var(--light-gray);
            }

            /* Text color on sharing page */
            div.I7yCae, div.DNAsC.A1fzDc.bSAKfb a {
                color: var(--light-gray);
            }

            a.DOAbib:hover {
                background-color: yellow;
            }

            /* Album page styles */
            div.gN5aAe {
                background-color: var(--darkgray);
            }

            div.mfQCMe, div.UV4Xae {
            color: var(--white-text);
            }

            /* album page background */
            .B6Rt6d {
            background-color: var(--darkgray);
            }

            /* album page text color and background */
            textarea.ajQY2.v3oaBb {
            background-color: var(--darkgray);
            color: var(--white-text);
            }

            /* sharing page for a contact */
            div.wqSOMc, div.ZLAKfe, div.RSjvib.eejsDc {
              background-color: var(--darkgray);
              color: var(--white-text);
            }

            /* photo sharing page title */
            .cL5NYb {
              color: var(--white-text);
            }

            /* sharing action buttons */
            .LjDxcd:hover:not(:disabled) {
              color: var(--light-gray);
            }

            .cb51zc .NXvGIf, div.jvwUve, div.QtDoYb.MJvped.K7sKBc {
              color: var(--white-text);
            }
        ` );
    }

    var oldHref = document.location.href;

    window.onload = function() {

        var
             bodyList = document.querySelector("body")

            ,observer = new MutationObserver(function(mutations) {

                mutations.forEach(function(mutation) {

                    if (oldHref != document.location.href) {

                        oldHref = document.location.href;

                        /* Changed ! your code here */
                        setTimeout(addStyle, 250);

                    }

                });

            });

        var config = {
            childList: true,
            subtree: true
        };

        observer.observe(bodyList, config);

    };

    // Attach initial background colors to get a dark mode at initial load
    addInitialStyle();

    // finally once the page is loaded, apply the full dark style
    window.onload = function() { addStyle(); }

})();