Personalize Miniflux with a custom color theme that seamlessly adapts to light and dark modes.
Work in progress.
Miniflux - custom colors by tidy-easy-stockade
Details
Authortidy-easy-stockade
LicenseCopyleft
Categoryminiflux
Created
Updated
Code size6.7 kB
Code checksum77364689
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Choose your colors in the Stylus settings.
Done mainly for me, but you are welcome to suggest changes: empty.post2771@fastmail.com
Source code
/* ==UserStyle==
@name Miniflux - custom colors
@version 20250404.21.52
@namespace userstyles.world/user/tidy-easy-stockade
@description Custom colors for Miniflux.
@author tidy-easy-stockade
@license Copyleft
@preprocessor stylus
@var color baseColor "Base Theme Color" #191f23
@var color accentColor "Accent Theme Color" #191f23
@var checkbox menuInRows "Enable menu in rows on smaller screens" 0
==/UserStyle== */
adjustColor(color, percent)
isLight = lightness(color) > 50
if isLight
darken(color, percent)
else
lighten(color, percent)
@-moz-document regexp("https?://(.*\\.)?miniflux(-\\w+)*\\..*")
if accentColor == baseColor
accentColor = complement(baseColor)
:root
--body-background: adjustColor(baseColor, 0%)
--body-color: adjustColor(baseColor, 80%)
--logo-color: adjustColor(baseColor, 80%)
--title-color: adjustColor(baseColor, 80%)
--subtitle-color: adjustColor(baseColor, 70%)
--page-header-title-color: adjustColor(baseColor, 80%)
--page-header-title-border-color: adjustColor(baseColor, 20%)
--link-color: adjustColor(baseColor, 80%)
--link-hover-color: adjustColor(accentColor, 80%)
--header-link-color: adjustColor(baseColor, 80%)
--header-link-hover-color: adjustColor(accentColor, 60%)
--header-link-focus-color: adjustColor(accentColor, 80%)
--header-active-link-color: adjustColor(accentColor, 60%)
/* Alerts */
--alert-background-color: adjustColor(baseColor, 10%)
--alert-color: adjustColor(baseColor, 80%)
--alert-border-color: adjustColor(baseColor, 15%)
--alert-success-background-color: adjustColor(accentColor, 10%)
--alert-success-color: adjustColor(accentColor, 80%)
--alert-success-border-color: adjustColor(accentColor, 15%)
--alert-error-background-color: adjustColor(accentColor, 10%)
--alert-error-color: adjustColor(accentColor, 80%)
--alert-error-border-color: adjustColor(accentColor, 15%)
/* Feed Item */
--item-status-read-title-link-color: adjustColor(baseColor, 40%)
--item-border-color: adjustColor(baseColor, 30%)
--category-background-color: adjustColor(baseColor, 8%)
--category-color: adjustColor(baseColor, 80%)
--category-link-color: adjustColor(baseColor, 80%)
--category-border-color: adjustColor(baseColor, 20%)
--item-meta-focus-color: adjustColor(baseColor, 60%)
--entry-header-title-link-color: adjustColor(baseColor, 80%)
/* Feed Parsing Error */
--feed-parsing-error-background-color: adjustColor(accentColor, 5%)
--feed-parsing-error-border-color: adjustColor(accentColor, 15%)
/* Feed Has Unread */
--feed-has-unread-background-color: adjustColor(baseColor, 3%)
--feed-has-unread-border-color: adjustColor(baseColor, 15%)
/* Pagination */
--pagination-link-color: adjustColor(baseColor, 60%)
/* Miniflux.app */
--dt-color: adjustColor(baseColor, 60%)
--dd-color: adjustColor(baseColor, 70%)
/* Settings */
--input-background: adjustColor(baseColor, 5%)
--input-color: adjustColor(baseColor, 80%)
--input-border: 1px solid adjustColor(baseColor, 15%)
--input-placeholder-color: adjustColor(baseColor, 50%)
--input-focus-border-color: adjustColor(accentColor, 35%)
--input-focus-box-shadow: 0 0 8px adjustColor(accentColor, 35%)
--button-primary-background: adjustColor(baseColor, 10%)
--button-primary-color: adjustColor(baseColor, 80%)
--button-primary-border-color: adjustColor(baseColor, 20%)
--button-primary-focus-background: adjustColor(accentColor, 10%)
--button-primary-focus-color: adjustColor(accentColor, 80%)
--button-primary-focus-border-color: adjustColor(accentColor, 20%)
--table-th-background: adjustColor(baseColor, 5%)
--table-th-color: adjustColor(baseColor, 80%)
--table-border-color: adjustColor(baseColor, 10%)
--table-tr-hover-background-color: adjustColor(baseColor, 10%)
--table-tr-hover-color: adjustColor(baseColor, 80%)
--panel-background: adjustColor(baseColor, 5%)
--panel-color: adjustColor(baseColor, 80%)
--panel-border-color: adjustColor(baseColor, 10%)
body
padding: 0 1em
.confirm
&, button
color: adjustColor(accentColor, 60%)
button
&:hover
color: adjustColor(accentColor, 80%)
.disabled
opacity: .4
h1, h2
padding-bottom: .5em
border-bottom: 1px solid var(--page-header-title-border-color)
.header
.logo
span
color: adjustColor(accentColor, 60%)
ul
list-style-type: none
&.js-menu-show
if menuInRows
display: flex
flex-wrap: wrap
column-gap: 1em
li
flex: 0 0 24%
padding-left: 0
li
a
&:hover
color: adjustColor(accentColor, 70%)
.page-header
h1
font-size: 1.35em
a
&:hover
color: adjustColor(accentColor, 70%)
nav
margin-top: 1em
.items
margin: 1em 0
.item
padding: .5em
h1, h2
padding-bottom: 0
border-bottom: none
&-meta
font-size: .85em
a
color: adjustColor(accentColor, 60%)
:is(a:is(:focus, :hover), button:is(:focus, :hover))
color: adjustColor(accentColor, 80%)
&-info
font-size: inherit
margin-top: .5em
&-icons
margin-top: .5em
li
> :is(a, button)
color: adjustColor(baseColor, 60%)
font-size: inherit
.entry
header
border-bottom-style: solid
border-bottom-color: adjustColor(baseColor, 10%)
h1
a
&:hover
color: adjustColor(accentColor, 60%)
&:focus
color: adjustColor(accentColor, 80%)
&-meta
color: adjustColor(baseColor, 60%)
.entry-website
a
color: adjustColor(accentColor, 60%)
&-date
color: adjustColor(baseColor, 40%)
&-content
color: adjustColor(baseColor, 80%)
figcaption
color: currentColor
.pagination
a
color: inherit
&:hover
color: adjustColor(accentColor, 60%)
&-next
&-last
color: var(--pagination-link-color)
&-entry-bottom
border-top-style: solid
border-top-color: adjustColor(baseColor, 10%)
dd
border-color: currentColor
/* Settings */
fieldset
border-color: adjustColor(baseColor, 30%)
&:focus-within
border-color: adjustColor(accentColor, 30%)
input[type="search"],
input[type="url"],
input[type="password"],
input[type="text"],
input[type="number"],
select
background-color: var(--input-background)
color: var(--input-color)
margin: .3em 0 1em
padding: .5em 1em
border: var(--input-border)
&:focus
border-color: var(--input-focus-border-color)
box-shadow: var(--input-focus-box-shadow)
.form-help
color: adjustColor(accentColor, 60%)
margin-top: -.8em