Dark theme for Google Classroom
Google Classroom Dark Theme V2 by deltandy
Details
Authordeltandy
LicenseMIT
Categoryclassroom.google.com
Created
Updated
Size8.1 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
I decided to create my own dark theme for Google Classroom because Dark Reader isn't perfect, and there is no good style that has the following:
- Currently works (no white areas)
- Has enough contrast to read
The old style's code had a lot of unneccesary stuff, was old, and broke with a UI update,
so I rewrote the entire theme from scratch. This version has more customizations.
To get the raw CSS (default configuration) or the Stylus code, go to this GitHub page: https://github.com/DeltAndy123/UserStyles-UserScripts/tree/main/classroom_dark_v2
Changelog
2.1.1.2 (2024-10-29):
- Fix background for tabs below navigation bar
- Fix unstyled border in assignment page
2.1.1.1 (2024-10-15):
- Fix assignment names
2.1.1.0 (2024-10-8):
- Fix unstyled border in sidebar
- Fix help button in bottom right corner
- Remove 10th anniversary logo fix (logo no longer exists)
- Fix contrast for future dates in Calendar
2.1.0.1 (2024-9-20):
- Fix unstyled border in Calendar
2.1.0.0 (2024-9-20):
- Fix some educator-specific elements
- Fix comment separator in new assignment box in stream
- Fix unstyled borders
- Start commenting code to be easier to modify
- Remove invisible accent color fix as it is no longer needed
- Added fix to prevent white background when hovering over 10th anniversary Classroom
logo (Experimental, has visual glitches)
Source code
/* ==UserStyle==
@name Google Classroom Dark Theme
@namespace github.com/DeltAndy123
@version 2.1.1.2
@description Dark theme for Google Classroom
@author DeltAndy
@preprocessor stylus
@var color bg-primary "Background Primary" #111111
@var color bg-secondary "Background Secondary" #111111
@var color bg-tertiary "Background Tertiary" #141414
@var color bg-hover "Background Hover" #1a1a1a
@var color border-primary "Border Primary" #1f1f1f
@var color border-2nd "Border Secondary" #3b3b3b
@var color navbar "Navigation Bar" #111111
@var color text-primary "Text Primary" #e8e5e3
@var color text-hover "Text Primary Hover" #999897
@var color text-secondary "Text Secondary" #b8b3ad
@var color text-tertiary "Text Tertiary" rgba(255,255,255,.549)
==/UserStyle== */
/*
Google Classroom Dark Theme
The old code had a lot of unneccesary stuff, was old, and broke with a UI update,
so I rewrote the entire theme from scratch. This version has more customizations.
Since there was no good dark theme for Google Classroom and the Dark Reader extension
didn't work perfectly, I decided to create my own dark theme for Google Classroom.
2.1.1.2 (2024-10-29):
- Fix background for tabs below navigation bar
- Fix unstyled border in assignment page
*/
@-moz-document domain("classroom.google.com") {
body {
background-color: bg-primary;
color: text-primary;
}
.VfPpkd-xl07Ob .VfPpkd-StrnGf-rymPhb-IhFlZd, .VfPpkd-xl07Ob .VfPpkd-StrnGf-rymPhb-f7MjDc {
color: text-primary;
}
.I7OXgf {
background-color: bg-primary;
}
.joJglb,
.mwJvDe .KEDCCd,
.Tabkde, .Tabkde .OX4Vcb,
.ETRkCe,
.lXuxY .u73Apc
{
background-color: navbar;
border-color: border-primary;
}
.WMQb5e .oBSRLe,
.s2g3Xd,
.q1Kmyc,
.SZ0kZe,
.gKkZCe,
.E5f6Vd,
.svNSpd,
.Rj2Mlf:not(:disabled),
.ar1wE .eqqrO, .ySjuvd .eqqrO,
.AeAAkf,
.DC55n td,
.a4YS1c,
.hYt5f.FRDm8d .WkZsyc:not(:last-child), .hYt5f.FRDm8d .Kql9ed:not(:last-child),
.geqPvd .VfPpkd-WLXbod, .geqPvd,
.tUJKGd:not(:first-child),
.d6CWTd, .ycbm1d,
.LDr2ne,
.O9YpHb, .Iwp0Ue:not(:first-child), // Assignments in Classwork
{
border-color: border-primary;
}
.xVPuB .mIZh1c, .vnnr5e .mIZh1c, .oQ5Hqe,
.VfPpkd-rymPhb-clz4Ic // Sidebar split between Home/Calendar and classes
{
background-color: border-2nd;
}
.MHxtic:not(:last-child), .LKqFXc,
.Rj2Mlf:not(:disabled):hover,
.uO32ac, .ypv4re, // Topic name bottom border
.nl5VRd // Separator between assignment name and description
{
border-color: border-2nd;
}
.dDKhVc, .WdYux, .tLDEHd, .ViCi4,
.Erb9le:not(.RDPZE) .qmMNRc:hover, .Erb9le:not(.RDPZE) .qmMNRc.y7OZL,
.ReCbLb:not(.VfPpkd-O1htCb-OWXEXe-OWB6Me) .VfPpkd-uusGie-fmcmS,
.FUvKMe, // wtf is this class name
.cSyPgb,
.lziZub, .lziZub:visited,
.s8kOBc .VfPpkd-rymPhb-fpDzbe-fmcmS,
.WmnPA:not(.VfPpkd-fmcmS-yrriRe-OWXEXe-OWB6Me) .VfPpkd-fmcmS-wGMbrd, // Textbox Label
.onkcGd, .onkcGd:visited, .WPhuJf, .WPhuJf:visited, .OGhwGf, .OGhwGf:visited, // "# class comments" under assignment in Stream
{
color: text-secondary;
}
.EZrbnd,
.asQXV,
.rpo4wf-J3yWx,
.wZTANe .J1raN,
.A6dC2c-J3yWx, .z3vRcc-J3yWx,
.z3vRcc, .tDxNLe
.WOPwXe,
.A6dC2c, .saYe1e,
.cfWmIb:not(.VfPpkd-fmcmS-yrriRe-OWXEXe-OWB6Me) .VfPpkd-fmcmS-wGMbrd,
.Evt7cb, .Evt7cb:visited,
.nk37z,
.geqPvd .VfPpkd-Rj7Y9b,
.q6oraf .VfPpkd-StrnGf-rymPhb,
.z80M1,
.s8kOBc .VfPpkd-rymPhb-ibnC6b-OWXEXe-gk6SMd .VfPpkd-rymPhb-fpDzbe-fmcmS, .s8kOBc .VfPpkd-rymPhb-ibnC6b-OWXEXe-pXU01b .VfPpkd-rymPhb-fpDzbe-fmcmS, .s8kOBc .VfPpkd-rymPhb-ibnC6b-OWXEXe-gk6SMd.VfPpkd-rymPhb-ibnC6b-OWXEXe-SfQLQb-M1Soyc-Bz112c .VfPpkd-rymPhb-KkROqb, .s8kOBc .VfPpkd-rymPhb-ibnC6b-OWXEXe-pXU01b.VfPpkd-rymPhb-ibnC6b-OWXEXe-SfQLQb-M1Soyc-Bz112c .VfPpkd-rymPhb-KkROqb,
.Vx8Sxd, .Vx8Sxd:visited, .Vx8Sxd:hover, .Vx8Sxd:focus,
.apFsO.onkcGd, .apFsO.onkcGd:visited, // Assignments under classes in Home
.Eajscb .vT1Gyc.N4XV7d, // Future dates in Calendar
.B7SYid // Assignment names
{
color: text-primary;
}
.wZTANe .J1raN:hover,
.LjDxcd:hover:not(:disabled), .LjDxcd.VfPpkd-ksKsZd-mWPk3d-OWXEXe-AHe6Kc-XpnDCe:not(:disabled), .LjDxcd:not(.VfPpkd-ksKsZd-mWPk3d):focus:not(:disabled), .LjDxcd:active:not(:disabled),
.WmnPA:hover:not(.VfPpkd-fmcmS-yrriRe-OWXEXe-OWB6Me) .VfPpkd-NLUYnc-V67aGc, // Textbox Label
.xlHPle .VfPpkd-fmcmS-yrriRe:hover:not(.VfPpkd-fmcmS-yrriRe-OWXEXe-OWB6Me) .VfPpkd-NLUYnc-V67aGc, // Textbox Label (Alt)
{
color: text-hover;
}
.K6Ovqd, .sdDCme, .oBSRLe, .IMvYId, .IMvYId:visited, .LjDxcd:not(:disabled) {
color: text-tertiary;
}
.hgjBDc, .DC55n td,
.IzVHde // Class code under banner
{
background-color: bg-secondary;
}
.d4Fe0d,
.Aopndd, // Box border
.ZNE4y, // Stream assignment box separator
.RIDjNe // Calendar box separator
{
background-color: bg-secondary;
border-color: border-primary;
}
.vnnr5e .I9OJHe, .vnnr5e .CIy9F, .fWf7qe .Yalane, .aSjeL.aSjeL td,
.xlHPle .VfPpkd-fmcmS-yrriRe:not(.VfPpkd-fmcmS-yrriRe-OWXEXe-OWB6Me), // Textboxes
.V8apv,
.WufxEd .ynt9Dc .VfPpkd-WLXbod, .WufxEd .ynt9Dc,
.VfPpkd-xl07Ob-XxIAqe,
.hVNH5c .K0NPx,
.s8kOBc .VfPpkd-rymPhb-ibnC6b.VfPpkd-rymPhb-ibnC6b-OWXEXe-gk6SMd,
.WmnPA:not(.VfPpkd-fmcmS-yrriRe-OWXEXe-OWB6Me),
.lbWVCe
{
background-color: bg-tertiary;
}
.vnnr5e:not(.RDPZE):hover .I9OJHe, .vnnr5e:not(.RDPZE):hover .CIy9F,
.fWf7qe:not(.RDPZE):hover .Yalane,
.TisIWb .kKn9Nc:before,
.z80M1.FwR7Pc,
.Mupove .tUJKGd:not(.xp2dJ):focus-within.boxOzd, .Mupove .tUJKGd:not(.xp2dJ):focus-within.idtp4e, .Mupove .tUJKGd:not(.xp2dJ) :focus-within.boxOzd, .Mupove .tUJKGd:not(.xp2dJ) :focus-within.idtp4e, .Mupove .ZoT1D:focus-within.boxOzd, .Mupove .ZoT1D:focus-within.idtp4e, .Mupove .ZoT1D :focus-within.boxOzd, .Mupove .ZoT1D :focus-within.idtp4e,
.hN1OOc.eumXzf:hover, .hN1OOc.eumXzf:focus // Tabs below navbar
{
background-color: bg-hover;
}
.WmnPA.VfPpkd-fmcmS-yrriRe-OWXEXe-XpnDCe:not(.VfPpkd-fmcmS-yrriRe-OWXEXe-OWB6Me) .VfPpkd-NLUYnc-V67aGc {
color: #1967d2;
}
.ZoT1D:hover.idtp4e,
.UISY8d-Ysl7Fe:hover,
.P3W0Dd-Ysl7Fe:focus, .maXJsd:focus .P3W0Dd-Ysl7Fe, .maXJsd:focus .P3W0Dd-Ysl7Fe,
.bFjUmb-Ysl7Fe, .bFjUmb-Ysl7Fe, .CNpREd.bFjUmb-Ysl7Fe, .CNpREd .bFjUmb-Ysl7Fe,
.qk0lee:focus:after,
.TJtJXb:hover td, .tYQn5c:hover td, .DC55n:hover td,
.Iwp0Ue:not(.xp2dJ):not(.rZXyy):hover.rXdid, .Iwp0Ue:not(.xp2dJ):not(.rZXyy):hover.h7Ww0, .Iwp0Ue:not(.xp2dJ):not(.rZXyy):hover .rXdid, .Iwp0Ue:not(.xp2dJ):not(.rZXyy):hover .h7Ww0, .xWw7yd:hover.rXdid, .xWw7yd:hover.h7Ww0, .xWw7yd:hover .rXdid, .xWw7yd:hover .h7Ww0
{
background-color: bg-hover !important;
}
.Iwp0Ue:not(.xp2dJ):not(.rZXyy) .h7Ww0 {
background-color: bg-primary !important;
}
.z80M1.qs41qe>.aBBjbd {
background-image: radial-gradient(circle farthest-side,#424242,#424242 80%,rgba(189,189,189,0) 100%)
}
// Educator-Specific Elements
.GQLaCd:not(:empty), // Introducing Generative AI box
.fyExH // Not using Classroom at a school with students checkbox
{
background-color: bg-tertiary;
}
// Hardcoded fixes
.u73Apc:not(.lXuxY .u73Apc) {
border-bottom: none;
}
.VfoFfe // Class code popout box
{
border-top: none;
}
.qj5L0 {
// Turn in work popup line
border-color: border-2nd;
}
.lbWVCe .h0pqq {
// Fix poll colors
background-color: #222
}
.N6nSod {
// Bottom right help button
background: none;
}
.N6nSod:hover {
// Bottom right help button
background-color: rgba(255, 255, 255, 0.075);
}
}