search

McShelby / hugo-theme-relearn

A theme for Hugo designed for documentation
https://mcshelby.github.io/hugo-theme-relearn/
MIT License
436 stars 188 forks source link

theme: support for dark mode #175

Closed McShelby closed 2 years ago

McShelby commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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:

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 commented 2 years ago

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 commented 2 years ago

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:

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 commented 2 years ago

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

Nuc1eoN commented 2 years ago

Btw your copy-to-clipboard button is still a it buggy, I hope you got that on your list :D (If you click the upper part weird things happen, and if you click the lower part the small popup note does not show)

McShelby commented 2 years ago

Thanks for the hint. I haven't seen this yet as it only seems to happen occassionally on my side.

McShelby commented 2 years ago

@Nuc1eoN: So far so good. I've landed my last change for this issue and I'ld appreciate your feedback.

Things I currently will not change: search box dropdown, select box dropdown. I don't see much gain in changing this and it look pretty good for the currently deployed variants.

I needed to change the colors for the copy-to-clipboard in code blocks again, as styling is really difficult to match with all the possible combinations of light/dark themes with light/dark highlight themes. I am pretty satisfied with the current look, but as always - comments appriciated.

Copy-to-clipboard functionality is fixed as well.

The only thing that may change is the relearn-dark theme itself cause I am not yet satisfied with the menu colors. This will most likely not affect the implemented variables.

Also color boxes (for notices and attachments) was changed. I tried to achieve the different looks with the lowest amount of variables. Although, I have only documented fixed color variables like --BOX-BLUE-color you can also overload semantic colors like --BOX-INFO-color as used with the notice boxes. Take a look at the beginning of variant.css.

I may use this mechanism also to provide different colors for the different headings. I am still thinking if I should go this way.

Btw: I really like the neonish style of the GoboLinux page! Really fun to read.

Nuc1eoN commented 2 years ago

Hey @McShelby I think it looks really nice!

One thing that I have noticed, is that when I click through the menu items of https://mcshelby.github.io/hugo-theme-relearn/ is that the site is "blinking" through a white background (for an instant) while loading the next page. This does not seem to be the case with https://wiki.gobolinux.org/ (although I remember having seen it on my sidebar)? Could that be related to a different background setting of body (or even html)? Just a guess here.

Btw: I really like the neonish style of the GoboLinux page! Really fun to read.

Hah thank you! I also find it makes is "fun" to read. Although I must say the heading colors are due to changes, as the project leader thinks it deviates from the projects main color scheme on https://gobolinux.org. So they will probably not be quite as neonish/poppy in the near future, but thats not on me :P Still, I am very satisfied with how it all turned out so far. The relearn theme has certainly been a key element ;)

McShelby commented 2 years ago

One thing that I have noticed, is that when I click through the menu items of https://mcshelby.github.io/hugo-theme-relearn/ is that the site is "blinking" through a white background

This is a trade off of the theme switcher when you have selected a non default variant. The site first loads with the default variant and afterwards reapply the previous selected non-default variant. I tried to keep the switch as early as possible but there may be a recognisable flickering. Technically there is not much I can do about this - or at least I have no idea how to avoid this completly.

Btw: I really like the neonish style of the GoboLinux page! Really fun to read.

Hah thank you! I also find it makes is "fun" to read. Although I must say the heading colors are due to changes

I am really thinking about providing another neon variant in the showcase resembling your current style. Just for the fun :-)

Btw: I've "booked" a place in the showcase section of the exampleSite for the GoboLinux documentation.

Nuc1eoN commented 2 years ago

This is a trade off of the theme switcher when you have selected a non default variant.

Oh I see what you mean. Yeah, probably the nature of a static site generator makes this one a difficult fix, or not possible at all. Although there might be creative solutions out there.

I am really thinking about providing another neon variant in the showcase resembling your current style. Just for the fun :-)

Wow nice idea, I'd certainly feel honored! I even find neon is a fitting name for it.

Certainly it is unorthodox :) but might prove to be a nice experimental ground for others to explore possibilities with their theme. Similar to your arrrrrr pirrates showcases hehe.

Btw: I've "booked" a place in the showcase section of the exampleSite for the GoboLinux documentation.

Awesome!! I has been a really pleasant experience to work with the relearn theme. Both technically but also on the side of resolving issues. So I have also credited you in our Readme as you have certainly seen :)

Nuc1eoN commented 2 years ago

Oh and the project now lives at https://github.com/gobolinux/Documentation btw, forgot to say.

McShelby commented 2 years ago

I shamelessly added a neon style, inspired by your wiki style.

Nuc1eoN commented 2 years ago

I shamelessly added a neon style, inspired by your wiki style.

Wow nice one! Cool to see :)

Although maybe you should consider changing the gradient colors of the sidebar to some own creation. Reason being that I took those colors straight from the GoboLinux logo (which they presumably have some authorship rights to) :)

