Dark Forum theme edits

Feedback Forum
1

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;
}
4 Likes
2

from this css, My dark version “City”

1281×638 82.6 KB

5 Likes
3

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.

4

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
5

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.

6

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);
}

acapture_0915_140936.cat
acapture_0915_140936.cat936×491 77.7 KB

2 Likes
7

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.

8

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