Dark Mode for linuxjourney.com
Dark Linux Journey by dark-daffodil
Details
Authordark-daffodil
LicenseCC0
Categorylinuxjourney
Created
Updated
Size1.6 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
My first shared CSS style as none existed for linuxjourney.
Color palette is not heavily designed.
Colors were selected to be easy on the eyes in a dark room.
Tried to keep the CSS as simple as possible, but I'm not a web designer.
Customization encouraged.
Source code
/* ==UserStyle==
@name Dark Linux Journey
@version 20220409.17.06
@namespace userstyles.world/user/dark-daffodil
@description Dark Mode for linuxjourney.com
@author dark-daffodil
@license CC0
==/UserStyle== */
@-moz-document domain("linuxjourney.com") {
:root {
--bg: #1c1c1c;
--embedded-frame: #000; /* code blocks, homepage thumbnails */
--outline: #64584c;
--text: #c4af9b; /* primary text*/
--green: #4a0; /* code */
--red: #a00; /* headers */
--red-bg: #420;
}
.lesson,
body {
background-color: var(--bg);
color: var(--text);
line-height: 1.8;
border: 0;
}
/* HOMEPAGE THUMBNAILS */
.fade {
background-color: var(--embedded-frame);
}
.fade:hover {
background-color: var(--bg);
}
.thumbnail-border {
box-shadow: 0 0 0 2px var(--outline);
}
.thumbnail .caption {
color: var(--text);
}
/* CODE BLOCKS & INPUT */
pre,
.exercise-content,
.quiz-content,
#mc_embed_signup input.email,
.input-sm {
background-color: var(--embedded-frame);
color: var(--green);
border-color: var(--text);
}
hr {
border-color: var(--embedded-frame)
}
/* HEADERS AND NAVIGATION BLOCKS*/
h3,
h5 {
color: var(--red);
}
.current,
li a.current {
background-color: var(--bg) !important;
color: var(--red) !important;
}
.navbar,
.jumbotron,
.footer,
.practice,
#sidebar-wrapper,
.sidebar-nav li a,
#sidebar_menu li a,
.sidebar-nav li a {
background-color: var(--red-bg);
color: var(--text);
}
#sidebar_menu li a {
color: var(--text);
}
}