Dark theme user style based on gruvbox

Discussions about the forum and contents
Post Reply
User avatar
Topic Author
Ricchan
Posts: 303
Joined: Tue Jan 26, 2016 11:26 pm
Location: Firestone D Floor

Dark theme user style based on gruvbox

Post by Ricchan »

During the day I find the default forum theme perfectly fine, but at night it is a bit too bright for me. I know there are browser/device dark modes that blindly apply invert-filters to a page, but those tend to look harsh/ugly imo. So, I made a dark theme based on gruvbox colors.

Image
[screenshot 2] [screenshot 3]

How to use:
This works on any browser that supports user styles. I use Chrome with the Stylus extension.

Copy the following code to a new style in Stylus (or the browser extension of your choice):

Code: Select all

:root {
  --gb-dark0_hard     :#1d2021;
  --gb-dark0          :#282828;
  --gb-dark0_soft     :#32302f;
  --gb-dark1          :#3c3836;
  --gb-dark2          :#504945;
  --gb-dark3          :#665c54;
  --gb-dark4          :#7c6f64;
  --gb-dark4_256      :#7c6f64;
  --gb-gray_245       :#928374;
  --gb-gray_244       :#928374;
  --gb-light0_hard    :#f9f5d7;
  --gb-light0         :#fbf1c7;
  --gb-light0_soft    :#f2e5bc;
  --gb-light1         :#ebdbb2;
  --gb-light2         :#d5c4a1;
  --gb-light3         :#bdae93;
  --gb-light4         :#a89984;
  --gb-light4_256     :#a89984;
  --gb-bright_red     :#fb4934;
  --gb-bright_green   :#b8bb26;
  --gb-bright_yellow  :#fabd2f;
  --gb-bright_blue    :#83a598;
  --gb-brighter_blue  :#A0B8C8;
  --gb-bright_purple  :#d3869b;
  --gb-bright_aqua    :#8ec07c;
  --gb-bright_orange  :#fe8019;
  --gb-neutral_red    :#cc241d;
  --gb-neutral_green  :#98971a;
  --gb-neutral_yellow :#d79921;
  --gb-neutral_blue   :#458588;
  --gb-neutral_purple :#b16286;
  --gb-neutral_aqua   :#689d6a;
  --gb-neutral_orange :#d65d0e;
  --gb-faded_red      :#9d0006;
  --gb-faded_green    :#79740e;
  --gb-faded_yellow   :#b57614;
  --gb-faded_blue     :#076678;
  --gb-faded_purple   :#8f3f71;
  --gb-faded_aqua     :#427b58;
  --gb-faded_orange   :#af3a03;
}

/*--------------------------------------------
  base.css
----------------------------------------------*/
html,
body {
  color: var(--gb-light3);
  background-color: var(--gb-dark0);
}
h1 {
  color: var(--gb-dark0_hard);
}
h2 {
  color: var(--gb-light1);
}
h3 {
  border-bottom-color: var(--gb-gray_245);
  color: var(--gb-bright_yellow);
}
hr {
  border-color: var(--gb-dark0_hard);
  border-top-color: var(--gb-gray_245);
}

/*--------------------------------------------
  links.css
----------------------------------------------*/
a {
  color: var(--gb-bright_blue);
}
a:hover,
a:focus,
a:active {
  /*
  color: var(--gb-brighter_blue);
  */
  color: var(--gb-bright_purple);
}
#site-description a:hover {
  color: var(--gb-dark0);
}
.forumbg .header a,
.forabg .header a,
th a {
  color: var(--gb-dark0);
}
.forumbg .header a:hover,
.forabg .header a:hover,
th a:hover {
  color: var(--gb-faded_blue);
}
.dropdown-extended a.mark_read {
  background-color: #FF0000;
}

/* Post body links */
.postlink {
  border-bottom-color: var(--gb-neutral_orange);
  color: var(--gb-neutral_orange);
}

.postlink:visited {
  border-bottom-color: var(--gb-faded_orange);
  color: var(--gb-faded_orange);
}

.postlink:hover {
  background-color: var(--gb-dark2);
  color: var(--gb-bright_orange);
}

/* Back to top of page */
.top i {
  color: var(--gb-gray_245);
}

/* Arrow links  */
.arrow-left:hover,
.arrow-right:hover {
  color: var(--gb-bright_purple);
}

