Browse KIRUPA in style!

After talking about it for a long time, the main site has richer theming support along with the frequently asked dark mode. Go to KIRUPA and click on any of the colors towards the bottom in the left navigation to pick the style you want to browse the site in:

I’m not finished with the actual styling for the theme picker, but that’s something I’ll fiddle with more in the future. In the meantime, check it out and let me know what you all think. If there are any colors that you would like to see, let me know.

I do plan to write more about this experience on getting theming working on a 23-ish year old site.

Cheers,
Kirupa

1 Like

And it is mostly finished! There are 8 themes for you to choose from:

I’ll eventually document more on how anybody can create their own theme, but it is fairly straightforward since it is about a dozen or so CSS Custom Properties that need to be adjusted.

Cheers,
Kirupa

Cool! No dark mode theme? :first_quarter_moon_with_face:

Dark mode is a challenge! The images/screenshots on the site are definitely going to need some special casing to work better, and that is next on my list of things to figure out :cold_face:

It’s not on mobile?

No, not yet! It will be there shortly once I figure out how to show it there.

I’m slowly fiddling with a proper dark theme for the site:

This theming business is hard! :stuck_out_tongue:

1 Like

Because of how not all of the CSS values were tied to a CSS custom property, the bulk of my time here is spent refactoring. I’m getting closer to being finished with a dark mode variation:

Here is what a typical article page looks like:

I used a CSS filter on all the images to have them be a bit more dull. When you hover over them, the colors will be their original selves.

If any of you are interested in testing this out, load up any page on kirupa.com, fire up the Dev Tools, and add the “theme_dark” class to our root html element:

The header won’t change colors, for that requires some JS to run. In the Console, call setHeaderBackground().

Some of the remaining work is:

  • Fixing the colors in any of the article listing pages
  • Getting all of the Note/Tip boxes fixed up
  • Creating a dark mode variation for all 6 of the primary theme colors

:stuck_out_tongue:

Looking good! I can imagine images are tough to deal with when most are made with a white background with the assumption the page background would also be white.

And…I think the theme switching work is mostly done!

I still have a few bugs to work out. Namely, clicking on the radio button in the background chooser causes the event to not be overheard. There may also be a few more sections on a random page (like here) whose CSS is hardcoded instead of relying on CSS custom properties.

@senocular - for the images in dark mode, one thing I had to do is force a white background on all images that were designed to be more free flowing (aka not the ones with a solid black border around them like the ones you see here). Not doing this was really problematic for those many images that had some text and an arrow that would be completely overwhelmed by a dark background.

@TheCanadian - yes, the mobile version is going to be next! :phone:

I think mine’s broken (It wasn’t me! I didn’t touch anything!)

I just noticed this guy too:

Not sure if notes generally follow a shared style or not.

Hmm. I wonder if something is being cached accidentally.

Good catch on the Notes! I’ll need to fix in a few moments.

I noticed this when landing on the page for the first time. Cleared the site data and reloaded and it still defaulted to dark though the page was white.

Also noticed it wasn’t maintaining the dark theme across page loads if I only clicked dark without picking a color.

I think it would also be nice if the current theme color was highlighted in the picker in some way too. It can be hard to know what you’re currently using.

1 Like

Good points! I will fix those issues tonight. It seemed to persist OK for me, but my testing wasn’t thorough at all.

I think I fixed most of the bugs. I haven’t updated the layout in the HTML/CSS tutorials, so I will do that probably tomorrow.

As part of making some perf and visual adjustments, the theme chooser on the site is now a modal:

There is still more that I’d like to expose like custom fonts, but I’ll save that for later :stuck_out_tongue:

1 Like