Skip to content

Google Photos Dark Theme by darkthemenator

Write a review Install Get Stylus

Details

Authordarkthemenator

LicenseFree to use

Categoryphotos.google.com

Created

Updated

Size17 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Just a little Dark Theme for Google Photos

Notes

Userstyle doesn't have notes.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name         Google Photos Dark Theme
@version      20240901.12.51
@namespace    https://userstyles.world/user/darkthemenator
@description  Just a little Dark Theme for Google Photos
@author       darkthemenator
@license      Free to use
==/UserStyle== */

@-moz-document domain("photos.google.com") {
*{
    scrollbar-color: #222 #111;
    scrollbar-width: thin;
}
/* BG HTML */
.fXq1Rc .QtDoYb {
    align-items: center;
    background-color: #111;
    border-bottom: none;
    -ms-flex-align: center;
    box-sizing: border-box;
    display: flex;
    flex-flow: row nowrap;
    padding: 0 16px;
    width: 100%;
    box-shadow: none;
}

.HnzzId {
    background-color: #111;
    position: absolute;
}

/*SIDEBAR*/

.RSjvib { 
    align-content: space-between;
    background-color: #111;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    left: 0;
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute;
    top: 64px;
    transition: width .15s cubic-bezier(.4,0,.2,1);
    width: 256px;
    z-index: 100;
}

.HksvWb {
    color: #777;
    display: flex;
    padding-left: 12px;
    flex: 1;
    word-break: break-all;
    word-break: break-word;
    word-wrap: break-word;
    align-items: center;
    font-family: Google Sans Text, Google Sans, Roboto, Arial, sans-serif;
    line-height: 1.25rem;
    font-size: 0.875rem;
    letter-spacing: 0em;
    font-weight: 500;
    justify-content: space-between;
}


.HksvWb:hover {
    color: #999;
}

.HEHjMc {
    color: #777;
    display: block;
    margin-left: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: Google Sans Text, Google Sans, Roboto, Arial, sans-serif;
    line-height: 1.25rem;
    font-size: 0.875rem;
    letter-spacing: 0em;
    font-weight: 500;
    font-feature-settings: "liga" 0;
    font-variant-ligatures: no-contextual;
}

.QnmYd:hover .HEHjMc {
    color: #999;
}

.oUj9s .v1262d {
    flex-shrink: 0;
    color: #666;
}

.lJ21id {
    background-color: #333;
    height: 1px;
    margin: 19px 12px 20px 12px;
    transition: margin-left .15s cubic-bezier(.4,0,.2,1);
}

.Ud9NFb .DFG23b {
    background-color: #333;
}
.Ud9NFb .XCxRFf {
    background-color: rgb(11, 87, 208);
    border-radius: 2px;
    box-shadow: 3px 0 0 #242424;
    z-index: 1;
}
.z3RRjd:not(:disabled) {
    color: #666;
}
.z3RRjd:hover {
    color: #999;
}
.RSjvib .uprWmb, .RSjvib .uprWmb:hover {
    background: #222;
}

/*Cor active*/
.uprWmb .v1262d, .uprWmb .HksvWb {
    color: rgb(75, 131, 177);
    font-weight: 700;
}




/* BG Geral */
.uGCjIb {
    background: #171717;
    border-radius: 16px;
    position: absolute;
    outline: none;
    padding-top: 12px;
}

/* BG Foto */
.p137Zd {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    overflow: hidden;
    background: #111;
    transition: transform .135s cubic-bezier(0,0,.2,1);
}


/* Timeline direita */
.Pk50Ic {
    background: #222;
    border-radius: 50%;
    height: 4px;
    width: 4px;
}

.KALWyc, .HrGXnb {
    cursor: row-resize;
    background-color: rgba(0, 0, 0, .7);
    position: absolute;
    right: 0;
    color: #777
}


/* SIDEBAR INFO */
.O8EXO {
    color: #999;
}

.DwJIde .v1262d, .DwJIde .G6iPcb .v1262d {
    fill: #999;
}
.Q77Pt {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 360px;
    background: #171717;
    overflow-y: auto;
    transform: translate3d(360px, 0, 0);
}

.WUbige {
    color: #999;
}

.qURWqc .tL9Q4c {
    border-bottom: 1px solid #222;
}

.kmqzh .tL9Q4c {
    background-color: #171717;
    border: none;
    border-bottom: 1px solid transparent;
    bottom: 0;
    box-sizing: border-box;
    color: #666;
    display: block;
    font: inherit;
    font-feature-settings: "liga" 0;
    font-variant-ligatures: no-contextual;
    letter-spacing: inherit;
    margin: 0;
    outline: none;
    position: absolute;
    resize: none;
    top: 0;
    transition: .3s cubic-bezier(.4,0,.2,1) all;
    width: 100%;
    padding: 0 20px;
}

.wiOkb {
    color: #999;
    display: flex;
    padding: 14px 24px;
    font-family: Google Sans Text, Google Sans, Roboto, Arial, sans-serif;
    line-height: 1rem;
    font-size: 0.75rem;
    letter-spacing: 0.0083333333em;
    font-weight: 500;
}

.R9U8ab {
    color: #777;
    word-wrap: break-word;
    font-family: Google Sans Text, Google Sans, Roboto, Arial, sans-serif;
    line-height: 1.5rem;
    font-size: 1rem;
    letter-spacing: 0em;
    font-weight: 400;
    font-feature-settings: "liga" 0;
    font-variant-ligatures: no-contextual;
}

.AJM7gb {
    color: #999;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: Google Sans Text, Google Sans, Roboto, Arial, sans-serif;
    line-height: 1.5rem;
    font-size: 1rem;
    letter-spacing: 0em;
    font-weight: 400;
    font-feature-settings: "liga" 0;
    font-variant-ligatures: no-contextual;
}
.Kd04rd:hover .F6wuZ {
    display: block;
    fill: #999;
}
.cjiNme {
    fill: #999;
    position: absolute;
    left: 10px;
    top: 10px;
}

/* SEARCH */
.Aul2T {
    background: #191919;
    border-radius: 24px;
    display: flex;
    flex: 0 1 50vw;
    height: 48px;
    margin: 12px 0;
    position: relative;
    white-space: nowrap;
}

.ZSB8G {
    color: #999;
    margin: 12px 16px;
    vertical-align: top;
}
.LAL5ie .yNVtPc {
    -webkit-text-fill-color: #888;
    color: #888;
    font-family: Google Sans Text, Google Sans, Roboto, Arial, sans-serif;
    line-height: 1.5rem;
    font-size: 1rem;
    letter-spacing: 0em;
    font-weight: 400;
}

/* EXPLORE */
.eReC4e {
    background: #171717;
    display: flex;
    flex-direction: column;
    height: 56px;
    justify-content: center;
    left: 0;
    margin: 0 auto;
    max-width: none;
    padding: 0 16px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 199;
}
.eReC4e.FbgB9 {
    border-bottom: 1px solid #111;
}
.OgirMe {
    color: #999;
    overflow: hidden;
    flex-shrink: 0;
    font-family: Google Sans, Roboto, Arial, sans-serif;
    line-height: 1.75rem;
    font-size: 1.375rem;
    letter-spacing: 0em;
    font-weight: 400;
}

.dykGZb {
    align-items: center;
    color: #666;
    display: flex;
    justify-content: space-between;
    padding-bottom: 8px;
    font-family: Google Sans Text, Google Sans, Roboto, Arial, sans-serif;
    line-height: 1.5rem;
    font-size: 1rem;
    letter-spacing: 0em;
    font-weight: 500;
}

.KQR9vc {
    padding-bottom: 24px;
    border-bottom: 1px solid #333;
}

/* SHARE */
.DcsHOb {
    align-items: center;
    border-bottom: 1px solid #333;
    color: rgb(31, 31, 31);
    display: flex;
    justify-content: space-between;
    margin: 0 16px;
    padding: 12px 0;
}

.QYw5Ld {
    align-items: center;
    border: 1px solid #1e1e1e;
    border-radius: 16px;
    background-color: #191919;
    display: flex;
    margin: 24px 48px 24px 0;
    padding: 16px;
}

.d1DKne {
    align-items: center;
    background-color: #171717;
    border-radius: 11px;
    color: rgb(11, 87, 208);
    display: flex;
    height: 22px;
    justify-content: center;
    width: 22px;
}

.BeTwM {
    color: #666;
    flex: 1 1 auto;
    margin-right: 8px;
}

/* ALBUNS */
.gN5aAe {
    background: #171717;
    display: block;
    padding: 0 4px;
    position: relative;
}

.Udl2rb .yDSiEe .uGCjIb{
    scrollbar-color: #222 red !important;
    scrollbar-width: thin;
}

.mfQCMe {
    color: #999;
    padding-top: 8px;
    word-break: break-all;
    word-break: break-word;
    word-wrap: break-word;
    font-family: Google Sans Text, Google Sans, Roboto, Arial, sans-serif;
    line-height: 1.25rem;
    font-size: 0.875rem;
    letter-spacing: 0em;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    max-height: 40px;
    font-feature-settings: "liga" 0;
    font-variant-ligatures: no-contextual;
}

.UV4Xae {
    color: #666;
    padding-top: 2px;
    font-family: Google Sans Text, Google Sans, Roboto, Arial, sans-serif;
    line-height: 1rem;
    font-size: 0.75rem;
    letter-spacing: 0.0083333333em;
    font-weight: 400;
}

/* ALBUNS SINGLE */
.Cv8Rjc {
    transform: translateZ(0);
    background: #171717;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 300;
}

.QtDoYb {
    align-items: center;
    -ms-flex-align: center;
    display: flex;
    justify-content: space-between;
    -ms-flex-pack: justify;
    background: #171717;
    height: 64px;
    left: 0;
    padding: 0 12px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 200;
}

.KWdEHf.QtDoYb {
    background-color: #171717;
}

.Q3XAZe {
    color: #999;
}

.Yyy4Hc {
    color: #999;
    font-family: Google Sans, Roboto, Arial, sans-serif;
    line-height: 4rem;
    font-size: 3.5625rem;
    letter-spacing: 0em;
    font-weight: 400;
}

.YPqjbf {
    background-color: #fff !important;
}

/* ADD ALBUNS */
.xFGsVc .Aul2T:not(.RDPZE) {
    border-width: 0;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .3), 0 2px 6px 2px rgba(0, 0, 0, .15);
    background: #1c1c1c;
}
.Purf9b {
    background-color: #171717;
    bottom: 0;
    left: 0;
    overflow-x: hidden;
    padding: 0 76px;
    position: absolute;
    right: 0;
    top: 64px;
}

/* SHARE MODAL */
.V639qd .VfPpkd-P5QLlc {
    background-color: #111;
}
.t1IGPc {
    background: #111 !important;
}
.XhBoVe {
    background: #111;
}
.AZW99 {
    background: #111;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
}
.Co16uf {
    background: #111;
    display: flex;
    flex-direction: column;
}
.I4p4db {
    background: #111;
    color: var(--pkw-on-surface, black);
    flex: 1 1;
    border: none;
    outline: none;
    padding: 0;
}
.HNcB0e {
    border-bottom: 1px solid #333;
    margin-left: 12px;
    margin-right: 12px;
}
.IBP7ye {
    b...

Reviews

No reviews yet.