DarkBolt is a custom dark stylesheet for Re-Volt I/O. Currently it is only available for the home domain, but a complementary theme for the forum is also planned. I am also considering the option of having it toggle-able via a button, but I'm unsure yet whether it's possible to do so.
Installation
- Obtain the Stylus add-on, available for Chrome, Firefox, or Opera
- Go to the DarkBolt page on Userstyles.org and hit "Install Style"
Code: Select all
@-moz-document url-prefix("https://re-volt.io")
{
.bg-bright {
background-color: var(--dark-bg-color);
}
.bg-pattern-bright {
background-color: var(--dark-bg-color);
background-image: url("https://re-volt.io/user/themes/bolt/images/pattern-dark.png");
border: 1px solid #242424;
}
body {
background: url("https://re-volt.io/user/themes/bolt/images/background/frontend.png") fixed center no-repeat !important;
background-color: #000000 !important;
background-image: url("https://re-volt.io/user/themes/bolt/images/pattern-dark.png");
}
div.showcase {
background-color: var(--dark-bg-color);
}
code {
background: url("https://re-volt.io/user/themes/bolt/images/pattern-dark.png");
border: 1px solid #181818;
}
table {
border: 1px solid #202020;
}
table, td {
border: 1px solid #202020;
color: var(--font-color-bright);
}
tr:nth-child(odd) {
background-image: url("https://re-volt.io/user/themes/bolt/images/pattern-grey-dark.png");
background-color: #292929;
}
tr:nth-child(even) {
background-image: url("https://re-volt.io/user/themes/bolt/images/pattern-dark.png");
background-color: #292929;
}
blockquote {
background-color: var(--dark-bg-color);
background-image: url("https://re-volt.io/user/themes/bolt/images/pattern-dark.png");
}
.side {
background-color: var(--dark-bg-color);
border: 1px solid #242424;
}
.card {
color: var(--font-color-bright);
background-color: #343434;
box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.1), inset 0 0 30px #363636;
}
.card-style {
color: var(--font-color-bright);
background-color: #323232;
}
.tag {
background-color: rgba(32, 32, 32, 0.3);
}
.admin-link {
background-color: var(--dark-bg-color);
background-image: url("https://re-volt.io/user/themes/bolt/images/pattern-dark.png");
box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.06), inset 0 0 30px rgb(24, 24, 24);
}
@media (min-width: 800px) {
body {
background-color: var(--dark-bg-color);
}
}
h1, h2, h3, h4, h5, h6 {
color: var(--font-color-bright);
}
.content p {
color: var(--font-color-bright);
}
/* TOC plugin */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
color: var(--font-color-bright) !important;
}
.admin-link {
color: var(--font-color-bright);
}
li {
color: var(--font-color-bright);
}
span.toctitle {
color: var(--font-color-bright);
}
hr {
margin: 1.5em;
border: 2px solid #242424;
}
.events {
border: 1px solid #242424;
scrollbar-color: #363939 #282828;
}
.event-card {
background-color: var(--dark-bg-color);
color: var(--font-color-bright);
}
.event-today {
border: solid 2px #3e2440;
background-color:#45354a;
color: var(--font-color-bright);
}
.table-row-highlight {
border: solid 2px #976c1f;
background-color:#45354a !important;
color: var(--font-color-bright);
}
.card h3 a {
color: #f2992e !important;
}
/*Links*/
a {
color: #f2992e;
}
a:hover {
text-decoration: underline;
color: var(--link-darkbg-h);
}
.pagination li {
border: 2px outset #282828 !important;
background-color: var(--dark-bg-color) !important;
}
}
► Changelog