Dark Forum theme edits

I made some modifications to the default dark theme for myself, which I posted in other threads. I repost those here and update in a central thread. You can also post here your own modifications.

I use the Stylus browser plugin/extension in Firefox to overwrite/add onto the default theme used. Apparently you can use the userContent.css file if you use Firefox and there are other ways in Chrome, but I don’t go into that. I also didn’t test this mobile, so you have to see what works best for you.

This I add to make the background pitch black:

html {
    background-color: #000000;
}

This I add to make the top right navigation icons white, just as the Manjaro logo:

.btn-flat .d-icon {
    color: #ddd
}

This I add to make the bottom links have the same background but divided by a dashed line:

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

This I add to fix some of the darker font and icon color of the bottom section:

.custom-footer .flexbox {
    color: #ddd;
}
.custom-footer .third-box .social .social-link .d-icon {
    color: #ddd;
}

This I add to remove the white background around certain emoji:

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

This I add to improve the looks of the formatted inxi (it creates an empty line between the hardware categories and the first line of the catergory is bold):

.hljs-section {
    display: inline-block;
    padding-top: 1em;
    font-weight: bold;
}

This I add to better see where hidden text stops when folded out and where the regular text starts again:

details {
    padding: 0.7em;
}
5 Likes

from this css, My dark version “City”

5 Likes

What is the best way to apply your modification? I’m using DarkReader and it kinda works but not really, it works 40% of the time really weird.

whe have 2 dark theme in our profile: preferences-interface-theme
my override is only for “dark”, now exists also “manjaro dark materiel”

We can override all style for any web site with some extensions, chromium:CSS and Javascript Injection, Firefox: Custom Css Injector, …
ps: useful for hidden some ads :wink:

2 Likes

Is there a way to have the main contents scroll under the menu bar - I mean under the ‘categories, all tags, all - Categories Latest Unread () Top’ menu are. I am tired of having to scroll back up. I think it would be nice if we could have a custom settings editor saved with our profiles.

this ? (for large desktop only :wink: )

.navigation-container {
    position: fixed;
    width: 180px;
    margin-left: -190px;
    font-size:14px;
}
.navigation-container ol.category-breadcrumb li ,
.navigation-container li {
    float: none;
    display:block;
}
.navigation-container .nav-pills>li>a {
    font-size:14px; 
}

.list-controls .combo-box .combo-box-header {
    display: flex;
    margin: 1px 2px;
    padding: 6px 12px;
    min-height: 30px;
    border: none;
    box-sizing: border-box;
    background: var(--primary-low);
}

2 Likes

OK thanks, I tried Custom CSS Injector, it works good, but in the end I prefer using Dark Reader so I found why the static CSS wasn’t working properly, and I had to make sure some of your CSS has “!important” properties in some places to force the override. It wasn’t needed in Custom CSS Injector though.

Hey,

Thanks for the suggestions so far. On my test theme i made some small changes and seems much better. Once the team is ready to test it and make it available, i hope to get more feedback from you.
I have a few things i still want to fix, but i have to read a bit more about. Not a coder so, yeah, i go by a very empirical approach. :slight_smile:

2 Likes