Google Classroom Dark Theme V2 by deltandy

/* ==UserStyle==
@name           Google Classroom Dark Theme
@namespace      github.com/DeltAndy123
@version        2.2.0.0
@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      bg-2nd-hover   "BG Secondary Hover"      #161616
@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)
@var color      active-button  "Active Button"           #202020

==/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.2.0.0 (2024-11-18):
- Fix low contrast checkboxes
- Add "BG Secondary Hover" variable (currently only used for announcement textbox)
- Add "Active Button" variable (currently only used for text formatting buttons)
- Classwork section:
  - Fix background when clicking topic
  - Fix border under topic
- Stream section:
  - Fix textbox and formatting buttons in announcement creation
  - Fix unstyled classes dropdown when posting announcement
  - Fix "Announce to" popup
*/

@-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
  .VKRoqe
  {
    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
  .zuzKle.xVPuB, .zuzKle.vnnr5e, // Announcement composer textbox
  {
    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)
  .vnnr5e:not(.RDPZE):not(.u3bW4e):hover .I9OJHe.vTcY1d .snByac,
  .EN2Rfc:not(.RDPZE) .XTO5bf:hover, .EN2Rfc:not(.RDPZE) .XTO5bf.y7OZL, // Announcement composer formatting buttons
  {
    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, // Create announcement textbox
  .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,
  .cLpBac // Class dropdown for announcements
  {
    background-color: bg-tertiary;
  }
  
  .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
  .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, // Topics in Classwork section
  {
    background-color: bg-hover;
  }
  
  .vnnr5e:not(.RDPZE):not(.u3bW4e):hover .I9OJHe, .vnnr5e:not(.RDPZE):not(.u3bW4e):hover .CIy9F, // Announcement textbox
  {
    background-color: bg-2nd-hover;
  }
  
  .EN2Rfc:not(.RDPZE) .XTO5bf.y7OZL // Formatting buttons in announcement composer
  {
    background-color: active-button;
  }
  
  .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;
  }
  .QV10Af { // Bottom part of "Announce to" popup
    background-color: transparent;
    border-color: border-2nd;
  }
  .asQXV-FGzYL, // Classroom name in dropdown when creating posts
  {
    color: text-secondary;
  }
  
  
  // Hardcoded fixes
  .FAVvUd .nIu6nb {
      // SVG checkboxes
      filter: invert(1);
  }
  .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);
  }
}