Dark style for moodle, but specifically for the configuration my school uses. Other ones aren't officially supported, but might work too if the domain names are modified idk.
At this point, even some teachers are using it :)
Darklearning by riedler
Mirrored from https://github.com/RiedleroD/userstyles-riedler/raw/master/Darklearning.user.css
Details
Authorriedler
LicenseCC BY-SA 4.0
Categoryelearning, moodle
Created
Updated
Size78 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
(preview image is outdated, will fix after I get added to some coures)
Version: 1.3.2
Changelog (since 1.3.1):
- restyled blockquotes
- styled alert-danger badges
- added subtle text shadow to badges, increasing legibility
- styled another horizontal dividing line
- restyled calendar
- fixed cards that are styled as round by moodle
- removed broken sidebar settings
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Darklearning
@namespace https://github.com/RiedleroD/userstyles-riedler
@version 1.3.2
@description Darker version of Elearning
@author Riedler
@license MPL-2.0
@homepageURL https://github.com/RiedleroD/userstyles-riedler
@preprocessor stylus
@var select LSI "Link Selection Indicator"{
"Clamps":"C",
"Braces":"B",
"Underbelly":"U",
"Flat":"F",
"Round":"R",
"Encased":"E"
}
@var select PBCS "ProgressBarCell Shape"{
"Pronounced":"pron",
"Teardrop":"tear",
"Round":"rnd",
"Rounded":"rndd",
"Soft Edges":"sft",
"Rectangle":"rect",
"Modifier debug":"debug_mod"
}
@var select PBCSm "ProgressBarCell Modifier"{
"Normal":"normal",
"Horizontal flip":"hflip",
"Vertical flip":"vflip",
"Flip right side":"rflip",
"Flip left side":"lflip",
"Flip top side":"tflip",
"Flip bottom side":"bflip",
"Rotate 90°":"r90",
"Rotate 180°":"r180",
"Rotate 270°":"r270"
}
@var select NBCS "Course Navbar Cell Shape"{
"Rectangle":"rect",
"Rounded":"rndd",
"Soft Edges":"sft",
"Round":"rnd",
"Teardrop":"tear",
"Pronounced":"pron",
"Modifier debug":"debug_mod"
}
@var select NBCSm "Course Navbar Cell Modifier"{
"Normal":"normal",
"Horizontal flip":"hflip",
"Vertical flip":"vflip",
"Flip right side":"rflip",
"Flip left side":"lflip",
"Flip top side":"tflip",
"Flip bottom side":"bflip",
"Rotate 90°":"r90",
"Rotate 180°":"r180",
"Rotate 270°":"r270"
}
@var select NBS "Course Navbar Shape"{
"Rectangle":"rect",
"Soft Edges":"sft",
"Rounded":"rndd",
"Round":"rnd",
"Teardrop":"tear",
"Pronounced":"pron",
"Modifier debug":"debug_mod"
}
@var select NBSm "Course Navbar Modifier"{
"Normal":"normal",
"Horizontal flip":"hflip",
"Vertical flip":"vflip",
"Flip right side":"rflip",
"Flip left side":"lflip",
"Flip top side":"tflip",
"Flip bottom side":"bflip",
"Rotate 90°":"r90",
"Rotate 180°":"r180",
"Rotate 270°":"r270"
}
@var checkbox anon "Anonymity (for screenshots)" 0
@var select EICC "Embedded Image Color Correction"{
"Recommended":"invert(0.86) hue-rotate(180deg)",
"Full":"invert(1) hue-rotate(180deg)",
"Dim":"brightness(0.8)",
"Debug":"invert(1) hue-rotate(180deg) saturate(100)",
"Off":"none"}
==/UserStyle== */
//color variables
bg0 = #000
bg1 = #151515
bg2 = #222
bg2_5= #252525
bg3 = #333
bg3_5= #383838
bg4 = #444
bg5 = #555
bg6 = #666
slc = #000
brd = #888
hbrd = #AAA
dtxt = #151515
txt = #AAA
htxt = #CCC
hhtxt= #FFF
mtxt = #899
lnk = #418BA4
hlnk = #6AC
btn = #418BA4
hbtn = #6AC
tru = #262
htru = #6C6
fals = #822
hfals= #F55
idk = #A50
hidk = #FA0
cal0 = #533
cal1 = #535
cal2 = #553
cal3 = #555
cal4 = #353
pb = #669
c0 = #66A
c1 = #3C3
c2 = #CC3
c3 = #C33
c4 = #C73
irad = 0.3rem //input border radius
crad = 0.5rem //card border radius
svg_select_arrs="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1'%3E%3Cpath fill='"+rgba(txt,0.999)+"' stroke='"+rgba(txt,0.999)+"' d='M8 1 2 6h12zM2 10H14L8 15z'/%3E%3C/svg%3E"
barshape_base(name){
if name=="pron"{
return (0.5em) (0.5em) (1em) (1em)
}else if name=="tear"{
return (0) (0.5em) (0.5em) (0.5em)
}else if name=="rnd"{
return (1em) (1em) (1em) (1em)
}else if name=="rndd"{
return (0.5em) (0.5em) (0.5em) (0.5em)
}else if name=="sft"{
return (0.25em) (0.25em) (0.25em) (0.25em)
}else if name=="rect"{
return (0) (0) (0) (0)
}else if name=="debug_mod"{
return (0) (0.5em) (1em) (0.25em)
}else{
return (100%) (100%) (100%) (100%)
}
}
barshape(name,mod){
shape=barshape_base(name)
if mod=="normal"{
return (shape[0]) (shape[1]) (shape[2]) (shape[3])
}else if mod=="hflip"{
return (shape[3]) (shape[2]) (shape[1]) (shape[0])
}else if mod=="vflip"{
return (shape[1]) (shape[0]) (shape[3]) (shape[2])
}else if mod=="rflip"{
return (shape[0]) (shape[2]) (shape[1]) (shape[3])
}else if mod=="lflip"{
return (shape[3]) (shape[1]) (shape[2]) (shape[0])
}else if mod=="tflip"{
return (shape[1]) (shape[0]) (shape[2]) (shape[3])
}else if mod=="bflip"{
return (shape[0]) (shape[1]) (shape[3]) (shape[2])
}else if mod=="r90"{
return (shape[3]) (shape[0]) (shape[1]) (shape[2])
}else if mod=="r180"{
return (shape[2]) (shape[3]) (shape[0]) (shape[1])
}else if mod=="r270"{
return (shape[1]) (shape[2]) (shape[3]) (shape[0])
}else{
return (100%) (0) (100%) (0)
}
}
lbarshape(name,mod){
shape=barshape(name,mod)
return (shape[0]) (0) (0) (shape[3])
}
rbarshape(name,mod){
shape=barshape(name,mod)
return (0) (shape[1]) (shape[2]) (0)
}
urlenc(x){
x=''+x//in case it's not a string, it is now.
x=replace('%','%25',x)
x=replace(' ','%20',x)
x=replace('"','%22',x)
x=replace('#','%23',x)
x=replace('\$','%24',x)
x=replace('&','%26',x)
x=replace('\/','%2F',x)
x=replace('<','%3C',x)
x=replace('>','%3E',x)
x=replace('=','%3F',x)
return x
}
@-moz-document regexp("https?:\\/\\/elearning\\.tgm\\.ac\\.at(?!\\/archiv).*"){
/*text selections*/
::-moz-selection{/*for firefox and derivatives*/
background:slc;
color:htxt;
}
::selection{/*for most other browsers that support this*/
background:slc;
color:htxt;
}
/*scrollbars*/
::-webkit-scrollbar,
#page.drawers::-webkit-scrollbar{//scrollbars in chrome and safari
&,
&-track-piece{
background-color:bg1 !important;
}
&-corner,
&-thumb{
background-color:bg3 !important;
border-radius:0.4em;
border:none;
}
}
:root,
#page.drawers{//actual standardized way, but ofc only Firefox implements it
scrollbar-width:auto;
scrollbar-color:bg3 bg1;
}
.visual-scroll-x,//so far only found in the quiz, but there's no telling if it's used in other places as well, so-
.visual-scroll-y,{
scrollbar-color:bg3 bg1 !important;
&::-webkit-scrollbar-thumb{
border:solid 1px bg0;
}
&::-webkit-scrollbar-track{
border:none;
}
}
/*animations*/
@keyframes bg-pulse-grey{
0%{background-color:brd}
50%{background-color:hbrd}
80%{background-color:hhbrd}
100%{background-color:brd}
}
/*body*/
:root,body,#page{
background-color:bg1 !important;
color-scheme:dark;
color:txt;
}
#page.drawers .main-inner{
border-radius:crad;
overflow:visible;
background-color:bg2;
}
#region-main{
background-color:#0000;//nothing to see here
}
/*navbar*/
.navbar{
background-color:bg2 !important;
border-radius:0 0 0.5em 0.5em;
}
.navbar.fixed-top{
border-bottom:solid 1px bg1;
& .navbar-brand .logo{
filter:invert(0.86) hue-rotate(180deg);
}
& .divider{
background-color:brd;
border-left-color:brd !important;
}
}
.primary-navigation .navigation .nav-link{
color:lnk;
}
.navbar-light .navbar-nav{
& .nav-link{
color:lnk;
&:hover,&:focus{
color:hlnk;
}
}
&:is(.show,.active) > .nav-link,
& .nav-link:is(.show,.active){
color:dtxt;
}
}
.moremenu .nav-link{
&:hover,&:focus{
background-color:bg3;
}
&.active{
background-color:btn;
color:dtxt;
border-bottom:none;
&:hover,&:focus{
background-color:hlnk;
}
}
}
.moremenu .nav-tabs{
background-color:#0000;
}
/*secondary navbar*/
.secondary-navigation .navigation{
border-top:none;
border-bottom:none;
height:auto;
background-color:bg3;
border-radius:barshape(NBS,NBSm);
overflow:clip;
padding:0.25em;
& .nav-tabs .nav-link{
border-radius:barshape(NBCS,NBCSm);
}
&.moremenu .nav-link{
height:100%;
padding:.33rem .75rem
&.active{
cursor:default;
pointer-events:none;
}
}
}
/*dropdown-menu*/
.dropdown{
&-menu{
background-color:bg3;
color:txt;
}
&-divider{
border-top-color:brd;
}
&-item{
&,
&:focus{
background-color:#0000;
color:lnk;
}
&:hover{
background-color:bg4;
color:hlnk;
}
}
&-header{
color:txt;
}
}
/*notification drawer*/
.popover-region{
&-container{
background-color:bg3;
border-color:brd;
border-radius:irad;}
&-toggle{
&::after{
border-bottom-color:bg3;
}
&::before{
border-bottom-color:brd;
}
}
&-header-container{
border-bottom-color:brd;
}
&-footer-container{
background-color:bg3;
border-top-color:brd;
border-radius:0 0 irad irad;
}
}
.content-item-container{
border-bottom-color:brd;
color:txt;
&:hover{
background-color:bg4;
color:htxt;}
&.unread{
background-color:bg4;}
&.unread:hover{
background-color:bg5;}
& .content-item-footer .timestamp{
color:txt;}
}
/*message drawer*/
.message-app{
background-color:bg2 !important;
& .input-group{
&>input,
&-text{
background-color:bg3 !important;
border-color:brd;
color:brd;
}
& .btn{
border-color:brd;
}
}
& .form-control:focus{
color:txt;}
& .card{
background-color:bg2;}
& .border-bottom{
border-color:brd !important;}
& .card.expanded .list-group .list-group-item{
background-color:bg3;}
&>.header-container>.bg-white{
background-color:bg3 !important;}
& .message{
&.send{
color:txt;
background-color:bg5 !important;
}
&.received{
color:txt;
background-color:bg4 !important;
& .tail{
border-bottom-color:bg4;
}
}
&.send .tail{
border-bottom-color:bg5;
}
&:is(.send,/.received) .time{
color:mtxt;
}
}
& .nav-pills{
border:solid brd 1px;
&>.nav-item>a{
&:not(.active){
background-color:bg3;}
&.active{
background-color:bg4;}
}
}
& .no-gutters{
outline:solid 1px bg3;}
& .content-message-container>div[data-region="self-conversation-message-container"]{
background-color:bg4 !important;}
&>div>div>div{
outli...