Pocket inspired theme for Wallabag

custom.css

/*
 * Pocket-inspired theme for Wallabag
 * by soup-bowl - https://github.com/soup-bowl/
 * MIT licensed 2024
 * Tested against Wallabag 2.6.9 
 * https://gist.github.com/soup-bowl/c7633877404a214e4f41010b4d5f4994
 */

@import url("https://fonts.googleapis.com/css2?family=Ledger&display=swap");

:root {
	--grad-color-1: #83ebb8;
	--grad-color-2: #4fb9b5;
	--grad-color-3: #eb4354;
	--grad-color-4: #f9b548;
	/* Gradient */
	--pocket-gradient-smooth: linear-gradient(
		90deg,
		var(--grad-color-1) 0%,
		var(--grad-color-2) 33%,
		var(--grad-color-3) 66%,
		var(--grad-color-4) 100%
	);
	/* Solid */
	--pocket-gradient-block: linear-gradient(
		90deg,
		var(--grad-color-1) 0%,
		var(--grad-color-1) 25%,
		var(--grad-color-2) 25%,
		var(--grad-color-2) 50%,
		var(--grad-color-3) 50%,
		var(--grad-color-3) 75%,
		var(--grad-color-4) 75%,
		var(--grad-color-4) 100%
	);
	--font-primary: roberto, "Helvetica Neue", Helvetica, Arial, sans-serif;
	--background-primary-dark: #1a1a1a;
	--background-primary-light: #ffffff;
	--background-secondary-dark: #333;
	--background-secondary-light: #ffffff;
	--background-translucent-dark: #1a1a1acc;
	--background-translucent-light: #ffffffcc;
	--text-primary-dark: #f2f2f2;
	--text-primary-light: #1a1a1a;
	--text-secondary-dark: #8c8c8c;
	--text-secondary-light: #666;
	--text-highlight: #00a69c;
	--border-color-dark: #404040;
	--border-color-light: #d9d9d9;
	--border-color-secondary-dark: #595959;
	--border-color-secondary-light: #d9d9d9;
	--button-color: #008078;
	--button-hover-color: #004d48;
	--pagination-text-dark: #00ccc0;
	--pagination-text-light: #008078;
	--pagination-background-dark: #333;
	--pagination-background-light: #e8f7f6;

	--pocket-gradient: var(--pocket-gradient-block);
	--background-primary: var(--background-primary-light);
	--background-secondary: var(--background-secondary-light);
	--background-translucent: var(--background-translucent-light);
	--text-primary: var(--text-primary-light);
	--text-secondary: var(--text-secondary-light);
	--border-color: var(--border-color-light);
	--border-color-secondary: var(--border-color-secondary-light);
	--pagination-text: var(--pagination-text-light);
	--pagination-background: var(--pagination-background-light);
	--readable-font: Ledger, Georgia, "Times New Roman", Times, serif;
}

.dark-theme {
	--background-primary: var(--background-primary-dark);
	--background-secondary: var(--background-secondary-dark);
	--background-translucent: var(--background-translucent-dark);
	--text-primary: var(--text-primary-dark);
	--text-secondary: var(--text-secondary-dark);
	--border-color: var(--border-color-dark);
	--border-color-secondary: var(--border-color-secondary-dark);
	--pagination-text: var(--pagination-text-dark);
	--pagination-background: var(--pagination-background-dark);
	color-scheme: dark;
}

body {
	font-family: var(--font-primary);
	background-color: var(--background-primary) !important;
}

.card-panel,
.card-panel .tabs {
	background-color: var(--background-primary) !important;
	box-shadow: none !important;
}

.btn,
.chip,
.card-tag-labels li,
.card-stacked div.metadata .chip {
	background-color: var(--button-color);
}

.btn:hover {
	background-color: var(--button-hover-color);
}

.tabs .tab a,
.tabs .tab a:hover,
.tabs .tab a.active {
	text-transform: none;
	color: var(--text-primary);
}

.tabs .indicator {
	background-color: var(--button-color);
}

/* Navigation Elements */

.nav-panels {
	position: relative;
	padding-bottom: 5px;
}

.nav-panels::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: var(--pocket-gradient);
}

