View Unreal Engine Forums How You Want To - Custom Theme Viewing! View It Your Way!

Community Community & Industry Discussion
,
1

Since Epic’s great web team really messed up the “light” forum theme and then got rid of it I was forced to find another option. Their dark theme isn’t for everyone and it was giving me migraines etc. I need a light theme to read but Epic let me down :frowning: so here is a solution that works quite well.

Get Stylebot, it is a google chrome extension. You can change the background and text what colors you want, so far it is working great, my eyes are saved! You can change pretty much everything if you spend enough time redesigning it all.

Download extension here:

I made a quick “Light Style” Stylebot style, just go in the settings of this plugin and create a new style and paste the below CSS in and you should be set. You can edit this as needed to your liking, it should be a good start. If you already have a style just edit it, delete the old code and paste this in and save.

I made a style for forums.unrealengine.com and for dev.epicgames.com - most people will only need the forum style.

Enjoy!

What it looks like

3
31899×889 341 KB

I’ll keep this updated as I update mine so there is always a better version as I find and fix things.

CSS Updated: 12/05/2025
CSS Updated: 09/26/2024
CSS Updated: 04/12/2022
CSS Updated: 04/10/2022
CSS Updated: 04/09/2022

(forums.unrealengine.com CSS)

#main-outlet-wrapper #main-outlet {
        background: #ffffff;
}

.desktop-view .d-header {
        background: #ffffff;
}


body.category .d-header-wrap.scrolled-header .d-header {
        display: none;
}

nav.post-controls.collapsed {
  background-color: #486fb1;
  color: #000000;
}

div.cooked {
  background-color: #ffffff;
  color: #000000;
  border-left-width: 0px;
  border-right-width: 5px;
  padding-right: 0px;
  margin-right: 5px;
}

div.topic-body.clearfix {
  background-color: #ffffff;
}

section.map.map-collapsed {
  color: #000000;
  background-color: #d9d9d9;
}

th.default.topic-list-data {
  background-color: #dbd7d7;
  color: #000000;
}

td.main-link.clearfix.topic-list-data {
  color: #000000;
}

a.title.raw-link.raw-topic-link {
  color: #000000;
  background-color: #efefef;
  font-size: 14px;
}

span.qa-badge-unsolved {
  background-color: #e5af76;
}

button.btn-primary.create.btn.btn-icon-text.ember-view {
  background-color: #4a86e8;
  color: #000000;
  text-decoration: none;
}

footer.unreal-footer {
  background-color: #000000;
}

div.ember-view {
  color: #000000;
  background-color: #f3f3f3;
}

nav.unreal-sidebar-nav {
  background-color: #efefef;
  color: #000000;
}

div.unreal-sidebar-logout {
  background-color: #efefef;
}

#unrealSearch {
  background-color: #ffffff;
  color: #000000;
}

th.views.num.topic-list-data {
  color: #000000;
  background-color: #a7a5a5;
}

th.activity.num.topic-list-data {
  color: #000000;
  background-color: #a7a5a5;
}

th.posts.num.topic-list-data {
  color: #000000;
  background-color: #a7a5a5;
}

td.num.posts-map.posts.heatmap-med.topic-list-data {
  color: #000000;
  background-color: #cccccc;
}

td.num.posts-map.posts.topic-list-data {
  color: #000000;
  background-color: #cccccc;
}

span.relative-date {
  color: #000000;
}

td.num.views.topic-list-data {
  color: #000000;
  background-color: #cccccc;
}

td.num.topic-list-data.age.coldmap-high.activity {
  color: #000000;
  background-color: #cccccc;
}

td.num.topic-list-data.age.activity {
  color: #000000;
  background-color: #cccccc;
}

footer section h4 {
  color: #4a86e8;
}

div.regular.contents {
  background-color: #ffffff;
  color: #000000;
}

div span a {
  color: #000000;
}

ul.unreal-footer-social-bar {
  background-color: #000000;
}

ul.unreal-footer-legal-links {
  background-color: #000000;
  color: #ffffff;
}

div.unreal-footer-legal {
  background-color: #000000;
  color: #ffffff;
}

ul li h4 {
  color: #000000;
}

div span h4 {
  color: #4a86e8;
}

div header h2 {
  color: #000000;
}

header.unreal-sidebar-profile {
  background-color: #ffffff;
}

div ul li {
  color: #4a86e8;
}

div.small-action-desc.timegap {
  color: #000000;
  background-color: #e5e0e0;
}

span.text {
  color: #000000;
}

h3.suggested-topics-message {
  background-color: #dbd7d7;
}

