Hubzilla Solarized Theme

Tweaking the default Redbasic theme in Hubzilla is quite easy. Rather than over-writing it, I poked around to see what could be done to personalise my Hubzilla.

I quite like the scheme ‘Focus-Boxy’ and so I decided to use that as the starting point to my customisation.

First, I navigated to view/theme/redbasic/schema and made copies of Focus-Boxy.css and Focus-Boxy.php, leaving the copies in the same directory. I renamed the respective copies Focus-Solar.css and Focus-Solar.php.

Back in Hubzilla, I navigated to Settings » Display and switched over to the scheme Focus-Solar.

I then set out with making the changes to Focus-Solar.

Note: This is a dark theme so make sure to switch your Hubzilla to dark mode. Navigate to Settings » Display Settings » Custom Theme Settings and set ‘Default to dark mode’ to ‘Yes’.

Focus-Solar.php

I made one quick change to Focus-Solar.php, changing the comment_border_colour to my preference.

<?php

if (! $radiuspx)
    $radiuspx = "4";
if (! $comment_border_colour)
    $comment_border_colour = "rgb(238, 232, 213)";

Focus-Solar.css

I needed a few more tweaks in this one. As my aim was to make a solarized theme using the standard colour palette, I had to change the body background colour, the body text colour and why not? Let’s change the links colour as well.

Other changes include adding the same background color: #073642 to the so-called ‘wall-item’; essentially, the posts sent and received. Note that only the posts themselves will have the colour #073642 applied. Comments received will retain the default background colour as inherited from the original scheme. I wanted it like this to show the difference.

The code below is what I settled on. Here is the full content of Focus-Solar.css:

[data-bs-theme="dark"] {
    --bs-link-color: rgba(181,136,0,1);
    --bs-link-hover-color: rgba(232,176,0,1);
}

body {
    color: #fdf6e3;
    background-color: #073642;
}

.comment .wall-item-body {
    padding-left: 2.8rem;
}

.wall-item-content-wrapper.comment {
    border-bottom: 1px solid var(--bs-border-color);
}

.wall-item-content-wrapper {
    background-color: #073642;
}

.wall-item-head-new {
    border-top: 0.2rem solid #268bd2;
}

.generic-content-wrapper {
    border-radius: 2px;
}

.nav-pills .nav-link.active {
    background-color: #268bd2;
}

.rounded-top {
    border-top-left-radius: 2px !important;
    border-top-right-radius: 2px !important;
}

.hide-comments-outer,
.hide-comments-outer:hover {
    border: 0;
}

.widget {
    border: 1px solid var(--bs-border-color);
}

#note-text {
    border: 1px solid transparent;
}

.vcard-card {
    border: 1px solid var(--bs-border-color);
    border-bottom: 0;
}

.vcard-card .card {
    border: 1px solid var(--bs-border-color);
    border-top: 0;
    border-right: 0;
    border-left: 0;
}

.vcard-card .vcard {
    border: 1px solid var(--bs-border-color);
    border-top: 0;
    border-right: 0;
    border-left: 0;
}

That’s it! That is all that there is to it. I love Hubzilla!