Skip to content

Google Classroom Dark by tech-how

Screenshot of Google Classroom Dark

Details

Authortech-how

LicenseNo License

Categorygoogle

Created

Updated

Size22 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

A dark Google Classroom theme for both students and teachers.

Notes

v1.2.3 (August 29th, 2024)

  • Fixed assignment description in classwork view

v1.2.2 (August 24th, 2024)

  • Updated style to prefer regex patterns where applicable
  • Removed apps button style as the class selector continuously changes
  • Updated style metadata
  • Updated section names

v1.2.1 (August 19th, 2024)

  • Fixed some styling issues when the user only had one Google account added

v1.2 (August 18th, 2024)

  • Fixed Apps button color
  • Updated style code to prefer variables
  • Fixed regressions in rubric view
  • Fixed assignment header color
  • Fixed element hover color in class stream
  • Styled some context menus
  • Fixed appearance of classes when dragging and dropping
  • Fixed editable text appearance
  • Fixed archived classes page
  • Fixed appearance of site help button
  • Fixed appearance of text boxes in new assignment view
  • Fixed appearance of teacher customize class page
  • Miscellaneous text cleanup
  • Thank y'all for nearly 6K downloads! I hope you're enjoying it :)

v1.1 (November 24th, 2023)

  • Fixed Apps button color
  • Styled class page notice (archived, special event, etc)
  • Styled move class dialog
  • Styled dividers on student rubric view
  • Styled dividers on upcoming assignments section
  • Added support for multiple choice questions (student view)
  • Minor fixes to some teacher elements, including support for multiple choice questions

v1.0 (August 24th, 2023)

  • Initial commit

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 Classroom Dark
@author         Tristian Dedinas (https://github.com/Tech-How)
@namespace      Tech-How
@version        1.2.3
@description    A modern dark theme for Google Classroom
@preprocessor   stylus
==/UserStyle== */

@-moz-document domain("classroom.google.com") {
/* Student Pages */

:root {
    --gc-bg: #1b1b1b;
    --gc-element: #262626;
    --gc-subelement: #3c3c3c;
    --gc-subelement-hover: #5e5e5e;
    --gc-popup: #1d1d1d;
    --gc-h1: #ddd;
    --gc-h2: #bbb;
    --gc-text: #fff;
}

/* Body */
body {
    background: var(--gc-bg);
}

    /* Help Button */
.N6nSod {
    background: transparent;
}

.N6nSod:hover {
    background: var(--gc-element);
}

/* Sidebar */
.ETRkCe {
    background: var(--gc-element);
}

.LlcfK {
    background: var(--gc-element) !important;
}

.VfPpkd-rymPhb-clz4Ic {
    background: var(--gc-subelement);
}

    /* 2023 Sidebar Refresh */
.Tabkde .OX4Vcb {
    background: var(--gc-element);
}

.Tabkde {
    border-right-color: var(--gc-subelement);
}

/* Navbar */
.A6dC2c-J3yWx {
    color: var(--gc-h2);
}

.joJglb, .kYtXye .bFjUmb-Ysl7Fe.kRqvHe, .S3aLQd.bFjUmb-Ysl7Fe, .aP3ZPb {
    background: var(--gc-element) !important;
    border-color: var(--gc-subelement) !important;
}

.rpo4wf-J3yWx {
    color: var(--gc-h1);
}

.gb_d[aria-expanded="true"] .gb_i, .gb_d[aria-expanded="true"] .gb_h {
    fill: var(--gc-h1);
}

    /* 2023 Navbar Refresh */
.mwJvDe .KEDCCd {
    background: var(--gc-element);
    border-bottom-color: var(--gc-subelement);
}

    /* Icons */
.sEZiv > span:nth-child(3) > svg:nth-child(1) > path:nth-child(1), .xSP5ic, .xSP5ic.yHy1rc, .NMm5M {
    fill: var(--gc-h1);
}

.gb_Pa svg, .gb_Wc svg, .gb_id .gb_qd, .gb_8c .gb_qd, .yHy1rc, .IqJTee, .xSP5ic, .xSP5ic.yHy1rc {
    color: var(--gc-h1);
}
    
    /* Classes Drag Drop on Homescreen */
    .TisIWb .kKn9Nc::before {
        background: var(--gc-element);
    }

/* Join Class */
.VfPpkd-NSFCdd-Brv4Fb, .VfPpkd-NSFCdd-Ra9xwd, .VfPpkd-NSFCdd-MpmGFe {
    border-color: var(--gc-subelement) !important;
}

.cfWmIb:not(.VfPpkd-fmcmS-yrriRe-OWXEXe-OWB6Me) .VfPpkd-NLUYnc-V67aGc, .WdYux {
    color: var(--gc-h2) !important;
}

/* To-Do */
.ReCbLb:not(.VfPpkd-O1htCb-OWXEXe-OWB6Me) .VfPpkd-t08AT-Bz112c {
    fill: rgb(95,99,104) !important;
}

.MHxtic:not(:last-child), .LKqFXc {
    border-color: var(--gc-subelement) !important;
}

/* Calendar */
.RIDjNe {
    border-right-color: var(--gc-subelement);
}

.Eajscb .nGZbac, .Eajscb .nGZbac.pCcXPe, .Eajscb .nGZbac.N4XV7d, .Eajscb .vT1Gyc.pCcXPe, .Eajscb .vT1Gyc.N4XV7d {
    color: var(--gc-h2);
}

/* Portfolio */
.uQ3ESd, .lXuxY, .pO6AMc, .PqkECe, .SFCE1b:focus, .SFCE1b:hover, .SFCE1b:focus-within, .SFCE1b:visited {
    background: var(--gc-element);
}

.P02DYb, .Iwp0Ue:not(:first-child), .VDj5V {
    border-top-color: var(--gc-subelement);
}

.lXuxY .u73Apc, .u73Apc:hover {
    border-color: var(--gc-subelement);
}

.ksaOtd {
    color: var(--gc-h1);
}

/* Settings */
.ipmZkd, .EfLcNb {
    color: var(--gc-h1);
}

.ViCi4 {
    color: var(--gc-h2);
}

.E5f6Vd {
    border-top-color: var(--gc-subelement);
}

    /* Change Profile Pic Loading Bar, Commented out because it interferes with other things */
/* #yDmH0d > div {
    background: var(--gc-element) !important;
} */

/* Class Chips */
.SZ0kZe, .gHz6xd, .a5kY4d, .d4Fe0d {
    background: var(--gc-element);
    border-color: var(--gc-subelement);
}

/* Class Details */
.zOtZye, .Aopndd, .OlXwxf.lXuxY .S9CVKb, .q1Kmyc {
    background: var(--gc-element);
    border-color: var(--gc-subelement);
}

.qhnNic.LBlAUc.Aopndd.TIunU.ZoT1D.idtp4e.DkDwHe:hover, .jWCzBe.QRiHXd.idtp4e.u73Apc:hover, .UISY8d-Ysl7Fe.KmLLod:hover .qhnNic.LBlAUc.Aopndd.TIunU.ZoT1D.idtp4e.DkDwHe:focus, .jWCzBe.QRiHXd.idtp4e.u73Apc:focus, .UISY8d-Ysl7Fe.KmLLod:focus, .qhnNic.LBlAUc.Aopndd.TIunU.ZoT1D.idtp4e.DkDwHe:focus-within, .jWCzBe.QRiHXd.idtp4e.u73Apc:focus-within, .UISY8d-Ysl7Fe.KmLLod:focus-within, .xWw7yd:focus-within.h7Ww0 {
    background: var(--gc-subelement) !important;
    border-color: var(--gc-subelement-hover) !important;
}

li.QRiHXd:hover, .JBMs6.VnOHwf-Tvm9db.B7SYid.uO32ac.boxOzd.ZoT1D:hover, .JBMs6.VnOHwf-Tvm9db.B7SYid.uO32ac.boxOzd.ZoT1D:focus-within, .xPAMbf.boxOzd.UISY8d-Ysl7Fe.UvQypf:hover, .xPAMbf.boxOzd.UISY8d-Ysl7Fe.UvQypf:focus-within {
    background: var(--gc-subelement) !important;
    border-color: var(--gc-subelement-hover) !important;
}

.IzVHde {
    background: var(--gc-element);
}

.s2g3Xd, .ZNE4y, .ar1wE .eqqrO, .ySjuvd .eqqrO, .O9YpHb {
    border-top-color: var(--gc-subelement);
}

.gQZxn {
    border-bottom: 0.0625rem solid var(--gc-subelement) !important;
}
    
.xWw7yd:hover.h7Ww0 {
    background: var(--gc-subelement) !important;
    border-color: var(--gc-subelement-hover) !important;
}

/* Upcoming Assignments */
.WMQb5e .oBSRLe {
    border-top-color: var(--gc-subelement)
}

/* Class Page Notice (Archived, Special Event, etc) */
.WufxEd .ynt9Dc, .WufxEd .ynt9Dc .VfPpkd-WLXbod {
    background: var(--gc-element);
}

.geqPvd, .geqPvd .VfPpkd-WLXbod {
    border-color: var(--gc-subelement);
}

.geqPvd .VfPpkd-Rj7Y9b {
    color: var(--gc-h1);
}

/* Announce Something to your Class */
.hgjBDc {
    background: var(--gc-element);
}

.vnnr5e .I9OJHe, .vnnr5e .CIy9F, .vnnr5e:not(.RDPZE):hover .I9OJHe, .vnnr5e:not(.RDPZE):hover .CIy9F {
    background: var(--gc-subelement);
}

.xVPuB .snByac, .vnnr5e .snByac, .xVPuB .Aworge, .vnnr5e .Aworge {
    color: var(--gc-h2);
}

.Erb9le:not(.RDPZE) .qmMNRc:hover, .Erb9le:not(.RDPZE) .qmMNRc.y7OZL, .S51BW .KRoqRc, .pPgY8b.xVPuB .KRoqRc, .pPgY8b.vnnr5e .KRoqRc {
    color: var(--gc-text);
}

.Erb9le:not(.RDPZE) .qmMNRc.y7OZL {
    background: var(--gc-element);
}

.svNSpd {
    border-color: var(--gc-subelement);
}

.qk0lee:focus {
    background: var(--gc-element);
}

.DPvwYc:hover, .xjKiLb:hover, .EN2Rfc:not(.RDPZE) .XTO5bf:hover, .EN2Rfc:not(.RDPZE) .XTO5bf.y7OZL {
    color: var(--gc-text);
}

.EN2Rfc:not(.RDPZE) .XTO5bf.y7OZL {
    background: var(--gc-subelement);
}

/* Assignment View */
.fOvfyc {
    color: var(--gc-h1);
}
    
.cSyPgb {
    color: var(--gc-h2);
}
    
.uO32ac, .ypv4re {
    border-color: var(--gc-subelement);
}

.Rj2Mlf:not(:disabled), .Rj2Mlf:not(:disabled):hover, .AeAAkf {
    border-color: var(--gc-subelement);
}

.q6oraf .VfPpkd-StrnGf-rymPhb, .GWZ7yf {
    background: var(--gc-element);
    border: 1px solid var(--gc-subelement);
}

.GWZ7yf {
    box-shadow: none;
}

.Niache {
    border-right-color: var(--gc-subelement);
}

.VfPpkd-StrnGf-rymPhb-clz4Ic, .gKkZCe {
    border-bottom-color: var(--gc-subelement);
}

.neggzd {
    display: none;
}

    /* Text Entry Generic */
.V8apv {
    background: var(--gc-element);
    color: var(--gc-h1);
}

    /* Popup Modal */
.I7OXgf {
    background: var(--gc-popup);
}

.qj5L0 {
    border-bottom-color: var(--gc-subelement);
}

        /* Popup Modal Text Entry */
.poFWNe {
    background: var(--gc-element);
    color: var(--gc-h1) !important;
}
    
    /* Question Prompt */
.VfPpkd-LgbsSe .VfPpkd-vQzf8d {
    color: var(--gc-h1);
}

.xSP5ic:not([disabled]), .xSP5ic:not([disabled]).yHy1rc {
    color: var(--gc-h2);
    fill: var(--gc-h2);
}

    /* Multiple Choice */
.xBIR3c .snByac {
    color: var(--gc-h1);
}
    
.AB7Lab {
    border-color: var(--gc-h1);
}

    /* Your Work */
.P2wHlc {
    border-color: var(--gc-subelement)
}

/* Classwork Tab */
.tUJKGd:not(:first-child) {
    border-top-color: var(--gc-subelement);
}

.xPAMbf {
    border-bottom-color: var(--gc-subelement);
}
    
.Iwp0Ue:not(.xp2dJ):not(.rZXyy):hover .h7Ww0, .xWw7yd:hover .h7Ww0, .xWw7yd :focus-within.h7Ww0 {
    background: var(--gc-subelement) !important;
    border-color: var(--gc-subelement-hover) !important;
}
    
.RcHwO {
    border-color: var(--gc-subelement);
}
    
.tfGBod.tfGBod:not(.xp2dJ), .tfGBod.xp2dJ .jWCzBe, .tfGBod.xp2dJ .iobNdf {
    border-color: var(--gc-subelement);
}
    
.Iwp0Ue:not(.xp2dJ):focus-within.JiTjnd, .Iwp0Ue:not(.xp2dJ):focus-within.h7Ww0, .Iwp0Ue:not(.xp2dJ) :focus-within.JiTjnd, .Iwp0Ue:not(.xp2dJ) :focus-within.h7Ww0, .xWw7yd:focus-within.JiTjnd, .xWw7yd:focus-within.h7Ww0, .xWw7yd :focus-within.JiTjnd, .xWw7yd :focus-within.h7Ww0 {
    background: var(--gc-bg);
}

    /* Assignment Description within View */
.bqKF7d, .vGGYOe, .ZnNi8e .u7S8tc {
    color: var(--gc-h1);
}

    /* Class Details Header Bar */
.A6dC2c, .saYe1e {
    color: var(--gc-h1);
}

.wZTANe .J1raN:hover {
    color: var(--gc-h1);
}

.hN1OOc:hover, .J1raN:hover, .hN1OOc:focus, .J1raN:focus {
    background: var(--gc-subelement) !important;
}

/* Move Class Dialog */
.kCtYwe {
    border-color: var(--gc-subelement);
}

/* Text */
.oBSRLe, .dDKhVc, .iLjzDc, .Evt7cb, .Evt7cb:visited, .Lzdwhd-BrZSOd, .EZrbnd, .T8rTjd, .OGhwGf, .OGhwGf:visited, .I2pI, .ZoO8hd {
    color: var(--gc-h2);
}

.cfWmIb .VfPpkd-NSFCdd-i5vt6e-OWXEXe-mWPk3d .VfPpkd-NLUYnc-V67aGc-OWXEXe-TATcMc-KLRBe, .ReCbLb:not(.VfPpkd-O1htCb-OWXEXe-OWB6Me) .VfPpkd-uusGie-fmcmS {
    color: var(--gc-h2) !important;
}

.apFsO, .ksBjEc:not(:disabled), .asQXV, .K6Ovqd, .n8F6Jd, .sdDCme, .tLDEHd, .Lzdwhd-AyKMt, .z3vRcc, .tDxNLe, .T2Ybvb, .VfPpkd-StrnGf-rymPhb-b9t22c, .Shk6y, .DyGAsf, .z3vRcc-J3yWx, .WOPwXe, .cfWmIb:not(.VfPpkd-fmcmS-yrriRe-OWXEXe-OWB6Me) .VfPpkd-fmcmS-wGMbrd {
    color: var(--gc-h1) !important;
}

.hN1OOc, .wZTANe .J1raN {
    color: var(--gc-h1);
}

/* Black Class Theme */
.UvHKof.VnOHwf-Tvm9db, .UvHKof .VnOHwf-Tvm9db, .UvHKof.CNpREd.VnOHwf-Tvm9db, .UvHKof.CNpREd .VnOHwf-Tvm9db, .UvHKof .FL3Khc:not(:disabled), .UvHKof .FL3Kh...

Reviews

No reviews yet.