Theme.Park CSS Theming

[deathbybandaid]

If you're not aware of Theme.Park, It allows theming apps by utilizing a theme file + a "base" theme file.

I spent my morning making my selfoss instance look like plex utilizing the Plex theme.park theme

Below, you'll find the "base" theme I've created for selfoss. In theory, this "base" theme could be used with all of the Theme Options from theme.park. What I've done could possibly be improved and made into a PR for the theme.park repo. Doing so could also potentially make more selfhosters aware of Selfoss.

I run my instance of Selfoss via nginx, so applying the theme is as easy as Applying via the Subfilter method (also works with Apache and others):

            sub_filter
            '</head>'
            '<link rel="stylesheet" type="text/css" href="https://MYDOMAIN/path/selfoss-base.css">
            <link rel="stylesheet" type="text/css" href="https://raw.githubusercontent.com/GilbN/theme.park/master/css/theme-options/plex.css">
            </head>';
            sub_filter_once on;

How it looks as plex:

/* base */

body {
    background: var(--main-bg-color);
    background-repeat: repeat, no-repeat;
    background-attachment: fixed, fixed;
    background-position: center center, center center;
    background-size: auto, cover;
    -webkit-background-size: auto, cover;
    -moz-background-size: auto, cover;
    -o-background-size: auto, cover;
    color: var(--text);
}

select,
input {
    border: solid 1px var(--link-color);
}

/* navigation */

#nav {
    background: var(--drop-down-menu-bg);
    border-right: 5px solid var(--accent-color);
}

#nav hr {
    border-bottom: 1px solid var(--accent-color);
}

#nav-mark {
    color: var(--button-text);
    background: var(--button-color);
}

#nav-mark[disabled],
#nav-mark[disabled]:hover {
    background: var(--button-color-hover);
    color: var(--button-text-hover);
}

#nav-mark:hover {
    background: var(--button-color-hover);
    color: var(--button-text-hover);
}

#nav-filter li a {
    color: var(--text);
}

#nav-filter li a.active {
    background: var(--modal-bg-color);
    color: var(--button-color-hover);
}

#nav-filter span {
    color: var(--text-muted);
}

.unread-count.unread {
    background-color: var(--accent-color-hover);
    color: var(--button-text) !important;
}

.unread-count.unread span {
    color: var(--button-text) !important;
}

.unread-count.unread.offline {
    background-color: var(--text);
}

span.offline-count {
    color: var(--accent-color-hover) !important;
}

.unread-count span.offline-count {
    color: var(--text) !important;
}

span.offline-count::after {
    color: var(--text) !important;
}

.unread-count span.offline-count::after {
    color: var(--text) !important;
}

.nav-section-toggle {
    color: var(--text-muted);
}

.nav-unavailable.offline {
    color: var(--text);
}

#nav-tags li a {
    color: var(--text-muted);
}

#nav-tags li a.active {
    background: var(--modal-bg-color);
    color: var(--link-color);
}

#nav-sources li a {
    color: var(--text-muted);
}

#nav-sources li a.active {
    background: var(--modal-bg-color);
    color: var(--text-hover);
}

#nav .unread {
    color: var(--link-color);
}

.nav-toolbar button,
.nav-toolbar a {
    background: var(--button-color);
    color: var(--button-text);
}

.nav-toolbar button.offline {
    border: solid var(--link-color) 1px;
}

.nav-ts-wrapper::-webkit-scrollbar-thumb {
    background: var(--button-color);
}

.nav-ts-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--button-color-hover);
}

.nav-ts-wrapper::-webkit-scrollbar-thumb:active {
    background: var(--accent-color-hover);
}

/* search */

#search {
    color: var(--button-text);
    background-color: var(--button-color);
}

#search-list li {
    color: var(--label-text-color);
    background-color: var(--button-color);
    border-right: 6px solid var(--button-color);
}

#search-list .regex-search-term {
    background-color: var(--button-color);
    border-right-color: var(--button-color);
}

/* content */

.entry,
.source {
    background: var(--modal-header-color);
}

.entry.selected {
    border: solid 1px var(--link-color);
}

.entry .found {
    color: var(--label-text-color);
    background: var(--modal-bg-color);
}

.entry-title {
    color: var(--text-muted);
}

.entry-title a {
    color: var(--text-muted);
}

.entry.unread .entry-title {
    color: var(--button-text);
}

.entry-content a {
    color: var(--text);
}

.entry-content blockquote {
    border-left: 2px solid var(--text);
}

.entry.selected.unread, .entry.unread {
    border-left: 3px solid var(--link-color);
}

.entry-author,
.entry-readtime,
.entry-source,
.entry-separator,
.entry-datetime {
    color: var(--text-muted);
}

.entry-toolbar {
    border-top: 1px solid var(--link-color);
    background: var(--modal-footer-color);
}

.stream-more,
.mark-these-read,
.stream-error {
    color: var(--text-muted);
}

.source-title {
    display: inline;
    color: var(--text-muted);
}

.source-edit-delete,
.source-days,
.source-action {
    color: var(--button-text);
}

.source-showparams,
.source-delete,
.source-save,
.source-cancel {
    color: var(--button-color);
}

.source-edit-form {
    color: var(--text-muted);
}

.source-edit-form .source-edit-form-help {
    color: var(--button-color);
}

.source-showparams.saved {
    color: var(--link-color);
}

.source-add {
    color: var(--button-color);
}

.refresh-source {
    color: var(--button-color);
}

.source-export,
.source-opml {
    color: var(--accent-color-hover);
}

/* opml import */
#opml .success {
    background-color: var(--button-color);
}

#opml input {
    margin-top: 30px;
    background: var(--button-color);
}

[jtojnar]

Interesting.

I want to use CSS variables in the stylesheet, which would make implementing a dark theme and custom themes like this simpler.

Also note that you can create user.css file in your selfoss directory and it will be loaded.

[deathbybandaid]

I used the user.css with v2.18, but it didn't seem to work for me earlier today when I tried with 2.19, but maybe it was just a fluke.

[jtojnar]

I use if for the dark theme, maybe check the nginx config.

[deathbybandaid]

Okay, so I'm going to kinda spam this thread, but I'm really impressed with the theme.park stuff

[deathbybandaid]

Here's what Selfoss looks like with the Officially supported Themes from Theme.Park

Aquamarine

Dark

Dracula

Hotline

Hotpink

Nord

Organizr

Overseerr

Plex

Space Gray

[deathbybandaid]

I tested a few of the community-themes and they seem to work alright

[deathbybandaid]

I'd also assume the contents of user.css (in the future) could be as simple as

@import url("https://raw.githubusercontent.com/GilbN/theme.park/master/css/themes/selfoss/selfoss-base.css");
@import url("https://raw.githubusercontent.com/GilbN/theme.park/master/css/theme-options/plex.css");

[deathbybandaid]

Updated above base css with the webkit scrollbar stuff as per https://github.com/fossar/selfoss/issues/1305#issuecomment-1007887965

[deathbybandaid]

Scrollbar

Scrollbar Hover

Scrollbar Active