.left-bar {
	background-color: var(--background-primary) !important;
	border-right: solid 1px var(--border-color);
}

.left-bar .border-bottom {
	border-color: var(--border-color);
}

.page-footer {
	border-top: solid 1px var(--border-color);
	background-color: var(--background-primary) !important;
}

.page-footer .footer-copyright {
	color: var(--text-secondary);
	background-color: var(--background-primary) !important;
}

.page-footer .footer-copyright a {
	color: var(--text-primary) !important;
}

.dropdown-content {
	border-radius: 4px;
	border: 1px solid var(--border-color-secondary);
	background-color: var(--background-secondary) !important;
}

.dropdown-content li {
	background-color: var(--background-secondary) !important;
}

.dropdown-content li a {
	color: var(--text-primary);
}

.dropdown-content .divider {
	background-color: var(--border-color-secondary) !important;
}

/* ! Navigation Elements */

/* Login screen */
.login .card {
	border-radius: 4px;
	border: 1px solid var(--border-color-secondary);
	background-color: var(--background-secondary);
	padding-bottom: 5px;
}

.login .card::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: var(--pocket-gradient);
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}

.login .card .card-action {
	border-top: none;
}

.login a {
	color: var(--text-primary);
	text-decoration: underline;
}

.login a:hover {
	color: var(--text-highlight);
}

.login .btn {
	text-transform: none;
}

.login .btn i {
	display: none;
}

.card
	.card-action
	a:not(.btn):not(.btn-large):not(.btn-large):not(.btn-floating) {
	color: var(--text-primary);
	text-transform: none;
}

.card
	.card-action
	a:not(.btn):not(.btn-large):not(.btn-large):not(.btn-floating):hover {
	color: var(--button-color);
}

.login .card:hover {
	background-color: var(--background-secondary);
}
/* ! Login screen */

/* Main View */

.entries .card {
	border-radius: 20px;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
	background-color: var(--background-primary) !important;
}

.card .card-action:last-child {
	border-top: none;
	border-radius: 0 0 20px 20px;
}

.entries .card .card-image {
	height: 12em;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
}

.entries .card .card-title,
.entries .card-stacked .card-title {
	color: var(--text-primary);
	font-weight: 600 !important;
}

.entries .card .card-entry-labels li {
	background-color: var(--background-translucent);
	backdrop-filter: saturate(210%) blur(20px);
}

.entries .card .card-entry-labels li a {
	color: var(--text-primary);
}

.card.archived,
.card-stacked.archived {
	opacity: 0.8;
}

.entries.collection {
	background-color: unset !important;
}

.entries .card-stacked .preview {
	border-radius: 5px;
}

.entries.collection .collection-item {
	margin: 15px 10px 15px 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
	border-radius: 5px;
}

.pagination,
.pagination li a {
	color: var(--pagination-text);
}

.pagination li.active,
.pagination li:not(.active) a:hover {
	border-radius: 50px;
	border: 1px solid var(--border-color);
}

.pagination li.active {
	background-color: var(--pagination-background);
}

.pagination li.active span {
	color: var(--text-primary);
}

/* ! Main View */

/* Content view */
.article {
	background-color: var(--background-primary) !important;
	box-shadow: none !important;
}

.article article {
	font-family: var(--readable-font);
}

.article .entry-info .tools {
	justify-content: center;
}

.article .tags .chip {
	background-color: none;
	border: 1px solid var(--button-color);
	border-radius: 10px;
}

.article .entry-info .tools .tags {
	flex-wrap: wrap;
	justify-content: center;
}

.article .entry-info .chip-label,
.article .entry-info .chip-action,
.article .entry-info .chip i {
	color: var(--text-primary) !important;
	background-color: #ddd0 !important;
}

.article h1 {
	text-align: center;
}

.article a {
	color: var(--button-color);
	border-color: var(--button-color);
}

.article a:hover {
	color: var(--button-hover-color);
	border-color: var(--button-hover-color) !important;
}

.entry .progress {
	display: none;
}
/* ! Content view */

How to use this.

If you're running in Docker like me, I've used the following binding for it:

"./custom.css:/var/www/wallabag/web/custom.css:ro"