summary.select-kit-header.single-select-header.dropdown-select-box-header.btn.btn-icon-text.btn-default.ember-view {
  color: #000000;
  background-color: #ffffff;
}

div.select-kit-header-wrapper {
  color: #4a86e8;
}

div.row {
  background-color: #dbd7d7;
}

ul li a {
  color: #4a86e8;
  background-color: #ffffff;
}

header h2 div {
  color: #ff9900;
}

div h3 a {
  color: #4a86e8;
}

footer section p {
  color: #4a86e8;
}

span.number {
  color: #4a86e8;
}

div a span {
  color: #4a86e8;
}

div.timeline-handle {
  background-color: #ff9900;
}

div.timeline-ago {
  color: #4a86e8;
}

div.post-stream {
  background-color: #dbd7d7;
}

.unreal-sidebar-sticky-wrap::-webkit-scrollbar-thumb {
    background: #4a86e8;
    }

th.posters.topic-list-data {
  background-color: #a7a5a5;
  color: #000000;
}

td.posters.topic-list-data {
  background-color: #d9d9d9;
  color: #000000;
}

a.enclosing-category-link {
  background-color: #dbd7d7;
}

div.unread-new.ember-view {
  background-color: #dbd7d7;
}

td.replies {
  background-color: #dbd7d7;
}

tr td div {
  background-color: #dbd7d7;
  color: #000000;
}

td.topics {
  background-color: #dbd7d7;
  color: #000000;
}

td.latest {
  background-color: #b8b2b2;
  color: #000000;
}

th.topics {
  color: #000000;
}

th.replies {
  color: #000000;
}

th.latest {
  color: #000000;
}

span.stat-period {
  color: #000000;
}

span.stat {
  color: #4a86e8;
}

span.link-bottom-line {
  background-color: #efefef;
}

a.docs-topic-link {
  background-color: #efefef;
}

td.main-link.topic-list-data {
  background-color: #efefef;
}

td.topic-list-data {
  background-color: #efefef;
}

th.topic-list-data {
  background-color: #dbd7d7;
  color: #000000;
}

input.no-blur.docs-search-bar.ember-text-field.ember-view {
  background-color: #dbd7d7;
  color: #000000;
}

input.filter.ember-text-field.ember-view {
  background-color: #ffffff;
}

div section h3 {
  color: #ff9900;
}

aside blockquote p {
  background-color: #f3f3f3;
  color: #000000;
}

#quote-id-236316-4-0 {
  background-color: #efefef;
}

aside.onebox.allowlistedgeneric {
  background-color: #f3f3f3;
  color: #000000;
}

a.fancy-title {
  color: #000000;
}

svg.fa.d-icon.d-icon-pencil-alt.svg-icon.svg-string {
  color: #ff9900;
}

div.search-widget-wrap.ember-view {
  background-color: #000000;
}

h1 a span {
  color: #ffffff;
}

a.discourse-tag.bullet {
  color: #ff9900;
  background-color: #ffffff;
}

div.link-bottom-line {
  background-color: #efefef;
}

span.category-name {
  color: #4a86e8;
}

button.widget-button.btn-flat.show-replies.btn-icon-text.d-hover {
  color: #ff9900;
}

div.topic-body {
  background-color: #dbd7d7;
}

div.title {
  background-color: #191a24;
  color: #ffffff;
}

div div p {
  color: #000000;
}

textarea.d-editor-input.ember-text-area.ember-view {
  color: #000000;
  background-color: #ffffff;
}

div.d-editor-button-bar {
  background-color: #434343;
}

div.modal-footer {
  background-color: #efefef;
}

a.topic-excerpt {
  color: #000000;
}

div.topic-statuses {
  background-color: #efefef;
}

td.category {
  background-color: #dbd7d7;
}

input.ember-text-field.ember-view {
  background-color: #ffffff;
  color: #000000;
}

a.inline-onebox {
  color: #4a86e8;
}

div p a {
  color: #4a86e8;
}

span.label {
  color: #4a86e8;
}

dl div dt {
  color: #000000;
}

dd.trust-level {
  color: #4a86e8;
}

dl div dd {
  color: #4a86e8;
}

span.relative-date.date {
  color: #4a86e8;
}

a.group-link.ember-view {
  color: #4a86e8;
}

a.more.ember-view {
  color: #4a86e8;
}

a.ember-view {
  color: #4a86e8;
}

.desktop-view .topic-avatar {
        margin-left: 15px;
}

img.avatar {
        margin-top: 10px;
}

header.source {
  background-color: #d9d9d9;
  color: #000000;
}

aside.onebox.wikipedia {
  color: #000000;
  background-color: #d9d9d9;
}

div.discourse-tags {
  background-color: #ffffff;
}

td.avatar {
  background-color: #dbd7d7;
}

div.excerpt {
  background-color: #d9d9d9;
  color: #000000;
}

div.group-member-info.names {
  background-color: #d9d9d9;
}

div.user-stream-item.item.ember-view {
  background-color: #d9d9d9;
}

span.name {
  color: #4a86e8;
}

div div a {
  color: #4a86e8;
}

span.d-button-label {
  color: #000000;
}

#quote-id-521385-1-0 {
  background-color: #d9d9d9;
}

#quote-id-516077-2-0 {
  background-color: #efefef;
}

div div edc-sidebar {
    background-color: #142f48 !important;
}

#quote-id-2657626-1-0 {
  background-color: #f3f3f3;
}

div.reply-area.without-tags.without-form-template.with-category {
  background-color: #999999;
}

div.grippie {
  background-color: #999999;
}

details.select-kit.single-select.dropdown-select-box.composer-actions.ember-view {
  background-color: #434343;
}

span.action-title {
  background-color: #000000;
}

div.composer-action-title.ember-view {
  background-color: #434343;
}

div.d-editor-textarea-wrapper {
  background-color: #ffffff;
}

div.ue-badges-for-post__display-name {
  color: #ff9900;
}

div.ue-badges-for-post__username {
  color: #000000;
}

div.post-user-count-label {
  color: #000000;
}

div div span {
  color: #000000;
}

div.topic-map.--bottom {
  background-color: #efefef;
}

div.post__row.row {
  padding-right: 10px;
  padding-left: 2px;
}

div blockquote p {
  background-color: #f3f3f3;
}

div div blockquote {
  background-color: #d9d9d9;
}

div.d-modal__header {
  background-color: #efefef;
}

form div label {
  background-color: #999999;
}

div.d-modal__body {
  background-color: #999999;
}

nav.post-controls.expanded {
  background-color: #486fb1;
}

a.mention {
  background-color: #f3f3f3;
}

div.post__topic-map.topic-map.--op {
  background-color: #dbd7d7;
  padding-left: 173px;
  padding-right: 10px;
}

div.panel-body-contents {
  background-color: #ffffff;
}

summary.select-kit-header.single-select-header.combo-box-header.ember-view {
  background-color: #f3f3f3;
}

div.select-kit-header--filter {
  background-color: #f3f3f3;
}

summary.select-kit-header.multi-select-header.ember-view {
  background-color: #f3f3f3;
}

details.select-kit.multi-select.mini-tag-chooser.has-selection.ember-view {
  background-color: #f3f3f3;
}

svg.fa.d-icon.d-icon-xmark.svg-icon.svg-string {
  color: #000000;
}

div div h1 {
  background-color: #ffffff;
}

div.title-wrapper {
  background-color: #ffffff;
}

div.regular.ember-view {
  background-color: #ffffff;
}

div.ember-view.topic-category {
  background-color: #ffffff;
}

div.timeline-padding {
  background-color: #ffffff;
}

svg.fa.d-icon.d-icon-reply.svg-icon.svg-string {
  color: #000000;
}

svg.fa.d-icon.d-icon-d-watching.svg-icon.svg-string {
  color: #000000;
}

div.with-timeline.ember-view.topic-navigation {
  background-color: #ffffff;
}

div.topic-map__users-list.--users-summary {
  background-color: #efefef;
}

section.topic-map__contents {
  background-color: #efefef;
}

svg.fa.d-icon.d-icon-d-topic-share.svg-icon.svg-string {
  color: #000000;
}

svg.fa.d-icon.d-icon-angle-down.svg-icon.notifications-tracking-btn__caret.svg-string {
  color: #000000;
}

div.topic-footer-main-buttons {
  color: #000000;
  background-color: #cccccc;
}

div.notifications-tracking-btn__texts {
  background-color: #d9d9d9;
}

button.btn.no-text.notifications-tracking-btn.-selected {
  background-color: #d9d9d9;
}

div.fk-d-menu__inner-content {
  background-color: #d9d9d9;
}

(dev.epicgames.com CSS) A work in progress lol

CSS Updated: 12/08/2025

thead tr th {
  background-color: #dbd7d7;
  color: #000000;
}

tbody tr td {
  background-color: #dbd7d7;
  color: #000000;
}

a.snippet-link {
  color: #4a86e8;
}

span.author-name {
  color: #4a86e8;
}

div.content-item-content {
  background-color: #f3f3f3;
}

