Skip to content

Google Classroom Dark Theme by grahamsh-llk

Details

Authorgrahamsh-llk

LicenseNo License

Categoryclassroom

Created

Updated

Size14 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

A dark theme for Google Classroom

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 Classroom Dark Theme
@version      20230905.1.1
@namespace    userstyles.world/user/grahamsh-llk
@description  A dark theme for Google Classroom
@author       grahamsh-llk
@license      No License
@preprocessor stylus


@var checkbox coloredmissing        "Colored Missing Status"                                                1
@var checkbox coloredassigned       "Colored Assigned Status"                                               0

@var checkbox borders               "Borders on elements (Changes element background color when disabled)"  1

@var color    managedaccountbgcolor "Managed Account BG Color"                                              #292c32
@var color    managedaccountcolor   "Managed Account Text Color"                                            #bbbbbb

@var checkbox colorfix              "Fix invisible text with classrooms with black accent color"            1

==/UserStyle== */

/*
Colors:

#111
#171717
#1e1e1e
#252525
#2c2c2c

*/
@-moz-document domain("classroom.google.com") {
  /* Google Classroom */
  :root {
    /* Define Variables */
    if coloredmissing {
      /* Colored Status */
      --color-missing: #ea4040;
    }
    else {
      --color-missing: #dddddd;
    }
    if coloredassigned {
      /* Colored Status */
      --color-assigned: #3fc045;
    }
    else {
      --color-assigned: #dddddd;
    }
  }
  body {
    /* Background */
    background-color: #111111;
  }
  .joJglb {
    /* Top Nav Bar */
    background-color: #222222;
  }
  .OX4Vcb {
    /* Left Sidebar */
    background-color: #222222!important;
  }
  .YVvGBb {
    /* Classroom Name at Corner */
    color: #eeeeee;
  }
  .J1raN:hover {
    /* Not Selected Button at Top */
    color: #eeeeee !important;
  }
  .d4Fe0d {
    /* Upcoming Box */
    if borders {
      background-color: #111111;
      border-color: #222222;
    }
    else {
      background-color: #171717;
      border-color: #171717;
    }
  }
  .WMQb5e .oBSRLe {
    /* Upcoming border */
    border-top-color: #222222
  }
  .sxa9Pc {
    /* Upcoming text */
    color: #eeeeee;
  }
  .oBSRLe,
  .hnID5d {
    /* Due (day of a week) text */
    color: #cccccc;
  }
  .apFsO {
    /* Work in the Upcoming box text */
    color: white !important;
  }
  .TMOcX {
    /* Classroom box in left sidebar */
    border-radius: 0px 50px 50px 0px;
    margin-bottom: 5px;
  }
  .qs41qe {
    /* Current classroom box in left sidebar */
    background-color: #222 !important;
  }
  .Aopndd {
    /* Post/Setting Boxes */
    if borders {
      background-color: #111111;
      border-color: #222222;
    }
    else {
      background-color: #171717;
      border-color: #171717;
    }
  }
  .s2g3Xd, .PeGHgb.Q8U8uc .Ono85c+.QGMq0d, .PeGHgb.Q8U8uc .ruTJle+.XNP4U {
    /* Post Boxes */
    if borders {
      background-color: #111111;
      border-top-color: #222222;
    }
    else {
      background-color: #171717;
      border-top: none;
    }
  }
  .a5kY4d {
    /* Class Comment Box */
    if borders {
      background-color: #111111;
      border-color: #222222;
    }
    else {
      background-color: #1d1d1d;
      border-color: #1d1d1d;
    }
  }
  .DkDwHe:hover {
    /* Assignment Box Hovered */
    if borders {
      background-color: #171717 !important;
    }
    else {
      background-color: #1e1e1e !important;
    }
  }
  .n4xnA {
    /* Post Box Data */
    color: #eeeeee;
  }
  .VBEdtc-Wvd9Cc {
    /* Assignment Comment Text */
    color: #eeeeee;
  }
  .bswVrf {
    /* "Add Class Comment" text */
    color: #555555;
  }
  .SFCE1b {
    /* Assignment box in Classwork section */
    background-color: #111111;
  }
  .M4LFnf {
    /* Attached files box in stream */
    if borders {
      background-color: #111;
      border-color: #1e1e1e;
    }
    else {
      background-color: #1e1e1e;
      border-color: #1e1e1e;
    }
  }
  .r0VQac {
    /* Attached files box in assignment/material */
    if borders {
      background-color: #111111;
      border-color: #1e1e1e;
    }
    else {
      background-color: #171717;
      border-color: #171717;
    }
  }
  .bqKF7d {
    /* Assignment Text */
    color: #eeeeee;
  }
  .I7OXgf {
    /* Class Comments popup box */
    background-color: #111111;
  }
  .Shk6y {
    /* "Class Comments" in popup box */
    color: #eeeeee;
  }
  .gJItbc {
    /* User names in popup box */
    color: #eeeeee;
  }
  .NjE5zd {
    /* Comments in popup box */
    color: #ededed;
  }
  .TQYOZc,
  .SZ0kZe,
  .rZXyy {
    /* Classroom boxes */
    if borders {
      background-color: #111;
      border-color: #1e1e1e;
    }
    else {
      background-color: #171717;
      border-color: #171717;
    }
    color: #eeeeee;
  }
  .rZXyy:hover {
    /* Classroom boxes (hovered) */
    box-shadow: 0 1px 2px 0 rgb(23 23 23 / 50%),
      0 2px 6px 2px rgb(23 23 23 / 25%);
  }
  .vRMGwf {
    /* Classroom dropdown */
    color: #ededed;
  }
  .OA0qNb {
    /* Classroom dropdown background */
    background-color: #111111;
  }
  .XGSlvc {
    /* Submit/Unsubmit Popup Box */
    color: #eeeeee;
  }
  .sdDCme {
    /* Upcoming */
    color: #eeeeee;
  }
  .j70YMc {
    /* Assignment Description */
    color: #dddddd;
  }
  .QRiHXd,
  .NMm5M,
  .snByac,
  .tLDEHd {
    /* Class Comments */
    color: #cccccc;
  }
  .editable {
    /* Textboxes */
    color: #cccccc;
  }
  .WOPwXe {
    /* Due Date */
    color: #cccccc;
  }
  .VfPpkd-uusGie-fmcmS {
    /* Classes in To-Do */
    color: #cccccc !important;
  }
  .VfPpkd-StrnGf-rymPhb-b9t22c {
    /* Text in certain popups */
    color: #cccccc;
  }
  .VfPpkd-xl07Ob-XxIAqe {
    /* Class Dropdown Menu */
    background-color: #262626;
  }
  .VfPpkd-StrnGf-rymPhb-ibnC6b:hover {
    /* Class Dropdown Menu Item Hover */
    background-color: #363636
  }
  .JPdR6b {
    /* Post Dropdown Menu */
    background: #262626
  }
  .z80M1.FwR7Pc {
    /* Post Dropdown Menu Item Hover */
    background: #363636
  }
  .z80M1 {
    /* Post Dropdown Menu Text */
    color: #ccc
  }
  img[alt="Google"] {
    /* Google Image */
    box-sizing: border-box;
    padding-left: 74px;
    background: url(https://www.gstatic.com/images/branding/googlelogo/svg/googlelogo_light_clr_74x24px.svg)
      left top no-repeat;
  }
  .IqJTee {
    /* Classroom Text */
    color: #dddddd;
  }
  .K6Ovqd {
    /* "Announce something to your class" */
    color: #dddddd;
  }
  .jlVFDe span {
    /* "Not answered" or "Your answer" */
    color: #eeeeee;
  }
  .Yalane,
  .tL9Q4c {
    /* Open ended answer textbox */
    background-color: #222222 !important;
    color: #dddddd;
  }
  .rUtoef,
  .UmiGNb,
  .zQwDwf,
  .ZcoGnf {
    /* Question in Classmate Answers & Classmate names in Classmate Answers & Dates in Classmate Answers */
    color: #dddddd;
  }
  .jZrWoe {
    /* Classmate answers */
    color: #eeeeee;
  }
  .TAjiIf {
    /* Classmates in Classmate Answers */
    background-color: #252525 !important;
  }
  .qk0lee:focus {
    /* Announce something to your class */
    background-color: #222222;
    color: #eeeeee;
  }
  .e8E4Gb {
    /* Announce Box */
    if borders {
      background-color: #111;
    }
    else {
      background-color: #171717;
    }
  }
  .vTcY1d,
  .CIy9F {
    /* Announce Textbox */
    if borders {
      background-color: #171717 !important;
    }
    else {
      background-color: #1e1e1e !important;
    }
  }
  .vTcY1d:hover,
  .CIy9F:hover {
    /* Announce Textbox Hovered */
    if borders {
      background-color: #1e1e1e !important;
    }
    else {
      background-color: #252525 !important;
    }
  }
  .Dy8Cxc span {
    /* "Your Work" */
    color: #dddddd;
  }
  .Kma9Mb {
    /* Missing Status */
    color: var(--color-missing) !important;
  }
  .vzcr8 {
    /* Assigned Status */
    color: var(--color-assigned) !important;
  }
  .E7ZeX {
    /* Rubric */
    if borders {
      background-color: #111111;
      border-color: #171717;
    }
    else {
      background-color: #171717;
      border-color: #171717;
    }
  }
  .FMzRdf {
    /* Rubric */
    color: #cccccc;
  }
  .OK1tJe {
    /* Rubric Grades */
    if borders {
      background-color: #171717;
    }
    else {
      background-color: #1e1e1e;
      border-color: #1e1e1e;
    }
  }
  .R5iLrf.u3bW4e,
  .R5iLrf.yXgmRe:hover {
    /* Rubric Grades */
    if borders {
      background-color: #1e1e1e;
    }
    else {
      background-color: #252525;
      border-color: #252525;
    }
  }
  .jlfrG {
    /* Rubric Boxes */
    if borders {
      background-color: #111;
      border-color: #252525;
    }
    else {
      background-color: #1e1e1e;
      border-color: #1e1e1e;
    }
    color: #dddddd;
  }
  .jlfrG:before,
  .jlfrG:after {
    /* Remove Rubric Box Gradient */
    background: none !important;
  }
  .jrhqBd {
    /* Assignment with attachments */
    if borders {
      background-color: #111;
      border-color: #252525;
    }
    else {
      background-color: #171717;
      border-color: #171717;
    }
  }
  .xPAMbf {
    /* Assignment with attachments */
    if borders {
      border-bottom-color: #252525;
    }
    else {
      border-bottom-color: #171717;
    }
  }
  .xPAMbf:hover {
    /* Assignment in specific topic hover */
    if borders {
      background-color: #171717 !important;
    }
    else {
      background-color: #252525 !important;
    }
  }
  .QRiHXd.IMvYId.fXuRkd.UISY8d-Ysl7Fe {
    /* Topic Sidebar */
    background-color: #141414;
    border-radius: 5px;
    margin: 2px;
  }
  .QRiHXd.IMvYId.fXuRkd.UISY8d-Ysl7Fe:hover {
    /* Topic Sidebar Hover */
    background-color: #222;
  }
  .WagS8 {
    /* Event Banner (Ex: Teacher Appreciation Week) */
    background-color: #333;
    border-color: #444;
  }
  .WagS8 p {
    /* Event Banner Text */
    color: #eee;
  }
  .joJglb {
    /* Navigation Bar at Top */
    border-color: #444;
  }
  .asQXV {
    /* "Meet" in Sidebar/Classes in Class notifications setting */
    color: #ddd;
  }
  .wZTANe a:hover, .wZTANe a:focus {
    /* Na...

Reviews

No reviews yet.