DarkBolt: A night mode theme for RVIO

Unread post by **URV** » Mon Feb 10, 2020 2:12 pm

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"

That's it! Alternatively, if you know how to install themes manually, you can get the code from the below.

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

Last updated on: February 18, 2020