GW2 Forums — Dark Mode

styles.css

/* Source:
 * https://gist.github.com/MesmerMag/df0e13bfb09cd20ddff7fbc75930abab
 */

/* Remove the next line if you want to change the font. I think it's easier to read. */
/*
@import url('https://fonts.googleapis.com/css?family=Ubuntu:400,400i,700,700i&display=swap');
body * {
  font-family: 'Ubuntu', sans-serif;
}
/**/

:root {
  --theme-link: 210, 210, 210;
  --theme-link_hover: 255, 0, 0;
  --theme-text_dark: #fff;
  --theme-area_background: 40, 40, 40;
  --theme-area_background_reset: 40, 40, 40;
  --theme-area_background_light: 40, 40, 40;
  --theme-area_background_dark: 0, 0, 0;
  --theme-text_color: 190, 190, 190;
  --theme-active_input_border: 179, 46, 28;
  --theme-mentions: 70, 70, 70;
  --theme-section_title: 70, 70, 70;
  --theme-section_title_font: 255, 255, 255;
  --theme-selected: 90, 90, 90;
  --form-field--focusBorder: 40, 40, 40;
  --box--backgroundColor: rgba(255, 255, 255, 0.1);
  --badge--background: rgba(255, 255, 255, 0.2);
}

html, body {
  background: #1F1F1F;
  color: #ddd;
}

.gw-header-wrap,
.gw-header {
  background: transparent;
}
.gw-header-wrap::before {
  display: none;
}

/* Darker badge */
.ipsBadge_positive, .ipsBadge_style4 {
  --badge--background: rgba(255, 255, 255, 0.2);
  --badge--color: var(--theme-text_color);
}

/* Fix native forum issue in FF */
[data-site] ul.ipsDataItem_lastPoster {
  padding: 18px var(--sp-3);
}

/* Remove main background behind each thread */
.ipsBox, #ipsLayout_mainArea > .ipsForm[action$="do=edit"] > .ipsForm {
  background-color: transparent;
}

.ipsButtonBar {
  background: rgba(0, 0, 0, 0.2);
}

.ipsButtonBar .ipsButtonRow li > a,
.ipsButtonBar .ipsButtonRow li > button,
.ipsButtonBar .ipsButtonRow li > span {
  background: transparent;
}

.ipsButtonBar .ipsButtonRow li > a:hover,
.ipsButtonBar .ipsButtonRow li > button:hover {
  background: rgba(0, 0, 0, 0.2);
}

.cPost::before,
.cAuthorPane_mobile {
  background: rgba(0, 0, 0, 0.2);
}

.cAuthorPane_author {
  margin-bottom: 0;
}

[data-role="member-title"] {
  font-size: 0.8em;
}

.ipsQuote {
  margin-bottom: 10px;
}

.ipsToggle.ipsToggle_off {
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.footer-nav {
  background: transparent;
  color: inherit;
}

.footer-nav .sub-menu .menu-item {
  margin: 3px 0;
}

.footer-nav .lists .menu-item a {
  color: inherit;
  font-size: inherit;
  font-weight: bold;
}

.footer-nav .sub-menu .menu-item a {
  font-size: 12px;
  font-weight: normal;
  line-height: 1;
}

.footer-nav .widget-gw2-sidebar-link-fw {
  background: transparent;
}

.widget-gw2-sidebar-link-fw .widget-footer .bd a {
  color: inherit;
}

.ipsApp .cke_top {
  background: rgba(255, 255, 255, 1);
}

/* Fixes some hardcoded styles inside posts/quotes. */
.ipsType_richText [style*="background-color"],
.ipsType_richText [style*="color"] {
  background: transparent !important;
  color: inherit !important;
}

/* Mobile */
@media screen and (max-width: 640px) {
  .gw-header__top {
    font-size: 13px;
  }
}

/* / */

I wanted a dark theme since the forums are really bright in a dark room... Figured I might as well share it.

Preview:

https://imgur.com/a/U8YWlS7

Instructions:

1. Install a “User Styles Manager” extension in your browser of choice. I use Firefox and an extension called Stylus.
2. Copy the CSS code above.
3. Create a new user style for https://en-forum.guildwars2.com/ in your extension of choice and paste the CSS code. Stylus users can follow the instructions below.

Stylus extension instructions:

1. Open https://en-forum.guildwars2.com/
2. Click the “Stylus” icon in your browser toolbar.
3. Click “en-forum” in “Write style for: en-forum.guildwars2.com/this URL”
4. Paste the CSS code that you copied in step 2.
5. Save

Updated to compensate for forum update.

• Added link to Gist for easy reference.
• Fixed dark background not covering entire page.

Updated for new forum software.

Fixed random black text inside some posts.

Fixed more hard-coded styling inside posts.

A little darker & fix a couple forum issues

Fixed mentions in threads