section.col-md-8.col-xl-9.column-main {
  background-color: #f3f3f3;
  color: #000000;
}

h1.text-capitalize {
  color: #000000;
}

span.icon-pad-left {
  color: #ff9900;
}

header.content-item-header {
  background-color: #f3f3f3;
}

div.labels-title {
  color: #000000;
}

a.report-link.fs-sm {
  color: #ff0000;
}

p.eds_271_1ypbntd0.eds_271_x3b5605.eds_271_x3b5600.eds_271_1mdgj1q0.eds_271_1ypbntd12.eds_271_1ypbntd19 {
  color: #000000;
}

span.eds_271_1ypbntd0.eds_271_1bgzew92.eds_271_1bgzew90.eds_271_1mdgj1q0.eds_271_1ypbntd11.eds_271_1ypbntd18 {
  color: #000000;
}

div.eds_271_1cgaabk0.eds_271_1cgaabk1.eds_271_1cgaabka.eds_271_1cgaabkb.eds_271_1cgaabk6.eds_271_1tt68zf3.eds_271_1tt68zf4 {
  background-color: #f3f3f3;
}

span.eds_271_1ypbntd0.eds_271_1bgzew92.eds_271_1bgzew90.eds_271_1mdgj1q0.eds_271_1ypbntd11.eds_271_1ypbntd19.eds_271_pcjeelj {
  color: #000000;
}

a.eds_271_pcjeelm {
  color: #000000;
}

h1.eds_271_1ypbntd0.eds_271_tfhnr23.eds_271_tfhnr20.eds_271_1mdgj1q0.eds_271_1ypbntd11.eds_271_1ypbntd19 {
  color: #000000;
}

div.eds_271_1ypbntd0.eds_271_1bgzew91.eds_271_1bgzew90.eds_271_1mdgj1q0.eds_271_1ypbntd11.eds_271_1ypbntd19 {
  color: #000000;
}

a.eds_271_34b38a0.eds_271_1be5iuz0.eds_271_1be5iuz1.eds_271_34b38a1.eds_271_1bgzew91.eds_271_1bgzew90.eds_271_1mdgj1q0 {
  color: #000000;
}

section.css-1ndki51.e10ehgry2 {
  background-color: #f3f3f3;
}

span.eds_271_1ypbntd0.eds_271_x3b5605.eds_271_x3b5600.eds_271_1mdgj1q0.eds_271_1ypbntd11.eds_271_1ypbntd19.css-a5yzk9.ejjj5x31 {
  color: #000000;
}

p.eds_271_1ypbntd0.eds_271_x3b5605.eds_271_x3b5600.eds_271_1mdgj1q0.eds_271_1ypbntd11.eds_271_1ypbntd19 {
  color: #000000;
}

h2.eds_271_1ypbntd0.eds_271_tfhnr25.eds_271_tfhnr20.eds_271_1mdgj1q0.eds_271_1ypbntd11.eds_271_1ypbntd19 {
  color: #000000;
}

h5.eds_271_1ypbntd0.eds_271_tfhnr26.eds_271_tfhnr20.eds_271_1mdgj1q0.eds_271_1ypbntd11.eds_271_1ypbntd19 {
  color: #000000;
}

p.eds_271_1ypbntd0.eds_271_1bgzew92.eds_271_1bgzew90.eds_271_1mdgj1q0.eds_271_1ypbntd11.eds_271_1ypbntd19 {
  color: #000000;
}

span.eds_271_1ypbntd0.eds_271_b0dh6i2.eds_271_b0dh6i0.eds_271_1mdgj1q0.eds_271_1ypbntd11.eds_271_1ypbntd19 {
  color: #000000;
}

span.eds_271_1ypbntd0.eds_271_x3b5605.eds_271_x3b5600.eds_271_1mdgj1q0.eds_271_1ypbntd11.eds_271_1ypbntd19.css-c7jxvy.ejjj5x31 {
  color: #ff9900;
}

span.eds_271_1ypbntd0.eds_271_x3b5605.eds_271_x3b5600.eds_271_1mdgj1q0.eds_271_1ypbntd11.eds_271_1ypbntd19 {
  color: #000000;
}

p.eds_271_1ypbntd0.eds_271_x3b5604.eds_271_x3b5600.eds_271_1mdgj1q0.eds_271_1ypbntd11.eds_271_1ypbntd19 {
  color: #000000;
}

h4.eds_271_1ypbntd0.eds_271_tfhnr25.eds_271_tfhnr20.eds_271_1mdgj1q0.eds_271_1ypbntd11.eds_271_1ypbntd19 {
  color: #000000;
}