/* Round cornered boxes and backgrouds
----------------------------------------------*/
#wrap {
  background-color: var(--gb-dark0_hard);
  border-color: var(--gb-dark0_hard);
}
.headerbar {
  color: var(--gb-dark0);
}
.headerbar,
.forumbg {
  background-color: var(--gb-light2);
  background-image: -webkit-linear-gradient(top, var(--gb-light3) 0%, var(--gb-dark4) 2px, var(--gb-light4) 92px, var(--gb-light3) 100%);
  background-image: linear-gradient(to bottom, var(--gb-light3) 0%, var(--gb-dark4) 2px, var(--gb-light4) 92px, var(--gb-light3) 100%);
  background-repeat: repeat-x;
}
.forabg {
  background-color: var(--gb-light2);
  background-image: -webkit-linear-gradient(top, var(--gb-light2) 0%, var(--gb-light4) 2px, var(--gb-dark4) 92px, var(--gb-dark4) 100%);
  background-image: linear-gradient(to bottom, var(--gb-light2) 0%, var(--gb-light4) 2px, var(--gb-dark4) 92px, var(--gb-dark4) 100%);
  background-repeat: repeat-x;
}
.navbar {
  background-color: var(--gb-dark1);
}
.panel {
  background-color: var(--gb-dark2);
  color: var(--gb-light1);
}
.post:target .content {
  color: var(--gb-light1);
}
.post h3 a.first-unread,
.post:target h3 a {
  color: var(--gb-light1);
}
.bg1 {
  background-color: var(--gb-dark0);
}
table.zebra-list tr:nth-child(odd) td,
ul.zebra-list li:nth-child(odd) {
  background-color: var(--gb-dark0);
}
.bg2 {
  background-color: var(--gb-dark0_soft);
}
table.zebra-list tr:nth-child(even) td,
ul.zebra-list li:nth-child(even) {
  background-color: var(--gb-dark0_soft);
}
.bg3 {
  background-color: var(--gb-dark2);
}
.ucprowbg {
  background-color: var(--gb-dark2);
}
.fieldsbg {
  background-color: var(--gb-dark1);
}
.site_logo {
  -webkit-filter: invert(.80);
  filter: invert(.80);
}

/* Horizontal lists
----------------------------------------*/
ul.navlinks {
  border-top-color: var(--gb-dark0_hard);
}

/* Table styles
----------------------------------------*/
table.table1 thead th {
  color: var(--gb-light0);
}
table.table1 tbody tr {
  border-color: var(--gb-gray_245);
}
table.table1 tbody tr:hover,
table.table1 tbody tr.hover {
  background-color: var(--gb-dark1);
  color: var(--gb-light0);
}
table.table1 td {
  color: var(--gb-light2);
}
table.table1 tbody td {
  border-top-color: var(--gb-light4);
}
table.table1 tbody th {
  border-bottom-color: var(--gb-dark4);
  color: var(--gb-light2);
  background-color: var(--gb-dark4);
}
table.info tbody th {
  color: var(--gb-light1);
}

/* Misc layout styles
---------------------------------------- */
dl.details dt {
  color: var(--gb-light1);
}
dl.details dd {
  color: var(--gb-bright_green);
}
.sep {
  color: var(--gb-bright_blue);
}

/* Icon styles
---------------------------------------- */
.icon.icon-blue,
a:hover .icon.icon-blue {
  /* color: #196db5; */
  color: var(--gb-neutral_blue);
}
.icon.icon-green,
a:hover .icon.icon-green {
  color: var(--gb-neutral_green);
}
.icon.icon-red,
a:hover .icon.icon-red {
  color: var(--gb-neutral_red);
}
.icon.icon-orange,
a:hover .icon.icon-orange {
  color: var(--gb-neutral_orange);
}
.icon.icon-bluegray,
a:hover .icon.icon-bluegray {
  color: var(--gb-faded_blue);
}
.icon.icon-gray,
a:hover .icon.icon-gray {
  color: var(--gb-gray_245);
}
.icon.icon-lightgray,
a:hover .icon.icon-lightgray {
  color: var(--gb-light4);
}
.icon.icon-black,
a:hover .icon.icon-black {
  color: var(--gb-dark4);
}
.alert_close .icon:before {
  background-color: var(--gb-dark2);
}

/* Jumpbox */
.jumpbox .dropdown li {
  border-top-color: var(--gb-dark4);
}
.jumpbox-cat-link {
  background-color: var(--gb-light4);
  border-top-color: var(--gb-light4);
  color: var(--gb-dark0_hard);
}
.jumpbox-cat-link:hover {
  background-color: var(--gb-light2);
  border-top-color: var(--gb-light2);
  color: var(--gb-dark0_hard);
}
.jumpbox-forum-link {
  background-color: var(--gb-dark1);
}
.jumpbox-forum-link:hover {
  background-color: var(--gb-dark2);
}
.jumpbox .dropdown .pointer-inner {
  border-color: var(--gb-dark2) transparent;
}
.jumpbox-sub-link {
  background-color: var(--gb-dark1);
}
.jumpbox-sub-link:hover {
  background-color: var(--gb-dark2);
}

