Try to reduce theme styles

public/themes/classic.css

@@ -3,7 +3,7 @@
 r4-app {
 	--s-font: 15px;
 	--s: 1rem;
-	--s-radius: 3px;
+	--s-radius: 4px;
 	--font: Maison Neue, system-ui, sans-serif;
 	--s-line-height: 1.3125;
 	--c-light: hsl(0deg 0% 98%);
@@ -12,6 +12,7 @@ r4-app {
 	--c-light--accent: var(--c-purple);
 	--c-dark--accent: #9c8fff;
 	--c-link: var(--c-purple);
+	--c-border: rgba(115, 115, 115, 0.4);
 
 	/* new vars */
 	--c-bg-button: hsl(0, 0%, 98%);
@@ -28,7 +29,7 @@ r4-app button {
 	display: inline-block;
 	font-size: 0.86667rem;
 	font-weight: bold;
-	border: 1px solid rgba(115, 115, 115, 0.4);
+	border: 1px solid var(--c-border);
 	border-radius: var(--s-radius);
 	box-shadow: 0 3px 0 -1px rgba(204, 204, 204, 0.9);
 	box-sizing: border-box;
@@ -47,21 +48,6 @@ r4-app[color-scheme='dark'] button {
 	box-shadow: none;
 }
 
-r4-channel-card {
-	--c-border: rgba(115, 115, 115, 0.4);
-}
-
-/* Control the header sizes */
-r4-app h1 {
-	font-size: 2rem;
-}
-r4-app h2 {
-	font-size: 1.5rem;
-}
-r4-app h3 {
-	font-size: 1rem;
-}
-
 /* Differentiate channels and track lists by using a grid */
 r4-page-explore r4-page-main > r4-list {
 	display: grid;
@@ -70,39 +56,21 @@ r4-page-explore r4-page-main > r4-list {
 	align-items: stretch;
 }
 
-r4-channel-card r4-channel-slug {
-	display: none;
-}
-r4-channel-card r4-channel-description {
-	margin-left: 0.5em;
-}
-
-r4-track-title a {
-	color: var(--text);
-}
-
-/* Ordinary menus */
+/* Nav menus */
 r4-app-menu a,
 r4-page-channel r4-page-header > menu a {
 	padding: var(--s) calc(var(--s) / 2);
 }
 
-r4-track a {
-	text-decoration: none;
-}
-
-r4-list-item r4-track {
-	position: relative;
-  border-bottom: 1px solid var(--c-border);
-	padding: calc(var(--s) / 2) 0;
-	gap: calc(var(--s) / 2);
+/* Channel cards */
+r4-channel-card r4-channel-slug {
+	display: none;
 }
 
-r4-list-item r4-track r4-actions {
-	margin-left: 0.5em;
-	position: absolute;
-	top: 0;
-	right: var(--s);
+r4-list-item r4-track-title a {
+	color: var(--c-fg);
+	padding: 0 var(--s);
+	text-decoration: none;
 }
 
 /* Maison Neue regular/italic + bold/italic from Cloudinary */

public/themes/default.css

@@ -34,10 +34,6 @@ r4-app summary {
 r4-list-item + r4-list-item {
 	margin-top: var(--s);
 }
-r4-list-item > r4-track {
-	flex: 1;
-}
-
 r4-track-description::before,
 r4-track-discogs-url::before,
 r4-track-mentions menu::before,
@@ -55,8 +51,6 @@ r4-channel-url::before {
 r4-track-mentions a::before,
 r4-track-tags a::before {
 	color: var(--c-bg);
-	padding-left: calc(var(--s) / 2);
-	padding-right: calc(var(--s) / 2);
 }
 
 r4-app r4-layout::part(controls-button) {

public/themes/jellybeans.css

@@ -1,6 +1,11 @@
 /**
  * The Jellybeans Theme
  * inspired the vim theme of the same name.
+ *
+ * Light and dark color schemes
+ * Lots of button styles
+ * Tags and Mentions as "pills"
+ * Grid of channel cards
  */
 
 r4-app {
@@ -158,14 +163,14 @@ r4-app button:not(disabled):hover,
 r4-app select:not(disabled):hover {
 	background: var(--c-bg3);
 }
+
 /* Primary buttons */
 r4-app button[type='submit'] {
 	background-color: var(--c-green5);
 }
 r4-app button[type='submit']:hover {
 	background-color: var(--c-green4);
 }
-
 r4-app[color-scheme='dark'] button[type='submit'] {
 	background-color: var(--c-green7);
 }
@@ -206,12 +211,18 @@ r4-channel-card r4-channel-description {
 }
 
 /* Track lists */
+r4-list-item r4-track {
+	border-bottom: 1px solid var(--c-border);
+	padding: calc(var(--s) / 2) 0;
+}
 r4-track-title,
 r4-track-description {
 	font-size: 14px;
 }
 r4-track-title a {
 	color: var(--c-fg);
+	text-decoration: none;
+	margin: 0 0.5em;
 }
 [color-scheme='dark'] r4-track-title a {
 	color: var(--c-gray2);
@@ -224,19 +235,13 @@ r4-track-description {
 }
 /* Tracklist layout for smaller screens */
 @media (max-width: 700px) {
-	r4-track-tags,
-	r4-track-mentions {
+	r4-list-item r4-track-tags,
+	r4-list-item r4-track-mentions {
 		display: none;
 	}
 }
-
-/* Channels */
-r4-channel-name {
-	font-size: 1.25rem;
-}
-r4-channel-description {
-	display: block;
-  margin-left: 0.5em;
+r4-list-item r4-actions {
+	margin-left: auto;
 }
 
 /* Tags and mentions aka labels */
@@ -254,15 +259,6 @@ r4-app[color-scheme='dark'] a[label] {
 	color: var(--c-green3);
 }
 
-/* Channel page */
-r4-channel-name {
-	font-size: 1.25rem;
-}
-r4-page-channel r4-page-header r4-channel-name {
-	/* Like <h1> */
-	font-size: 2rem;
-}
-
 /* Differentiate channels and track lists by using a grid */
 r4-page-explore r4-page-main > r4-list {
 	display: grid;
@@ -271,10 +267,11 @@ r4-page-explore r4-page-main > r4-list {
 	align-items: stretch;
 }
 
-r4-list-item r4-track {
-	border-bottom: 1px solid var(--c-border);
-	padding: calc(var(--s) / 2) 0;
-	gap: calc(var(--s) / 2);
+r4-page-channel r4-page-header r4-channel-name {
+	font-size: 2rem;
+}
+r4-channel-name {
+	font-size: 1.25rem;
 }
 
 /* Ordinary menus */
@@ -283,10 +280,6 @@ r4-page-channel r4-page-header > menu a {
 	padding: var(--s) calc(var(--s) / 2);
 }
 
-r4-track a {
-	text-decoration: none;
-}
-
 /* Player styles */
 r4-layout::part(playback-summary) {
 	/* background: var(--c-link); */
@@ -309,7 +302,3 @@ radio4000-player .PlayerControl-group .Btn {
 	background-color: var(--c-link) !important;
 }
 
-/* Inside lists */
-r4-list-item r4-actions {
-	margin-left: auto;
-}

public/themes/minimal.css

@@ -0,0 +1 @@
+/* Nothing here. This is like not choosing a theme. */

src/index.css

@@ -14,6 +14,8 @@ r4-app {
 	/* reference functional variables using the colors */
 	--c-fg: inherit;
 	--c-bg: inherit;
+	--c-light: inherit;
+	--c-dark: inherit;
 }
 
 r4-app[color-scheme='dark'] {

src/libs/appearence.js

@@ -1,4 +1,4 @@
-const THEMES = ['default', 'classic', 'jellybeans']
+const THEMES = ['minimal', 'default', 'classic', 'jellybeans']
 const COLOR_SCHEMES = ['os', 'light', 'dark']
 const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches