Dark style for moodle, specifically the one my school uses. Other ones aren't officially supported, but might work too if the domain names are modified idk.
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
Size84 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.4.0
Changelog (since 1.3.2):
- restyled preference tables
- redid link and focus indicators
- vertically centered text feedback in quizzes
- restyled quiz attempt table
- fixed minor quiz trafficlights bugs
- corrected "active attempt" quiz attempt table color
- slightly adjusted quiz review table
- restyled submission summary table a bit
- match feedback table style to assignment status
- match quiz review summary table style to assignment table
- removed broken submit button style
- codeblocks now have the same color as normal text
- fixed blockquotes in courses having dark text on dark background
- fixed minor oversight in criterion tables
- added necode testserver to URLs
- improved styling on courses
- overhauled tabnavs
- styled new button in atto-editor
- styled left-facing tutorial arrow
- fixed checkmarks in generic checkboxes
- fixed white rows in some tables
- styled warning boxes
- styled debug info in footer
- minor file picker fixes
- other minor fixes and refactors
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.4.0
@description Darker version of Elearning
@author Riedler
@license MPL-2.0
@homepageURL https://github.com/RiedleroD/userstyles-riedler
@preprocessor stylus
@var select FI "Focus 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)
}
tbarshape(name,mod){
shape=barshape(name,mod)
return (shape[0]) (shape[1]) (0) (0)
}
bbarshape(name,mod){
shape=barshape(name,mod)
return (0) (0) (shape[2]) (shape[3])
}
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).*"), regexp("https?:\\/\\/moodle\\.necode\\.it(?!\\/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,
.dropdownmoremenu {
& .nav-link{
&:hover,&:focus{
background-color:bg3;
}
&.active{
background-color:btn;
color:dtxt;
border-bottom:none;
&:hover,&:focus{
background-color:hlnk;
}
}
}
& .nav-tabs{
background-color:#0000;
}
}
/*secondary navbar*/
.nav-tabs {
border: none;
background-color: bg3;
border-radius:barshape(NBS,NBSm);
padding:0.25em;
.nav-link {
border-radius: barshape(NBCS,NBCSm);
margin-right: 0.15em;
border: none;
height:100%;
padding:.33rem .75rem;
}
.nav-link:hover {
background-color: bg4;
}
.nav-link.active,
.nav-item.show .nav-link {
background-color: btn;
color: dtxt;
outline: none;
}
&.active:not(.active_tree_node) {
cursor:default;
pointer-events:none;
}
}
.secondary-navigation .navigation{
border-top:none;
border-bottom:none;
height:auto;
background-color:bg3;
border-radius:barshape(NBS,NBSm);
& .nav-tabs {
& .nav-link {
border-radius: barshape(NBCS,NBCSm);
}
& .nav-link:active,
& .nav-link.active,
& .nav-item.show .nav-link {
background-color: btn;
color: dtxt;
border-color: btn;
}
}
}
/*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-it...