A dark theme for Google Classroom and Popups
[OLD] Google Classroom Dark Theme by deltandy
![Screenshot of [OLD] Google Classroom Dark Theme](https://userstyles.world/preview/1728/0.webp)
Details
Authordeltandy
LicenseNo License
Categoryuserstyles
Created
Updated
Size15 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
NOTE: This style is now outdated, use this updated version.
This is a dark theme for Google Classroom and Google Popups (Pages with ogs.google.com). All other dark themes for Google Classroom either are either outdated, don't work, or are incomplete, which is the reason why I created this. It adds dark mode for all of Google Classroom, Google apps popup in the top right corner, and other accounts popup in the top right corner.
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 20211118.21.09
@namespace userstyles.world/user/deltandy
@description A dark theme for Google Classroom
@author deltandy
@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;
}
.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 S...