theme: support for dark mode

[McShelby]

The content currently relies on having a light background because all other fixed colors are aligned to this.

In a best case scenario, in the end we have enough - but not to many - new theme color variables to enable a dark mode style by just redefining colors in your theme's CSS.

Reference: matcornic/hugo-theme-learn#435

[Nuc1eoN]

Greetings @McShelby. In case you are interesed, here are the theme variables that I needed to add to my theme in order to customize it properly:

:root {
    [...]
    /* The following vars were added by us */
    --MENU-SECTIONS-BG: linear-gradient(
        150deg,
        #8000ffb3 0%,
        #00bcf4b3 75%,
        #00ff5ab3 100%
    ); /* Background color of side bar */
    --MAIN-BG-color: #202020; /* Background color of main content */
    --MAIN-H1-color: #0060f3; /* Color of h1 headlines */
    --MAIN-H2-color: #f300b2; /* Color of h2 headlines */
    --MAIN-H3-color: #00f3d3; /* Color of h3 headlines */
    --MAIN-H4-color: #ffffff; /* Color of h4 headlines */
    --MAIN-H5-color: #ffffff; /* Color of h5 headlines */
    --MAIN-H6-color: #ffffff; /* Color of h6 headlines */
    --MAIN-INLINECODE-color: #00f3d3; /* Color of inline code (code enclosed in `single backticks`) */
    --MAIN-INLINECODE-BG-color: #2d2e33a8; /* Background color of inline code */
    --MAIN-INLINECODE-BORDER-color: unset; /* Border color of inline code (Note: we disabled borders by default) */
    --NAV-TOPBAR-BG-color: #2a2a2a; /* Background color of the navigation header/top bar */
    --FOOTER-TEXT-color: #fff; /* Footer text color. The one holding the copyright disclaimer. */
}

PS: Since the work isn't published yet (I'm waiting for the green lighting), I have added you to the private repo which holds my work on the theme in case you are interested in the implementations. (Also https://wiki.gobolinux.org/ is severely outdated against my repo)

[McShelby]

Also https://wiki.gobolinux.org/ is severely outdated against my repo

That's a good hint, as I ripped the colors from this origin ;-)

Just to keep it sane, I try not to introduce to much new variables. So it won't be possible to color the different headings independently.

As you can see from the issue list, I also have some other things in the pipeline for the next release, so the official release will be probably next week. Nevertheless, implementation is pretty much done and I may push an RC to this repo's main branch in the evening .

[Nuc1eoN]

That's a good hint, as I ripped the colors from this origin ;-)

Heh nice to know^^

Just to keep it sane, I try not to introduce to much new variables. So it won't be possible to color the different headings independently.

Yup totally understandable. That was simply needed for my specific use-case. Just cherry pick what you need.
Also as you might see, I needed to make my own --MENU-SECTIONS-BG as contrary to the "official" --MENU-SECTIONS-BG-color, since I introduced the new "gradient" styled sidebar from grav-learn4-theme.

As you can see from the issue list, I also have some other things in the pipeline for the next release, so the official release will be probably next week. Nevertheless, implementation is pretty much done and I may push an RC to this repo's main branch in the evening .

Very nice!

[McShelby]

Just landed a first draft in the main branch of the repo. There are a few hard-coded colors still left in theme.css that are all corner-cases. I'll fix those in the next change set.

Also migration documentation is still missing and will be delivered later. For the moment take a look into the diff of eg. theme-blue.css to discover all new (and one deleted) color settings.

Feedback appriciated!

[Nuc1eoN]

I just tested it locally looks really nice!

There's a few unfinished things, but I am certain you are working on it. What I saw:

• notices not adapted to dark style
• search dropdown entries not adapted
• TOC has still a white bg (same on my version I wasnt able to figure out how to change it)
  I also see that you have removed some ̀!important ̀,I think?... If so, that is very much appreciated! Ideally, if it's possible, I think your theme should not use !important at all (as I have faced some annoyances with it^^

Oh and I like the new copy-to-clipboard button! Good idea to take it from awesome icons! (thats what I did too :)

EDIT: Also Im a fan of the new theme variables! Kinda address some of the real life issues I had :)
You could also add those for the notices styling... although not sure if that would be too much. Personally I just hardcoded it (as you have certainly seen in my css file.)

[McShelby]

notices not adapted to dark style

Notice boxes are really difficult without introducing new variables.

search dropdown entries not adapted

The search (and even the language) select is also a bit diffcult but I may find a solution without introducing additional color settings.

Oh and I like the new copy-to-clipboard button! Good idea to take it from awesome icons! (thats what I did too :)

Thank you :-)

I've found a way to use default colors with CSS variables. So introducing addtional color vars may not be the limitation anymore.

[Nuc1eoN]

Notice boxes are really difficult without introducing new variables.

Did you take a look at my adaptations?

Perhaps it makes sense to introduce variables for notices.., there could be a general notice for the background and text color:

• --NOTICE-BG-color
• --NOTICE-TEXT-color
  And variables for the specific ones:
• --NOTICE-NOTE-color
• --NOTICE-INFO-color
• --NOTICE-WARNING-color
• --NOTICE-TIP-color

I have found it necessairy to pick specific colors for the notes.. you want them to stand out from the rest, that is kind of the purpose. Those are unique elements.

[McShelby]

I also see that you have removed some ̀!important ̀,I think?... If so, that is very much appreciated!

Yeah, they should have named it !annoying in the first place ;-)