Become a Patron Hey, we launched a Patreon. If you would like to support arcboosts.com, please consider becoming a Patron ❤️ 

Search...
⌘K

Google Classroom Dark Mode

Google Classroom Dark Mode

Google Classroom Dark Mode

An opinionated Arc Boost dark mode of Google Classroom

Updated 2 years ago
User Interface

Google Classroom Dark Mode

An opinionated dark mode of Google Classroom. The boost customizes the Google Classroom Platform with dark mode, custom fonts, and improved styles. And, did I mention dark mode? Protect yourself by picking the dark side!

Originally by JaideepGuntupalli

styles.css
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Universal Values */
body {
  background: black;
  color: white;
}

*{
  font-family: 'Source Code Pro', monospace !important;
}

.joJglb, .ETRkCe, .nhassd, .TajIHf{
  background: black!important;
  color: white!important;
}

.Aopndd{
  border: #d3d5db!important;
}

/* Home Page */

.gHz6xd{
  flex-direction: row!important;
  width: 100%!important;
  height: min-content!important;
  justify-content: space-between;
}

.Tc9hUd{
  position: static!important;
  width: 50% !important;
}

.PNzAWd{
  display: none;
}

div:has(> ol.JwPp0e){
  width:100%;
}

a {
  color: rgb(255, 125, 125) !important;
}

.ee1HBc .eumXzf:after{
  border-color: rgb(255, 125, 125) !important;
}

.kFwPee{
  display: flex;
  justify-content: center;
  margin-top: 5rem;
}

/* To Do */
.TQYOZc > div:has(> h2.oBSRLe){
  position: absolute;
  background: rgb(0,0,0, 0.5);
  backdrop-filter: blur(4px)!important;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
}



.SZ0kZe, .Aopndd, .TQYOZc{
  background: rgb(29, 29, 29)!important;
}

.lziZub, .lziZub:visited, .O98Lj,.tLDEHd, .asQXV, .wZTANe .J1raN, .WOPwXe, .A6dC2c, .YVvGBb, apFsO.onkcGd, .apFsO.onkcGd:visited, .oBSRLe, .pco8Kc{
  color: rgb(211, 211, 211)!important;
}

.ee1HBc.VnOHwf-Tvm9db, .ee1HBc .VnOHwf-Tvm9db, .ee1HBc.CNpREd.VnOHwf-Tvm9db, .ee1HBc.CNpREd .VnOHwf-Tvm9db{
  color: rgb(255, 125, 125) !important;
  fill: rgb(255, 125, 125) !important;
}

.UvHKof.VnOHwf-Tvm9db, .UvHKof .VnOHwf-Tvm9db, .UvHKof.CNpREd.VnOHwf-Tvm9db, .UvHKof.CNpREd .VnOHwf-Tvm9db{
  color: rgb(255, 125, 125) !important;
  fill: rgb(255, 125, 125) !important;
}

.UvHKof .n42Gr:not(:disabled) {
  color: rgb(255, 125, 125) !important;
}

.K6Ovqd, .EZrbnd, .T8rTjd, .UQuaGc, .onkcGd, .onkcGd:visited, .OGhwGf, .OGhwGf:visited{
  color: rgb(138, 138, 138)!important;
}

.lXuxY .u73Apc, .svNSpd, .s2g3Xd, .oleV8d, .PeGHgb.Q8U8uc .Ono85c+.oh9CFb, .PeGHgb.Q8U8uc .ruTJle+.fETHd{
  border-color: rgb(138, 138, 138)!important;
}

.e2urcc, .d4Fe0d{
  background: rgba(92, 92, 92, 0.5)!important;
  backdrop-filter: blur(4px)!important;
  border-radius: 0.75rem;
  border: none!important;
}
.joJglb{
  border-bottom: 0.0625rem solid #919191!important;
}

/* Course Pages */

.IMvYId:hover{
  background-color: black;
}

.u73Apc{
  background: rgba(92, 92, 92, 0.5)!important;
  backdrop-filter: blur(4px)!important;
  border-radius: 0.75rem;
  margin-bottom: 0.75rem;
}

.OlXwxf .UW3s6d{
  background: rgba(61, 61, 61, 0.5)!important;
  backdrop-filter: blur(4px)!important;
  border-radius: 0.75rem;
  border: none!important;
}

.O9YpHb{
  background: rgba(61, 61, 61, 0.5)!important;
  backdrop-filter: blur(4px)!important;
  border-radius: 0.75rem;
  border-top-left-radius: 0rem !important;
  border-top-right-radius: 0rem !important;
  border: none!important;
}

.UW3s6d{
  border-bottom-left-radius: 0rem !important;
  border-bottom-right-radius: 0rem !important;
}

.u73Apc:hover, .JBMs6:hover{
  background: rgba(121, 121, 121, 0.5)!important;
}

.tUJKGd:not(:first-child){
  border-top:none!important;
}

.qs41qe{
  background-color: rgb(59, 59, 59)!important;
}

.qs41qe > div.kXvNXe > div.nhassd{
  background-color: rgb(59, 59, 59)!important;
}

.qs41qe > div.kXvNXe > div.TajIHf{
  background-color: rgb(59, 59, 59)!important;
}

.UvHKof .uO32ac, .UvHKof .ypv4re, .ee1HBc .uO32ac, .ee1HBc .ypv4re,.MHxtic:not(:last-child){
  border-bottom: none !important;
}

/* Assignments */

.GWZ7yf{
  box-shadow: 0 1px 2px 0 rgba(255, 255, 255, 0.3), 0 2px 6px 2px rgb(60 64 67 / 15%);
  background: rgba(29, 29, 29)!important;
  backdrop-filter: blur(4px)!important;
  border-radius: 0.75rem;
  border: none!important;
}

.vnnr5e .CIy9F, .hgjBDc, .vnnr5e .I9OJHe{
  background: rgba(92, 92, 92, 0.5)!important;
}


.UvHKof .DqwBN:not(.RDPZE), .UvHKof .YhQJj:not(.RDPZE), .UvHKof .K2V86d:not(.RDPZE), .UvHKof .l3F1ye:not(.RDPZE), .UvHKof .An19kf:not(.RDPZE), .UvHKof .BEAGS:not(.RDPZE), .UvHKof .AeAAkf:not(.RDPZE){
  background: rgba(61, 61, 61, 0.5)!important;
  color: rgba(92, 92, 92)!important;;
}

.UvHKof .QkA63b:not(.RDPZE), .UvHKof .Y5sE8d:not(.RDPZE){
  background: rgba(148, 148, 148, 0.5)!important;
}

.Y5sE8d {
  background: rgb(255, 125, 125) !important;
  color: #fff !important;
}

.ee1HBc .wwnMtb:not(.RDPZE), .ee1HBc .OZ6W0d:not(.RDPZE) {
  color: rgb(255, 125, 125) !important;
  fill: rgb(255, 125, 125) !important;
}

.ee1HBc.bFjUmb-Wvd9Cc, .ee1HBc .bFjUmb-Wvd9Cc, .ee1HBc.CNpREd.bFjUmb-Wvd9Cc, .ee1HBc.CNpREd .bFjUmb-Wvd9Cc{
  background-color: rgb(255, 125, 125) !important;
}

.BEAGS {
  color: rgb(255, 125, 125) !important;
}

.CzuI5c .asQXV .QRiHXd{
  background: rgba(61, 61, 61, 0.5)!important;
}

.NPEfkd .RveJvd .snByac,.z3vRcc{
  color: rgba(207, 207, 207, 0.5)!important;
}