p.eds_271_1ypbntd0.eds_271_x3b5604.eds_271_x3b5600.eds_271_1mdgj1q0.eds_271_1ypbntd12.eds_271_1ypbntd19 {
  color: #000000;
}

div.eds_271_i5ab52f.eds_271_i5ab522 {
  color: #000000;
  background-color: #cccccc;
}

label.eds_271_1ypbntd0.eds_271_1bgzew93.eds_271_1bgzew90.eds_271_1mdgj1q0.eds_271_1ypbntd11.eds_271_1ypbntd19.eds_271_1ylsm9b0.eds_271_8491862 {
  color: #000000;
}

span.eds_271_1ypbntd0.eds_271_1bgzew92.eds_271_1bgzew90.eds_271_1mdgj1q0.eds_271_1bgzew9a.eds_271_1ypbntd11.eds_271_1ypbntd19 {
  color: #000000;
}

p.eds_271_1ypbntd0.eds_271_1bgzew92.eds_271_1bgzew90.eds_271_1mdgj1q0.eds_271_1ypbntd12.eds_271_1ypbntd19 {
  color: #434343;
}

div p time {
  color: #ff9900;
}

svg.eds_271_5nt5ak1 {
  color: #ff9900;
}

a.eds_271_wy6w1n0.eds_271_1be5iuz0.eds_271_wy6w1n2.eds_271_x3b5604.eds_271_x3b5600.eds_271_1mdgj1q0.eds_271_wy6w1n5.eds_271_s7hono1.css-17zfvnh.ex654933 {
  color: #000000;
}

div.css-1vddzdz.e1vhd0fq0 {
  background-color: #ffffff;
}

a div div {
  background-color: #ffffff;
}

span.eds_271_80sw5qf {
  color: #000000;
}

button.eds_271_80sw5q0.eds_271_80sw5q2.eds_271_1bgzew92.eds_271_1bgzew90.eds_271_1mdgj1q0.eds_271_1bgzew95.eds_271_80sw5q5.eds_271_14hl3lj0.eds_271_1ypzzx60 {
  background-color: #f3f3f3;
}

a.eds_271_80sw5q0.eds_271_80sw5q2.eds_271_1bgzew92.eds_271_1bgzew90.eds_271_1mdgj1q0.eds_271_1bgzew95.eds_271_80sw5q5.eds_271_14hl3lj0.eds_271_1ypzzx60 {
  background-color: #f3f3f3;
}

a.eds_271_80sw5q0.eds_271_80sw5q2.eds_271_1bgzew92.eds_271_1bgzew90.eds_271_1mdgj1q0.eds_271_1bgzew95.eds_271_80sw5q7.eds_271_14hl3lj0.eds_271_1ypzzx60 {
  background-color: #f3f3f3;
}

div.eds_271_i5ab52h {
  background-color: #cccccc;
  color: #000000;
}

div.eds_271_i5ab525.eds_271_1be5iuz0.eds_271_1bgzew92.eds_271_1bgzew90.eds_271_1mdgj1q0.eds_271_1be5iuz1.eds_271_i5ab529.eds_271_i5ab52c.eds_271_i5ab527 {
  color: #ff9900;
}

div.eds_271_i5ab521.eds_271_8491860.css-4tkzfs.e14en6zz0 {
  color: #ff9900;
  background-color: #cccccc;
  padding-left: 10px;
}

a.MuiButtonBase-root.MuiCardActionArea-root.css-1h0rbtd {
  background-color: #ffffff;
}

span.eds_271_1ypbntd0.eds_271_1bgzew92.eds_271_1bgzew90.eds_271_1mdgj1q0.eds_271_1ypbntd12.eds_271_1ypbntd19 {
  color: #000000;
}

th.eds_271_167knmm4.eds_271_167knmm3.eds_271_1n9necs1.eds_271_1be5iuz1 {
  background-color: #d9d9d9;
  color: #ff9900;
}

td.eds_271_167knmm3.eds_271_1n9necs6 {
  background-color: #ffffff;
}

div.eds_271_pcjeel0.eds_271_pcjeel3.eds_271_pcjeel5.eds_271_pcjeel9 {
  background-color: #ffffff;
}
5 Likes
Change forum Theme
Forum text black when logged in
2

Thanks, you saved my (eyes) life :slight_smile:

1 Like
3

Thanks!
Are you going to continue the work for the dev.epicgames.com version ?

1 Like
4

(post deleted by author)

1 Like
5

I just updated the CSS code for both sites, I made a bunch of changes, feel free to try it out :slight_smile: