Dark mode is not easy to read for me. And can’t not find any switcher on the top.
Please add a BRIGHT mode.
Thank you
I am sorry you have issues reading when using the default theme of the website. From a game development perspective, if you don’t mind me asking; what is the difficulty in using current dark theme they have? I just don’t want to make the same mistake on my website or in my games.
Temporary solution: I don’t think Epic will add a Bright theme any time soon, so I would suggest that you get a browser extension to modify the CSS. I found this with a quick search, but there might be better ones: Stylebot. With Stylebot you can setup custom CSS rules that changes the behaviour of a website when it loads in.
Here is an image of me changing the default CSS:
My example isn’t pretty but if you spend some time on it, you will likely get a decent result.
1 Like
It’s very hard to read. Please make an option to switch back to old design or white theme.
4 Likes
Looks good, I will try it , thanks
1 Like
+1, my eyes get tired very fast the new documentation.
2 Likes
+1. I find it difficult to focus on text in dark mode. I suspect that my myopia or astigmatism might be the cause. However, I’m surprised that not many people generally complain about dark mode, so there could be other reasons as well. I have high myopia and mild astigmatism, and I wear glasses all the time.
4 Likes
I use the Stylebot extension for Firefox, and made a css script for the Unreal Forums and Documentation. It’s not perfect, but it gets the job done well for me.
For forums.unrealengine.com:
#main-outlet {
background-color: #d9d9d9;
color: #000000;
}
/* was meant for unreal engine user profiles (but is on non-profile pages as well) */
/* basically the main text areas in the page I think */
#main-outlet-wrapper *:not(a, .primary *, .topic-status-badge:where(.unresolved, .resolved) *, .topic-status-badge:where(.unresolved, .resolved), .badge-card *, .epic-badge, .topic-post-visited-message, pre code, pre code *) {
color: #000000;
}
#main-outlet-wrapper code:not(pre code, pre code *) {/* code that isn't in code blocks */
background-color: #e8e8e8;
}
.topic-status-badge:where(.unresolved/*, .resolved*/) {
background-color: #434343;
}
#reply-control.draft, #reply-control.draft .grippie {
background-color: #a4c2f6;
}
#reply-control .grippie {
border-radius: inherit;
}
#reply-control.open,
#reply-control.open *:not(.grippie, .d-editor-textarea-wrapper, .d-editor-textarea-wrapper *) {
background-color: #d3e1fa;
}
.reply-area *:not(pre code, pre code *)
/*.reply-area .d-editor-input *:not(pre code, pre code *)*/ {
background-color: #fafafa;
color: #000000;
}
.fk-d-menu * {
background-color: #fefefe;
}
#user-content .top-section li.ember-view,
#collapsed-info-panel, .post-list-item {
background-color: #f3f3f3;
}
#main-outlet-wrapper ul.action-list .ember-view:not(.active) {
background-color: #bbbbbb;
}
#main-outlet-wrapper ul.action-list .ember-view.active {
background-color: #ffffff;
}
.search-header, .search-bar, .search-filters,
.search-info {
background-color: #efefef;
}
.search-advanced-filters {
background-color: #f3f3f3;
}
.search-bar *,
.controls *,
.sort-by details *
{
background-color: #ffffff;
}
ol.category-breadcrumb *,
#navigation-bar *:not(.active),
div.navigation-controls *,
#list-area *:not(.epic-badge),
.topic-status-badge.locked *,/* .topic-status-badge__icon, .topic-status-badge__text,*/
#topic-title div.title-wrapper :where(h1, h2, h3, h4, h5, h6, a, li, ol, ul) {
color: #000000;
}
ul.select-kit-collection,
div.select-kit-row:not(.is-highlighted, .is-selected),
li:where(.select-kit-row, .dropdown-select-box-row):not(.is-selected),
span.no-content {
background-color: #d9d9d9;
}
/* highlighted and/or selected */
div.select-kit-row.is-highlighted:not(.is-selected),
li:where(.select-kit-row, .dropdown-select-box-row).is-selected {
background-color: #efefef;
}
#list-area tr.has-description,
tr.topic-list-item /* #list-area tr.topic-list-item, div.topics tr.topic-list-item */ {
background-color: #f3f3f3;
}
.select-kit-filter.is-expanded :where(input, svg) {
color: #ffffff;
}
div.extra-info-wrapper div.title-wrapper :where(h1, h2, h3, h4, h5, h6, span, a, li, ol, ul) {
color: #ffffff;
}
div.post__body.topic-body {
background-color: #ffffff;
}
.voting-wrapper.show-pointer * {
color: #000000;
background-color: #f3f3f3;
}
.timeline-scrollarea-wrapper * {
color: #000000;
}
span.badge-category__name {
color: #000000;
}
.topic-map, .topic-map__contents {
background-color: #f3f3f3;
}
div.post__row.row {
background-color: #f3f3f3;
color: #000000;
}
div.post__row.row :where(svg) {
color: #000000;
}
div.post__row.row :where(h1, h2, h3, h4, h5, h6) {
color: #000000;
}
div.post__row.row :where(p, i, span, div, ul, li, .list, a.mention):not(blockquote, blockquote *, pre code, pre code *, .topic-avatar, .topic-avatar *) {
background-color: #ffffff;
color: #000000;
}
div.post__row.row :where(blockquote) {
background-color: #f3f3f3;
}
/*div.post__row.row*/
:where(.post__body.topic-body, .more-topics__browse-more) a:not(.mention, .topic-avatar *) {
color: #004eea;
}
div.small-action.topic-post-visited,
span.topic-post-visited-message {
background-color: #ecf2f9;
color: #000fff;
}
div.topics :where(span, td span, td a):not(.epic-badge, pre code, pre code *) {
color: #000000;
}
/* div.topics :where(td a) {
color: #0061f2;
} */
div.topics :where(svg) {
color: #000000;
}
/* div.topics .epic-badge/ {
color: #ffffff;
} */
#topic-footer-buttons :where(span, svg, use):not(.epic-badge, pre code, pre code *) {
color: #000000;
}
For dev.epicgames.com:
div.page-document.has-theme-bg {
color: #000000;
background-color: #e0e0e0; /* overwrites the default "green to black" gradient in the background */
}
div.page-document.has-theme-bg :where(h1, h2, h3, h4, h5, h6) {
color: #000000;
}
div.page-document.has-theme-bg :where(p, i, span, div, ul, li, .list):not(.block-code-snippet-plain *) {
color: #000000;
}
div.row.align-items-start/*, #blocks-renderer*/ {
background-color: #ffffff;
}
div.row.align-items-start .document-list-card {
background-color: #efefef;
}
div.row.align-items-start img.thumbnail {
background-color: #999999;
}
div.row.align-items-start .document-list-card * {
color: #000000;
}
div.page-document.has-theme-bg :where(a) {
color: #004eea;
}
div.page-document.has-theme-bg :where(th) {
color: #000000;
/* background-color: #3c78d8; */
}
/* div.page-document.has-theme-bg :where(th a) {
color: #62ffec;
} */
div.block-callout-inner,
div.page-document.has-theme-bg td:not(.block-code-snippet-plain *)/* not a code block text */ {
color: #000000;
background-color: #f3f3f3;
}
div.page-document.has-theme-bg tr:not(.block-code-snippet-plain *) {
border-style: none;
}