/* Miscellaneous styles
---------------------------------------- */
.copyright {
  color: var(--gb-light4);
}
.error {
  color: var(--gb-natural_red);
}
.reported {
  background-color: #F7ECEF;
}
li.reported:hover {
  background-color: #ECD5D8 !important;
}
div.rules {
  background-color: #ECD5D8;
  color: #BC2A4D;
}
p.post-notice {
  background-color: #ECD5D8;
  background-image: none;
}

/*
--------------------------------------------------------------
Colours and backgrounds for content.css
-------------------------------------------------------------- */
ul.forums {
  background-color: #282828;
  background-image: -webkit-linear-gradient(top, var(--gb-dark0_hard) 0%, var(--gb-dark1) 100%);
  background-image: linear-gradient(to bottom, var(--gb-dark0_hard) 0%, var(--gb-dark1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d2021', endColorstr='#3c3836', GradientType=0);
}
ul.topiclist li {
  color: var(--gb-light2);
}
ul.topiclist dd {
  border-left-color: var(--gb-dark0_hard);
}
.rtl ul.topiclist dd {
  border-right-color: var(--gb-dark0_hard);
  border-left-color: transparent;
}
li.row {
  border-top-color: var(--gb-dark0_hard);
  border-bottom-color: var(--gb-dark0);
}
li.row strong {
  color: var(--gb-light0_hard);
}
li.row:hover {
  background-color: var(--gb-dark1);
  color: var(--gb-light1);
}
li.row:hover dd {
  border-left-color: var(--gb-dark0);
}
.rtl li.row:hover dd {
  border-right-color: var(--gb-dark0);
  border-left-color: transparent;
}
li.header dt,
li.header dd {
  color: var(--gb-dark0_hard);
}

/* Post body styles
----------------------------------------*/
.postbody {
  color: var(--gb-light1);
}

/* Content container styles
----------------------------------------*/
.content {
  color: var(--gb-light1);
}
.content h2,
.panel h2 {
  color: var(--gb-light0);
  border-bottom-color: var(--gb-gray_245);
}

dl.faq dt {
  color: var(--gb-light1);
}

.posthilit {
  background-color: var(--gb-orange_faded);
  color: var(--gb-orange_bright);
}

/* Post signature */
.signature {
  border-top-color: var(--gb-gray_244);
}

/* Post noticies */
.notice {
  border-top-color: var(--gb-gray_244);
}

/* BB Code styles
----------------------------------------*/
/* Quote block */
blockquote {
  background-color: var(--gb-dark1);
  border-color: var(--gb-gray_244);
}
blockquote blockquote {
  /* Nested quotes */
  background-color: var(--gb-dark2);
}
blockquote blockquote blockquote {
  /* Nested quotes */
  background-color: var(--gb-dark1);
}
/* Code block */
.codebox {
  background-color: var(--gb-dark0);
  border-color: var(--gb-gray_244);
}
.codebox p {
  border-color: var(--gb-gray_245);
}
.codebox code {
  color: var(--gb-bright_aqua);
}

/* Attachments
----------------------------------------*/
.attachbox {
  background-color: var(--gb-dark0);
  border-color: var(--gb-gray_245);
}
.pm-message .attachbox {
  background-color: var(--gb-dark1);
}
.attachbox dd {
  border-top-color: var(--gb-gray_245);
}
.attachbox p {
  color: var(--gb-light2);
}
.attachbox p.stats {
  color: var(--gb-light2);
}
.attach-image img {
  border-color: var(--gb-light4);
}

/* Inline image thumbnails */
dl.file dd {
  color: var(--gb-light2);
}
dl.thumbnail img {
  border-color: var(--gb-light4);
  background-color: var(--gb-dark0);
}
dl.thumbnail dd {
  color: var(--gb-light2);
}
dl.thumbnail dt a:hover {
  background-color: var(--gb-dark1);
}
dl.thumbnail dt a:hover img {
  border-color: var(--gb-light3);
}

/* TODO: Post poll styles
----------------------------------------*/
/* Poster profile block
----------------------------------------*/
.postprofile {
  /*
  color: var(--gb-light4);
  */
  color: var(--gb-neutral_green);
  border-color: var(--gb-dark2);
}
.pm .postprofile {
  border-color: var(--gb-dark2);
}
.postprofile strong {
  /*
  color: var(--gb-light2);
  */
  color: var(--gb-bright_green);
}
.online {
  background-image: url("./en/icon_user_online.gif");
}
dd.profile-warnings {
  border-color: var(--gb-bright_red);
}
div.phpbb-showtopicauthor {
  color: var(--gb-bright_red);
}

/*--------------------------------------------------------------
  buttons.css
-------------------------------------------------------------- */
.button {
  border-color: var(--gb-dark2);
  background-color: var(--gb-dark1);
  /* Old browsers */
  background-image: -webkit-linear-gradient(top, var(--gb-dark1) 0%, var(--gb-dark0) 100%);
  background-image: linear-gradient(to bottom, var(--gb-dark1) 0%, var(--gb-dark0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3c3836', endColorstr='#282828', GradientType=0);
  box-shadow: 0 0 0 1px var(--gb-dark0) inset;
  -webkit-box-shadow: 0 0 0 1px var(--gb-dark0) inset;
}
a.button {
  color: var(--gb-bright_red);
}
.button:hover,
.button:focus {
  /*
  border-color: var(--gb-neutral_blue);
  */
  border-color: var(--gb-neutral_purple);
  background-color: var(--gb-dark0);
  background-image: -webkit-linear-gradient(top, var(--gb-dark0) 0%, var(--gb-dark1) 100%);
  background-image: linear-gradient(to bottom, var(--gb-dark0) 0%, var(--gb-dark1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#282828', endColorstr='#3c3836', GradientType=0);
  text-shadow: 1px 1px 0 var(--gb-dark0), -1px -1px 0 var(--gb-dark0), -1px -1px 0 rgba(188, 42, 77, 0.2);
}
a.button:hover {
  color: var(--gb-bright_red);
}
.button .icon,
.button-secondary {
  /*
  color: var(--gb-light4);
  */
  color: var(--gb-bright_blue);
}
.button-secondary:focus,
.button-secondary:hover,
.button:focus .icon,
.button:hover .icon {
  /*
  color: var(--gb-neutral_blue);
  */
  color: var(--gb-bright_purple);
}
.button-search:hover,
.button-search-end:hover {
  border-color: var(--gb-dark2);
}
.caret {
  border-color: var(--gb-dark4);
}
.caret {
  border-color: var(--gb-dark3);
}

.contact-icons a {
  border-color: var(--gb-dark3);
}
.contact-icons a:hover {
  background-color: var(--gb-dark4);
}

/* Pagination
---------------------------------------- */
.pagination li a {
  background: var(--gb-dark1);
  filter: none;
  border-color: var(--gb-dark4);
  box-shadow: none;
  -webkit-box-shadow: none;
  color: var(--gb-light3);
}
.pagination li.ellipsis span {
  background: transparent;
  color: var(--gb-light1);
}
.pagination li.active span {
  background: var(--gb-light3);
  border-color: var(--gb-light3);
  color: var(--gb-dark0);
}
.pagination li a:hover,
.pagination li a:hover .icon,
.pagination .dropdown-visible a.dropdown-trigger,
.nojs .pagination .dropdown-container:hover a.dropdown-trigger {
  /*
  background: var(--gb-bright_blue);
  border-color: var(--gb-brighter_blue);
  */
  background: var(--gb-neutral_purple);
  border-color: var(--gb-bright_purple);
  filter: none;
  color: var(--gb-light0);
  text-shadow: none;
}

/* Search box
--------------------------------------------- */
.search-box .inputbox,
.search-box .inputbox:hover,
.search-box .inputbox:focus {
  color: var(--gb-light0);
  border-color: var(--gb-dark2);
  background-color: var(--gb-dark0);
}
.search-header {
  box-shadow: 0 0 10px var(--gb-neutral_blue);
}
.search-results li:hover,
.search-results li.active {
  background-color: var(--gb-dark1);
}

/*
--------------------------------------------------------------
Colours and backgrounds for cp.css
-------------------------------------------------------------- */
/* Main CP box
----------------------------------------*/
.panel-container h3,
.panel-container hr,
.cp-menu hr {
  border-color: var(--gb-dark0);
}
.panel-container .panel li.row {
  border-bottom-color: var(--gb-dark0);
  border-top-color: var(--gb-dark4);
}
ul.cplist {
  border-top-color: var(--gb-dark2);
}
.panel-container .panel li.header dd,
.panel-container .panel li.header dt {
  color: var(--gb-light0);
}
.panel-container table.table1 thead th {
  color: var(--gb-light1);
  border-bottom-color: var(--gb-light4);
}
.cp-main .pm-message {
  border-color: var(--gb-light4);
  background-color: var(--gb-dark0);
}

/* CP tabbed menu
----------------------------------------*/
.tabs .tab > a {
  background: var(--gb-dark1);
  color: var(--gb-bright_blue);
}

.tabs .tab > a:hover {
  background: var(--gb-dark1);
  color: var(--gb-bright_purple);
}
.tabs .activetab > a,
.tabs .activetab > a:hover {
  background-color: var(--gb-dark1);
  background-image: -webkit-linear-gradient(top, var(--gb-dark3) 0%, var(--gb-dark2) 100%);
  background-image: linear-gradient(to bottom, var(--gb-dark3) 0%, var(--gb-dark2) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#504945', endColorstr='#3c3836', GradientType=0);
  border-color: var(--gb-dark2);
  box-shadow: 0 1px 1px var(--gb-dark3) inset;
  color: var(--gb-bright_blue);
}
.tabs .activetab > a:hover {
  color: var(--gb-bright_blue);
}

/* TODO: Mini tabbed menu used in MCP
----------------------------------------*/
/* TODO: Responsive tabs
----------------------------------------*/
/* UCP navigation menu
----------------------------------------*/
/* Link styles for the sub-section links */
.navigation a {
  color: var(--gb-bright_blue);
  background: var(--gb-dark1);
  background: -webkit-linear-gradient(left, var(--gb-dark1) 50%, var(--gb-dark0_soft) 100%);
  background: linear-gradient(to right, var(--gb-dark1) 50%, var(--gb-dark0_soft) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#32302f', endColorstr='#282828', GradientType=1);
}
.rtl .navigation a {
  color: var(--gb-bright_blue);
  background: var(--gb-dark1);
  background: -webkit-linear-gradient(left, var(--gb-dark0_soft) 50%, var(--gb-dark1) 100%);
  background: linear-gradient(to right, var(--gb-dark0_soft) 50%, var(--gb-dark1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#282828', endColorstr='#32302f', GradientType=1);
}
.navigation a:hover {
  background: var(--gb-dark1);
  color: var(--gb-bright_purple);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.navigation .active-subsection a {
  background: var(--gb-dark0_soft);
  color: var(--gb-bright_purple);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.navigation .active-subsection a:hover {
  color: var(--gb-bright_purple);
}

@media only screen and (max-width: 900px), only screen and (max-device-width: 900px) {
  #navigation a,
  .rtl #navigation a {
    background: var(--gb-dark0);
  }
}

/* Preferences pane layout
----------------------------------------*/
.panel-container h2 {
  color: var(--gb-light1);
}
.panel-container .panel {
  background-color: var(--gb-dark0_soft);
}
.cp-main .pm {
  background-color: var(--gb-dark0_soft);
}

/* Friends list */
.cp-mini {
  background-color: var(--gb-dark1);
}

dl.mini dt {
  color: var(--gb-light2);
}

/* PM Styles
----------------------------------------*/
/* PM Message history */
.current {
  color: var(--gb-light1) !important;
}

/* PM marking colours */
.pmlist li.pm_message_reported_colour,
.pm_message_reported_colour {
  border-left-color: var(--gb-neutral_red);
  border-right-color: var(--gb-neutral_red);
}
.pmlist li.pm_marked_colour,
.pm_marked_colour {
  border-color: var(--gb-neutral_orange);
}
.pmlist li.pm_replied_colour,
.pm_replied_colour {
  border-color: var(--gb-gray_245);
}
.pmlist li.pm_friend_colour,
.pm_friend_colour {
  border-color: var(--gb-neutral_blue);
}
.pmlist li.pm_foe_colour,
.pm_foe_colour {
  border-color: var(--gb-dark0);
}

/* TODO: Avatar gallery */
/*
--------------------------------------------------------------
Colours and backgrounds for forms.css
-------------------------------------------------------------- */
/* General form styles
----------------------------------------*/
select {
  border-color: var(--gb-gray_245);
  background-color: var(--gb-dark1);
  color: var(--gb-light1);
}
label {
  color: var(--gb-light2);
}
option.disabled-option {
  color: var(--gb-gray_245);
}

/* Definition list layout for forms
---------------------------------------- */
dd label {
  color: var(--gb-light2);
}
fieldset.fields1 {
  background-color: transparent;
}
/* Hover effects */
fieldset dl:hover dt label {
  color: var(--gb-light0_soft);
}
fieldset.fields2 dl:hover dt label {
  color: inherit;
}
/* Quick-login on index page */
fieldset.quick-login input.inputbox {
  background-color: var(--gb-dark1);
  color: var(--gb-light0);
}

/* Posting page styles
----------------------------------------*/
.message-box textarea {
  color: var(--gb-light0);
}
.message-box textarea.drag-n-drop {
  outline-color: rgba(102, 102, 102, 0.5);
}
.message-box textarea.drag-n-drop-highlight {
  outline-color: rgba(17, 163, 234, 0.5);
}

/* Input field styles
---------------------------------------- */
.inputbox {
  background-color: var(--gb-dark1);
  border-color: var(--gb-gray_245);
  color: var(--gb-light0);
}
.inputbox:-moz-placeholder {
  color: var(--gb-dark4);
}
.inputbox::-webkit-input-placeholder {
  color: var(--gb-dark4);
}
.inputbox:hover {
  border-color: var(--gb-bright_yellow);
}
.inputbox:focus {
  border-color: var(--gb-bright_yellow);
}
.inputbox:focus:-moz-placeholder {
  color: transparent;
}
.inputbox:focus::-webkit-input-placeholder {
  color: transparent;
}

/* Form button styles
---------------------------------------- */
a.button1,
input.button1,
input.button3,
a.button2,
input.button2 {
  color: var(--gb-light1);
  background-color: var(--gb-dark1);
  background-image: -webkit-linear-gradient(top, var(--gb-dark2) 0%, var(--gb-dark1) 100%);
  background-image: linear-gradient(to bottom, var(--gb-dark2) 0%, var(--gb-dark1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#504945', endColorstr='#3c3836', GradientType=0);
}
a.button1,
input.button1 {
  border-color: var(--gb-gray_245);
}
input.button3 {
  background-image: none;
}

/* Alternative button */
a.button2,
input.button2,
input.button3 {
  border-color: var(--gb-gray_245);
}

/* <a> button in the style of the form buttons */
a.button1,
a.button2 {
  color: var(--gb-light1);
}

/* Hover states */
a.button1:hover,
input.button1:hover,
a.button2:hover,
input.button2:hover,
input.button3:hover {
  border-color: var(--gb-neutral_yellow);
  color: var(--gb-bright_yellow);
  background-color: var(--gb-dark2);
  background-image: -webkit-linear-gradient(top, var(--gb-dark1) 0%, var(--gb-dark2) 100%);
  background-image: linear-gradient(to bottom, var(--gb-dark1) 0%, var(--gb-dark2) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3c3836', endColorstr='#504945', GradientType=0);
}

/* Focus states */
input.button1:focus,
input.button2:focus,
input.button3:focus {
  border-color: var(--gb-bright_blue);
  color: var(--gb-bright_blue);
}
input.disabled {
  border-color: var(--gb-gray_244);
}

/* jQuery popups
---------------------------------------- */
.phpbb_alert {
  background-color: var(--gb-dark1);
  border-color: var(--gb-gray_244);
}
.darken {
  background-color: #000000;
}
.loading_indicator {
  background-color: #000000;
}
.dropdown-extended ul li {
  border-top-color: var(--gb-gray_245);
}
.dropdown-extended ul li:hover {
  background-color: var(--gb-dark2);
  color: var(--gb-light0);
}
.dropdown-extended .header,
.dropdown-extended .footer {
  border-color: var(--gb-gray_245);
  color: var(--gb-light1);
}
.dropdown-extended .footer {
  border-top-style: solid;
  border-top-width: 1px;
}
.dropdown-extended .header {
  color: var(--gb-light1);
  text-shadow: 1px 1px 1px var(--gb-dark2);
  background-color: #F1F8FF;
  background-image: -webkit-linear-gradient(top, #F1F8FF 0%, #CADCEB 100%);
  background-image: linear-gradient(to bottom, var(--gb-dark4) 0%, var(--gb-dark3) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F1F8FF', endColorstr='#CADCEB', GradientType=0);
}
.dropdown .pointer {
  border-color: var(--gb-gray_244) transparent;
}
.dropdown .pointer-inner {
  border-color: var(--gb-dark0_soft) transparent;
}
.dropdown-extended .pointer-inner {
  border-color: var(--gb-dark0_soft) transparent;
}
.dropdown .dropdown-contents {
  background: var(--gb-dark0_soft);
  border-color: var(--gb-gray_244);
  box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.2);
}
.dropdown-up .dropdown-contents {
  box-shadow: 1px 0 5px rgba(0, 0, 0, 0.2);
}
.dropdown li,
.dropdown li li {
  border-color: var(--gb-gray_244);
}
.dropdown li.separator {
  border-color: var(--gb-gray_244);
}

/* Notifications
---------------------------------------- */
.notification_list p.notification-time {
  color: var(--gb-neutral_green);
  ;
}
li.notification-reported strong,
li.notification-disapproved strong {
  color: var(--gb-bright_red);
}
.badge {
  background-color: var(--gb-bright_red);
  color: var(--gb-light0);
}

/* Inverted topic/forum bullet images
----------------------------------------*/
.forum_link,
.forum_read,
.forum_read_subforum,
.forum_unread,
.forum_unread_subforum,
.global_read,
.global_read_mine,
.global_read_locked,
.global_read_locked_mine,
.global_unread,
.global_unread_mine,
.global_unread_locked,
.global_unread_locked_mine,
.announce_read,
.announce_read_mine,
.announce_read_locked,
.announce_read_locked_mine,
.announce_unread,
.announce_unread_mine,
.announce_unread_locked,
.announce_unread_locked_mine,
.sticky_read,
.sticky_read_mine,
.sticky_read_locked,
.sticky_read_locked_mine,
.sticky_unread,
.sticky_unread_mine,
.sticky_unread_locked,
.sticky_unread_locked_mine,
.topic_read,
.topic_read_mine,
.topic_read_locked,
.topic_read_locked_mine,
.topic_read_hot,
.topic_read_hot_mine,
.topic_unread,
.topic_unread_mine,
.topic_unread_locked,
.topic_unread_locked_mine,
.topic_unread_hot,
.topic_unread_hot_mine,
.pm_read,
.pm_unread {
  background-image: none;
}
.forum_link::before,
.forum_read::before,
.forum_read_subforum::before,
.forum_unread::before,
.forum_unread_subforum::before,
.global_read::before,
.global_read_mine::before,
.global_read_locked::before,
.global_read_locked_mine::before,
.global_unread::before,
.global_unread_mine::before,
.global_unread_locked::before,
.global_unread_locked_mine::before,
.announce_read::before,
.announce_read_mine::before,
.announce_read_locked::before,
.announce_read_locked_mine::before,
.announce_unread::before,
.announce_unread_mine::before,
.announce_unread_locked::before,
.announce_unread_locked_mine::before,
.sticky_read::before,
.sticky_read_mine::before,
.sticky_read_locked::before,
.sticky_read_locked_mine::before,
.sticky_unread::before,
.sticky_unread_mine::before,
.sticky_unread_locked::before,
.sticky_unread_locked_mine::before,
.topic_read::before,
.topic_read_mine::before,
.topic_read_locked::before,
.topic_read_locked_mine::before,
.topic_read_hot::before,
.topic_read_hot_mine::before,
.topic_unread::before,
.topic_unread_mine::before,
.topic_unread_locked::before,
.topic_unread_locked_mine::before,
.topic_unread_hot::before,
.topic_unread_hot_mine::before,
.pm_read::before,
.pm_unread::before {
  content: "";
  width: 50px;
  height: 100%;
  position: absolute;
  background-position: 10px 50%;
  background-repeat: no-repeat;
  background-size: 32px;
  -webkit-filter: invert(.75);
  filter: invert(.75);
}
.forum_link::before {
  background-image: url("./styles/prosilver/theme/images/forum_link.gif");
}
.forum_read::before {
  background-image: url("./styles/prosilver/theme/images/forum_read.gif");
}
.forum_read_subforum::before {
  background-image: url("./styles/prosilver/theme/images/forum_read_subforum.gif");
}
.forum_unread::before {
  background-image: url("./styles/prosilver/theme/images/forum_unread.gif");
}
.forum_unread_subforum::before {
  background-image: url("./styles/prosilver/theme/images/forum_unread_subforum.gif");
}
.global_read::before,
.announce_read::before {
  background-image: url("./styles/prosilver/theme/images/announce_read.gif");
}
.global_read_mine::before,
.announce_read_mine::before {
  background-image: url("./styles/prosilver/theme/images/announce_read_mine.gif");
}
.global_read_locked::before,
.announce_read_locked::before {
  background-image: url("./styles/prosilver/theme/images/announce_read_locked.gif");
}
.global_read_locked_mine::before,
.announce_read_locked_mine::before {
  background-image: url("./styles/prosilver/theme/images/announce_read_locked_mine.gif");
}
.global_unread::before,
.announce_unread::before {
  background-image: url("./styles/prosilver/theme/images/announce_unread.gif");
}
.global_unread_mine::before,
.announce_unread_mine::before {
  background-image: url("./styles/prosilver/theme/images/announce_unread_mine.gif");
}
.global_unread_locked::before,
.announce_unread_locked::before {
  background-image: url("./styles/prosilver/theme/images/announce_unread_locked.gif");
}
.global_unread_locked_mine::before,
.announce_unread_locked_mine::before {
  background-image: url("./styles/prosilver/theme/images/announce_unread_locked_mine.gif");
}
.sticky_read::before {
  background-image: url("./styles/prosilver/theme/images/sticky_read.gif");
}
.sticky_read_mine::before {
  background-image: url("./styles/prosilver/theme/images/sticky_read_mine.gif");
}
.sticky_read_locked::before {
  background-image: url("./styles/prosilver/theme/images/sticky_read_locked.gif");
}
.sticky_read_locked_mine::before {
  background-image: url("./styles/prosilver/theme/images/sticky_read_locked_mine.gif");
}
.sticky_unread::before {
  background-image: url("./styles/prosilver/theme/images/sticky_unread.gif");
}
.sticky_unread_mine::before {
  background-image: url("./styles/prosilver/theme/images/sticky_unread_mine.gif");
}
.sticky_unread_locked::before {
  background-image: url("./styles/prosilver/theme/images/sticky_unread_locked.gif");
}
.sticky_unread_locked_mine::before {
  background-image: url("./styles/prosilver/theme/images/sticky_unread_locked_mine.gif");
}
.topic_read::before,
.pm_read::before {
  background-image: url("./styles/prosilver/theme/images/topic_read.gif");
}
.topic_read_mine::before {
  background-image: url("./styles/prosilver/theme/images/topic_read_mine.gif");
}
.topic_read_locked::before {
  background-image: url("./styles/prosilver/theme/images/topic_read_locked.gif");
}
.topic_read_locked_mine::before {
  background-image: url("./styles/prosilver/theme/images/topic_read_locked_mine.gif");
}
.topic_read_hot::before {
  background-image: url("./styles/prosilver/theme/images/topic_read_hot.gif");
}
.topic_read_hot_mine::before {
  background-image: url("./styles/prosilver/theme/images/topic_read_hot_mine.gif");
}
.topic_unread::before,
.pm_unread::before {
  background-image: url("./styles/prosilver/theme/images/topic_unread.gif");
}
.topic_unread_mine::before {
  background-image: url("./styles/prosilver/theme/images/topic_unread_mine.gif");
}
.topic_unread_locked::before {
  background-image: url("./styles/prosilver/theme/images/topic_unread_locked.gif");
}
.topic_unread_locked_mine::before {
  background-image: url("./styles/prosilver/theme/images/topic_unread_locked_mine.gif");
}
.topic_unread_hot::before {
  background-image: url("./styles/prosilver/theme/images/topic_unread_hot.gif");
}
.topic_unread_hot_mine::before {
  background-image: url("./styles/prosilver/theme/images/topic_unread_hot_mine.gif");
}


/* Fix inline-styled usernames
----------------------------------------*/
.username-coloured[style="color: #AA0000;"] {
  color: var(--gb-neutral_red) !important;
}
.username-coloured[style="color: #FF8C00;"] {
  color: var(--gb-neutral_orange) !important;
}

/* Misc
----------------------------------------*/
.mini-panel {
  background-color: var(--gb-dark1);
}
.mini-panel h3 {
  color: var(--gb-light2);
}
.boardrules-menu {
  border-top-color: var(--gb-gray_245);
}
.boardrules-menu li {
  border-bottom-color: var(--gb-dark4);
}
.postbody .content::-webkit-scrollbar,
.topicreview::-webkit-scrollbar,
.post_details::-webkit-scrollbar,
.codebox code::-webkit-scrollbar,
.attachbox dd::-webkit-scrollbar,
.attach-image::-webkit-scrollbar,
.dropdown-extended ul::-webkit-scrollbar {
  background-color: var(--gb-dark3);
}
.postbody .content::-webkit-scrollbar-thumb,
.topicreview::-webkit-scrollbar-thumb,
.post_details::-webkit-scrollbar-thumb,
.codebox code::-webkit-scrollbar-thumb,
.attachbox dd::-webkit-scrollbar-thumb,
.attach-image::-webkit-scrollbar-thumb,
.dropdown-extended ul::-webkit-scrollbar-thumb {
  background-color: var(--gb-light3);
}
input[type="number"] {
  background-color: var(--gb-dark1);
}
You'll want to apply the style to all forum pages. Depending on which extension you use, the steps may be different. For Stylus, at the bottom of the page where you edit the style, choose "URLs matching the regexp" and enter:

Code: Select all

.*bogleheads\.org/forum/.*
That's pretty much it. Hope some people find this useful. šŸŒ’ šŸ˜Ž šŸ’¤

(Edit: Moved the CSS from github to this post.)
Post Reply