DarkBolt: A night mode theme for RVIO

General discussion about the I/O universe.
User avatar
URV
Site Admin
Posts: 165
Joined: Mon Dec 04, 2017 9:36 pm
Discord: URV#9830
Location: /home/marv
Contact:

DarkBolt: A night mode theme for RVIO

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

Image

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 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
Post Reply