Dark theme and bottom of forum page

[MrE]

Greetings!

I use the dark mode (it helps me with my eyes) and it looks very good, except the bottom of the forum that is in white.

And at night when I visit the forum, it’s a visual shock to get to the end of the comments in each topic. The color white blinds me and hurts.

I hope someone will take pity and adjust the white theme at the bottom of the page according to the dark theme.

Regards!
Enrique

[Alchemix]

Im quite sure that somebody is going to look at this, as well as I’m certain that resurrecting this forum is a lot of work. It took a bit for the dark theme to return, so I think your suggestion will find acceptance.

And I agree the white is glaring.

[datiswous]

You can use an extension to add css to websites (I use Stylus in Firefox). This way you can customize the current dark theme further to your liking.

For now I have these edits that I use in combination with the current dark theme:

html {
    background-color: #000000;
}
.d-header {
    background-color: #114821f0;
}
.custom-footer {
    background-color: #000000;
    border-top: 2px dashed #1a1919;
    margin-top: 5em;
}

[moson]

Pinging @codesardine web dev and css, js master

[realmain]

@MrE

I hope someone will take pity and adjust the white theme at the bottom of the page according to the dark theme.

The current dark theme is Discourse’s default. If you have an issue with that, please report it to Discourse’s GitHub.

Other than that, Manjaro Team is working on their own dark theme for the forum. No ETA.

[kwg]

In the meantime, if you’re using Firefox, you can correct the problem by pasting this text into your userContent.css file:

@-moz-document domain(forum.manjaro.org) {
	.custom-footer {
		background-color: #111 !important;
	}
	.custom-footer div,
	.custom-footer a {
		color: #ddd !important;
	}
}

Your userContent.css file is located here:

~/.mozilla/firefox/<your_profile>.default/chrome/userContent.css

Replace <your_profile> with the name of your profile. Create userContent.css if it doesn’t exist already.

Save the file.

Then, in your browser, open the about:config page and set the value of this property to True (by double-clicking the property):

toolkit.legacyUserProfileCustomizations.stylesheets

Finally, close and reopen the browser so that your new user styles take effect.

[MrE]

@kwg @datiswous

I use duckduckgo on my cell phone, but the solution with Firefox will help me when using my PC.

Hopefully the theme will get a lot of love soon.

Thank you.

[PhilCol]

My own approach was to do away with the footer altogether by getting uBlock Origin to block the following element:
forum.manjaro.org##.ember-view.custom-footer.below-footer-outlet

[MrE]

Yes, I used to do the same thing before I got to know @datiswous solution.; the use of uBlock is extreme in this case; as I then stop seeing the bottom part that usually helps to know about other areas of interest in the forum.

Now, if only uBlock existed for the duckduckgo browser, then I would use it unleashed.

uBlock Origin - Free, open-source ad content blocker.

Interesting, uBlock works in Opera, I may need to use it in my cell phone to visit the forum. I don’t like to use chrome on my cell phone, and Firefox suddenly breaks it between updates.

Time to investigate the lighter browsers for cell phones with ad blockers or stylers.

Thank you!

[datiswous]

@MrE

Interesting, uBlock works in Opera, I may need to use it in my cell phone to visit the forum.

Afaik Chrome and Opera mobile don’t support addons.

@MrE

and Firefox suddenly breaks it between updates.

I never have problems with Firefox mobile and it supports addons.

[datiswous]

@datiswous

For now I have these edits that I use in combination with the current dark theme:

html {
    background-color: #000000;
}
.d-header {
    background-color: #114821f0;
}
.custom-footer {
    background-color: #000000;
    border-top: 2px dashed #1a1919;
    margin-top: 5em;
}

With the following css code you can remove the white background around emoji in the bottom left of a post:

.post-retort {
  background: none;
  border: none;
}
   .post-retort__count {
    color: var(--primary-low-mid);
}