EDIT: The other colors are not an issue since they are my "invention" ;)

McShelby commented 2 years ago

@Nuc1eoN: I've made some refinements to the colors. If it's still looking to similar, just drop me a line.

Anyways: There are still todos on this issue:

Nuc1eoN commented 2 years ago

@McShelby Looks better, probably different enough! However you can also consider going with the grav-learn-4 type gradient like this https://learn.getgrav.org/17, which would also fit very nicely. But I'll leave that one to you :)

Anyways: There are still todos on this issue:

Yep! Saw some the issues but I am assuming you are heavily into the work currently^^

Btw it looks really nice! I feel honored! ;)

Nuc1eoN commented 2 years ago

Hey @McShelby since we are good friends, and I thought relearn "neon" might deserve a bit more uniqueness, I took the time and designed some alternative sidebar colors for you to choose:

Version 1:

linear-gradient( 165deg, #00f3d3bd 0%, #1c90f3de 75%, #f300b2bf 100% );

/* or more muted: */
linear-gradient( 165deg, #f300b2b3 0%, #1c90f3b3 75%, #00f3d3b3 100% );

Version 2:

linear-gradient( 165deg, #00f3d3bd 0%, #1c90f3de 75%,  #f300b2bf 100% );

(Note: to make colors more or less muted I use the opacity slider, so it can be fine tuned)

Hope you like it !? Let me know what you think!

McShelby commented 2 years ago

@Nuc1eoN: Yeah, looks nice. I'll go with a slightly refined muted version.

I am not caring to much about certain colors. Just let it still look neonish and coherent.

As it is only a showcase and not the default style for the docs, it's even a must to look a bit over the top ;-)

Nuc1eoN commented 2 years ago

Yeah, looks nice. I'll go with a slightly refined muted version.

Yep great, there were meant to be fine tuned! :)

I am not caring to much about certain colors. Just let it still look neonish and coherent. As it is only a showcase and not the default style for the docs, it's even a must to look a bit over the top ;-)

Yeah absolutely. I just didn't feel comfortable with it being derived from the gobolinux colors. As the choice of the sidebar colors had been very specific to that project intentionally. So with "neon" being a separate project theme I felt it should have individualized colors. And also because I want to keep the uniqueness of https://wiki.gobolinux.org/. So now both styles are unique which is a plus for both projects ;)

McShelby commented 2 years ago

@Nuc1eoN: Just wanted to let you know, that I've "turned the neon lights on". Check out the latest additions to the neon theme. Now with more uniqueness and even more "over the top" :-)

Nuc1eoN commented 2 years ago

Haha wow I love it!

I am currently migrating gobodocs to relearn v3! ;)

Nuc1eoN commented 2 years ago

Hey I saw that you've added the GoboLinux Wiki to the showcases https://mcshelby.github.io/hugo-theme-relearn/more/showcase/ !

Thank you for that! :heart:

One request, would you be able to change the author to NEONsys and link it to my website https://neonsys.org? :)

PS: migration done: https://github.com/gobolinux/Documentation (repo not synced with wiki.gobolinux.org currently)

McShelby commented 2 years ago

One request, would you be able to change the author to NEONsys and link it to my website https://neonsys.org/? :)

I've changed the authoring in the showcase. Because it is centered on the theme's usage, I omit links to the authors (also the heading would get to crouded with links).

migration done: https://github.com/gobolinux/Documentation

Looks spiffy

Nuc1eoN commented 2 years ago

Good morrow!

I've changed the authoring in the showcase. Because it is centered on the theme's usage, I omit links to the authors (also the heading would get to crouded with links).

Yup I get the reasoning. In that case, would you be so kind and adapt it to NEONsys.org? It is what I am using in case hyperlinking is not possible, eg in the license file.

Looks spiffy

Thank you! Would you mind helping me out with some last, still unresolved issues?

  1. Redundant artifact in breadcrumb bar: relearn_breadcrumb

Since the beginning I always having that starting > in my breadcrumb bar. I find it unnecessary and would like to get rid of it :) I saw that your example page does not exhibit this behaviour, so I wonder what causes it.

  1. Selector in front of title, even on main page: relearn_selector Huh now that I think of it, maybe those two issues are related? Your exampleSite also does not show this behaviour.
Nuc1eoN commented 2 years ago

@McShelby sorry I forgot to mention point 3.: Upon running hugo serve I am getting:

WARN .File.Path on zero object. Wrap it in if or with: {{ with .File }}{{ .Path }}{{ end }}

There is no line number given so I am totally lost what this might be?

I feel like this is more of a support thing, so I did not open a separate bug report. But it would be nice if you could take a look, too.

If you feel this is worth a separate bug report or discussion thread, let me know, or move it there.

McShelby commented 2 years ago

This should be fixed in 3.0.3