Rename template.css (#4644)

* Fix conflicts

* Update doc

* Misses

* Update prefix in CSS

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

16 files changed, 207 insertions, 207 deletions

diff --git a/p/themes/Alternative-Dark/metadata.json b/p/themes/Alternative-Dark/metadata.json
index ea97e9fa0..707ed1da5 100644
--- a/p/themes/Alternative-Dark/metadata.json
+++ b/p/themes/Alternative-Dark/metadata.json
@@ -3,5 +3,5 @@
   "author": "Ghost",
   "description": "Save my eyes!!!",
   "version": 0.1,
-  "files": ["_template.css", "adark.css"]
+  "files": ["_frss.css", "adark.css"]
 }
diff --git a/p/themes/Ansum/metadata.json b/p/themes/Ansum/metadata.json
index c76c3fa9c..23b1a96cc 100644
--- a/p/themes/Ansum/metadata.json
+++ b/p/themes/Ansum/metadata.json
@@ -3,5 +3,5 @@
   "author": "Thomas Guesnon",
   "description": "Thème sablonneux",
   "version": 0.1,
-  "files": ["_template.css", "ansum.css"]
+  "files": ["_frss.css", "ansum.css"]
 }
diff --git a/p/themes/BlueLagoon/metadata.json b/p/themes/BlueLagoon/metadata.json
index 71f364ad9..7822d7346 100644
--- a/p/themes/BlueLagoon/metadata.json
+++ b/p/themes/BlueLagoon/metadata.json
@@ -3,5 +3,5 @@
   "author": "Mister aiR",
   "description": "C’est un cocktail (bis)! C’est la version plus fresh de Screwdriver. C’est… c’est… un thème pour l’agrégateur de flux RSS FreshRSS. En toute modestie, ce thème tue du Nyan Cat.",
   "version": 1.0,
-  "files": ["_template.css","BlueLagoon.css"]
+  "files": ["_frss.css","BlueLagoon.css"]
 }
diff --git a/p/themes/Dark-pink/metadata.json b/p/themes/Dark-pink/metadata.json
index 0d69fa2d6..7e582eefd 100644
--- a/p/themes/Dark-pink/metadata.json
+++ b/p/themes/Dark-pink/metadata.json
@@ -3,5 +3,5 @@
   "author": "Miicat_47",
   "description": "Nice dawk pink theme. >_< UwU",
   "version": 0.1,
-  "files": ["_template.css", "../Alternative-Dark/adark.css", "pinkdark.css"]
+  "files": ["_frss.css", "../Alternative-Dark/adark.css", "pinkdark.css"]
 }
diff --git a/p/themes/Dark/metadata.json b/p/themes/Dark/metadata.json
index 7a85bd6cf..b38428995 100644
--- a/p/themes/Dark/metadata.json
+++ b/p/themes/Dark/metadata.json
@@ -3,5 +3,5 @@
 	"author": "AD",
 	"description": "The dark side of the “Origine” theme",
 	"version": 0.2,
-	"files": ["_template.css", "dark.css"]
+	"files": ["_frss.css", "dark.css"]
 }
diff --git a/p/themes/Flat/metadata.json b/p/themes/Flat/metadata.json
index 3afdc98af..27a83fe83 100644
--- a/p/themes/Flat/metadata.json
+++ b/p/themes/Flat/metadata.json
@@ -3,5 +3,5 @@
   "author": "Marien Fressinaud",
   "description": "Thème plat pour FreshRSS",
   "version": 0.2,
-  "files": ["_template.css", "flat.css"]
-}
\ No newline at end of file
+  "files": ["_frss.css", "flat.css"]
+}
diff --git a/p/themes/Mapco/metadata.json b/p/themes/Mapco/metadata.json
index 24bb04b87..353d0908a 100644
--- a/p/themes/Mapco/metadata.json
+++ b/p/themes/Mapco/metadata.json
@@ -3,5 +3,5 @@
   "author": "Thomas Guesnon",
   "description": "Thème pour FreshRSS",
   "version": 0.1,
-  "files": ["_template.css", "mapco.css"]
+  "files": ["_frss.css", "mapco.css"]
 }
diff --git a/p/themes/Nord/metadata.json b/p/themes/Nord/metadata.json
index aaaf64c44..eeb9ef808 100644
--- a/p/themes/Nord/metadata.json
+++ b/p/themes/Nord/metadata.json
@@ -3,5 +3,5 @@
   "author": "joelchrono12",
   "description": "A simple theme based on Nord's color scheme",
   "version": 0.1,
-  "files": ["_template.css","nord.css"]
+  "files": ["_frss.css","nord.css"]
 }
diff --git a/p/themes/Origine-compact/metadata.json b/p/themes/Origine-compact/metadata.json
index 67038e173..ded2f0616 100644
--- a/p/themes/Origine-compact/metadata.json
+++ b/p/themes/Origine-compact/metadata.json
@@ -3,5 +3,5 @@
   "author": "Kevin Papst",
   "description": "A theme that tries to use the screen size more efficiently, based on Origine",
   "version": 0.1,
-  "files": ["_template.css", "../Origine/origine.css", "origine-compact.css"]
+  "files": ["_frss.css", "../Origine/origine.css", "origine-compact.css"]
 }
diff --git a/p/themes/Origine/metadata.json b/p/themes/Origine/metadata.json
index 774320eb4..721f9af8b 100644
--- a/p/themes/Origine/metadata.json
+++ b/p/themes/Origine/metadata.json
@@ -3,5 +3,5 @@
   "author": "Marien Fressinaud",
   "description": "Le thème par défaut pour FreshRSS",
   "version": 0.2,
-  "files": ["_template.css", "origine.css"]
+  "files": ["_frss.css", "origine.css"]
 }
diff --git a/p/themes/Pafat/metadata.json b/p/themes/Pafat/metadata.json
index ba82e0a09..f70442378 100644
--- a/p/themes/Pafat/metadata.json
+++ b/p/themes/Pafat/metadata.json
@@ -3,5 +3,5 @@
   "author": "Plopoyop",
   "description": "Un thème pour FreshRSS",
   "version": 0.2,
-  "files": ["_template.css", "pafat.css"]
+  "files": ["_frss.css", "pafat.css"]
 }
diff --git a/p/themes/Screwdriver/metadata.json b/p/themes/Screwdriver/metadata.json
index f07769d6a..08654e51d 100644
--- a/p/themes/Screwdriver/metadata.json
+++ b/p/themes/Screwdriver/metadata.json
@@ -3,5 +3,5 @@
   "author": "Mister aiR",
   "description": "C’est un cocktail ! C’est chaud mais « fresh » à la fois. Ce thème tue du chaton.",
   "version": 1.1,
-  "files": ["_template.css","screwdriver.css"]
+  "files": ["_frss.css","screwdriver.css"]
 }
diff --git a/p/themes/Swage/metadata.json b/p/themes/Swage/metadata.json
index a81c10cfd..d51b026cc 100644
--- a/p/themes/Swage/metadata.json
+++ b/p/themes/Swage/metadata.json
@@ -3,5 +3,5 @@
   "author": "Patrick Crandol",
   "description": "A Fresh take on the interface, inspired by the Flat Theme.",
   "version": 1.0,
-  "files": ["_template.css", "swage.css"]
+  "files": ["_frss.css", "swage.css"]
 }
diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/frss.css
index 08c5623ac..56a314664 100644
--- a/p/themes/base-theme/template.css
+++ b/p/themes/base-theme/frss.css
@@ -3,40 +3,40 @@
 /*=== GENERAL */
 /*============*/
 :root {
-	--template-font-color-dark: #000;
-	--template-font-color-grey-dark: #666;
-	--template-font-color-grey-light: #aaa;
-	--template-font-color-light: #fff;
-	--template-background-color-error-transparent: #ff000040;
-	--template-font-color-error: #f00;
+	--frss-font-color-dark: #000;
+	--frss-font-color-grey-dark: #666;
+	--frss-font-color-grey-light: #aaa;
+	--frss-font-color-light: #fff;
+	--frss-background-color-error-transparent: #ff000040;
+	--frss-font-color-error: #f00;
 
-	--template-background-color: #fff;
-	--template-background-color-transparent: #ffffff7f;
-	--template-background-color-middle: #eee;
-	--template-background-color-dark: #ccc;
+	--frss-background-color: #fff;
+	--frss-background-color-transparent: #ffffff7f;
+	--frss-background-color-middle: #eee;
+	--frss-background-color-dark: #ccc;
 
-	--template-border-color: #999;
-	--template-border-color-error: #f00;
+	--frss-border-color: #999;
+	--frss-border-color-error: #f00;
 
-	--template-switch-accent-color: #85d885;
+	--frss-switch-accent-color: #85d885;
 
-	--template-dragdrop-color: #ff0;
-	--template-dragdrop-color-transparent: #ff02;
+	--frss-dragdrop-color: #ff0;
+	--frss-dragdrop-color-transparent: #ff02;
 
-	--template-noThumbnailImage-background-color: #ddd;
+	--frss-noThumbnailImage-background-color: #ddd;
 
-	--template-darken-background-hover-transparent: #6662;
+	--frss-darken-background-hover-transparent: #6662;
 
-	--template-modal-background-color-transparent: #0007;
+	--frss-modal-background-color-transparent: #0007;
 
-	--template-box-shadow-color-transparent: #0003;
+	--frss-box-shadow-color-transparent: #0003;
 
-	--template-scrollbar-handle: #0002;
-	--template-scrollbar-handle-hover: #0005;
-	--template-scrollbar-track: #0001;
-	--template-scrollbar-track-hover: #0001;
+	--frss-scrollbar-handle: #0002;
+	--frss-scrollbar-handle-hover: #0005;
+	--frss-scrollbar-track: #0001;
+	--frss-scrollbar-track-hover: #0001;
 
-	--template-loading-image: url("loader.gif");
+	--frss-loading-image: url("loader.gif");
 }
 
 @font-face {
@@ -51,7 +51,7 @@
 html, body {
 	margin: 0;
 	padding: 0;
-	background-color: var(--template-background-color);
+	background-color: var(--frss-background-color);
 	height: 100%;
 	font-family: "OpenSans", "Cantarell", "Helvetica", "Arial", sans-serif;
 	font-size: 100%;
@@ -123,11 +123,11 @@ sup {
 }
 
 kbd {
-	background-color: var(--template-background-color-middle);
+	background-color: var(--frss-background-color-middle);
 	padding: 2px 4px 2px 24px;
 	display: inline-block;
-	color: var(--template-font-color-grey-dark);
-	border: 1px solid var(--template-border-color);
+	color: var(--frss-font-color-grey-dark);
+	border: 1px solid var(--frss-border-color);
 	border-radius: 3px;
 	text-indent: -20px;
 	white-space: pre-wrap;
@@ -246,7 +246,7 @@ textarea[rows="2"] {
 }
 
 textarea:invalid {
-	border: 2px dashed var(--template-border-color-error);
+	border: 2px dashed var(--frss-border-color-error);
 }
 
 .prompt textarea,
@@ -262,9 +262,9 @@ input:disabled,
 select:disabled {
 	background-color: transparent;
 	min-width: 75px;
-	color: var(--template-font-color-grey-light);
+	color: var(--frss-font-color-grey-light);
 	font-style: italic;
-	border: 1px dashed var(--template-border-color);
+	border: 1px dashed var(--frss-border-color);
 }
 
 input[type="radio"],
@@ -317,7 +317,7 @@ button.as-link:active {
 }
 
 button.as-link[disabled] {
-	color: var(--template-font-color-grey-light) !important;
+	color: var(--frss-font-color-grey-light) !important;
 }
 
 /*=== Tables */
@@ -455,7 +455,7 @@ a.btn {
 	height: 1.75em;
 	border: 0;
 	border-radius: 1em;
-	background-color: var(--template-background-color-dark);
+	background-color: var(--frss-background-color-dark);
 	cursor: pointer;
 	box-sizing: content-box;
 	background-repeat: no-repeat;
@@ -471,7 +471,7 @@ a.btn {
 }
 
 .switch.active {
-	background-color: var(--template-switch-accent-color);
+	background-color: var(--frss-switch-accent-color);
 	background-repeat: no-repeat;
 	background-position: center center;
 	background-image: url('../icons/enabled.svg');
@@ -502,7 +502,7 @@ a.btn {
 	top: 0.2em;
 	width: 1.5em;
 	height: 1.5em;
-	background-color: var(--template-background-color);
+	background-color: var(--frss-background-color);
 	background-image: url('../icons/disabled.svg');
 	background-repeat: no-repeat;
 	background-position: center center;
@@ -511,7 +511,7 @@ a.btn {
 }
 
 .switch:not([disabled]):hover::before {
-	background-color: var(--template-background-color-middle);
+	background-color: var(--frss-background-color-middle);
 }
 
 .switch.active::before {
@@ -544,7 +544,7 @@ a.btn {
 
 .btn:focus-visible,
 input[type="checkbox"]:focus-visible {
-	outline: 2px solid var(--template-border-color);
+	outline: 2px solid var(--frss-border-color);
 }
 
 /*=== Navigation */
@@ -614,9 +614,9 @@ input[type="checkbox"]:focus-visible {
 
 .dropdown-menu {
 	margin: 0;
-	background-color: var(--template-background-color);
+	background-color: var(--frss-background-color);
 	display: none;
-	border: 1px solid var(--template-border-color);
+	border: 1px solid var(--frss-border-color);
 	min-width: 200px;
 	position: absolute;
 	right: 0;
@@ -628,7 +628,7 @@ input[type="checkbox"]:focus-visible {
 	height: 10px;
 	border-width: 1px 0 0 1px;
 	border-style: solid;
-	border-color: var(--template-border-color);
+	border-color: var(--frss-border-color);
 	content: "";
 	position: absolute;
 	top: -6px;
@@ -696,7 +696,7 @@ input[type="checkbox"]:focus-visible {
 .separator {
 	display: block;
 	height: 0;
-	border-bottom: 1px solid var(--template-border-color);
+	border-bottom: 1px solid var(--frss-border-color);
 }
 
 /*=== Alerts */
@@ -741,7 +741,7 @@ input[type="checkbox"]:focus-visible {
 	margin: 0 0 5em;
 	padding: 1em 0;
 	width: 100%;
-	border-top: 1px solid var(--template-border-color);
+	border-top: 1px solid var(--frss-border-color);
 	text-align: center;
 }
 
@@ -850,7 +850,7 @@ input[type="checkbox"]:focus-visible {
 }
 
 .dragging {
-	background-color: var(--template-dragdrop-color)
+	background-color: var(--frss-dragdrop-color)
 }
 
 .dragging .icon {
@@ -862,17 +862,17 @@ input[type="checkbox"]:focus-visible {
 }
 
 .drag-active .drop-zone:not(.drag-disallowed) {
-	background: repeating-linear-gradient(45deg, transparent, transparent 40px, var(--template-dragdrop-color-transparent) 40px, var(--template-dragdrop-color-transparent) 60px);
+	background: repeating-linear-gradient(45deg, transparent, transparent 40px, var(--frss-dragdrop-color-transparent) 40px, var(--frss-dragdrop-color-transparent) 60px);
 }
 
 .drag-active .drag-hover.drop-zone {
-	background-color: var(--template-dragdrop-color-transparent);
+	background-color: var(--frss-dragdrop-color-transparent);
 	transition: background 0.5s;
 }
 
 li.drag-hover {
 	margin: 0 0 5px;
-	border-bottom: 2px solid var(--template-border-color);
+	border-bottom: 2px solid var(--frss-border-color);
 }
 
 .drag-drop {
@@ -882,11 +882,11 @@ li.drag-hover {
 
 @keyframes droppedKeyframe {
 	0% {
-		background-color: var(--template-dragdrop-color-transparent);
+		background-color: var(--frss-dragdrop-color-transparent);
 	}
 
 	50% {
-		background-color: var(--template-dragdrop-color);
+		background-color: var(--frss-dragdrop-color);
 	}
 
 	100% {
@@ -899,38 +899,38 @@ li.drag-hover {
 @supports (scrollbar-width: thin) {
 	#sidebar,
 	.scrollbar-thin {
-		scrollbar-color: var(--template-scrollbar-handle) var(--template-scrollbar-track);
+		scrollbar-color: var(--frss-scrollbar-handle) var(--frss-scrollbar-track);
 		scrollbar-width: thin;
 	}
 
 	#sidebar:hover,
 	.scrollbar-thin:hover {
-		scrollbar-color: var(--template-scrollbar-handle-hover) var(--template-scrollbar-track-hover);
+		scrollbar-color: var(--frss-scrollbar-handle-hover) var(--frss-scrollbar-track-hover);
 	}
 }
 
 @supports not (scrollbar-width: thin) {
 	#sidebar::-webkit-scrollbar,
 	.scrollbar-thin::-webkit-scrollbar {
-		background-color: var(--template-scrollbar-track);
+		background-color: var(--frss-scrollbar-track);
 		width: 8px;
 	}
 
 	#sidebar:hover::-webkit-scrollbar,
 	.scrollbar-thin:hover::-webkit-scrollbar {
-		background-color: var(--template-scrollbar-track-hover);
+		background-color: var(--frss-scrollbar-track-hover);
 	}
 
 	#sidebar::-webkit-scrollbar-thumb,
 	.scrollbar-thin::-webkit-scrollbar-thumb {
-		background-color: var(--template-scrollbar-handle);
+		background-color: var(--frss-scrollbar-handle);
 		display: unset;
 		border-radius: 5px;
 	}
 
 	#sidebar:hover::-webkit-scrollbar-thumb,
 	.scrollbar-thin:hover::-webkit-scrollbar-thumb {
-		background-color: var(--template-scrollbar-handle-hover);
+		background-color: var(--frss-scrollbar-handle-hover);
 	}
 }
 
@@ -1089,7 +1089,7 @@ input[type="search"] {
 #panel .close:hover,
 #slider .toggle_aside:hover,
 .dropdown-menu .toggle_aside:hover {
-	background-color: var(--template-darken-background-hover-transparent);
+	background-color: var(--frss-darken-background-hover-transparent);
 }
 
 /*=== New article notification */
@@ -1148,7 +1148,7 @@ a.website:hover .favicon {
 }
 
 .flux:not(.current):hover .item.title {
-	background-color: var(--template-background-color);
+	background-color: var(--frss-background-color);
 	max-width: calc(100% - 320px);
 	position: absolute;
 }
@@ -1158,7 +1158,7 @@ a.website:hover .favicon {
 }
 
 .flux .item.title a {
-	color: var(--template-font-color-dark);
+	color: var(--frss-font-color-dark);
 	text-decoration: none;
 }
 
@@ -1197,7 +1197,7 @@ a.website:hover .favicon {
 }
 
 .flux .item.thumbnail img {
-	background: repeating-linear-gradient( -45deg, var(--template-noThumbnailImage-background-color), var(--template-noThumbnailImage-background-color) 5px, transparent 5px, transparent 10px );
+	background: repeating-linear-gradient( -45deg, var(--frss-noThumbnailImage-background-color), var(--frss-noThumbnailImage-background-color) 5px, transparent 5px, transparent 10px );
 	display: inline-block;
 	width: 100%;
 	height: 100%;
@@ -1207,7 +1207,7 @@ a.website:hover .favicon {
 
 .flux .item.title .summary {
 	max-height: 3em;
-	color: var(--template-font-color-grey-dark);
+	color: var(--frss-font-color-grey-dark);
 	font-size: 0.9em;
 	line-height: 1.5em;
 	font-weight: normal;
@@ -1218,7 +1218,7 @@ a.website:hover .favicon {
 
 .flux .item.title .author {
 	padding-left: 1rem;
-	color: var(--template-font-color-grey-dark);
+	color: var(--frss-font-color-grey-dark);
 	font-size: .9rem;
 	font-weight: normal;
 }
@@ -1276,14 +1276,14 @@ a.website:hover .favicon {
 
 .content > header,
 .content > footer {
-	color: var(--template-font-color-grey-light);
+	color: var(--frss-font-color-grey-light);
 	font-size: .9rem;
 }
 
 .content > footer {
 	margin: 2rem 0 2rem;
 	padding-top: 1rem;
-	border-top: 2px solid var(--template-border-color);
+	border-top: 2px solid var(--frss-border-color);
 	clear: both;
 }
 
@@ -1356,8 +1356,8 @@ br {
 	top: 1em;
 	left: 25%; right: 25%;
 	z-index: 9999;
-	background-color: var(--template-background-color);
-	border: 1px solid var(--template-border-color);
+	background-color: var(--frss-background-color);
+	border: 1px solid var(--frss-border-color);
 	opacity: 1;
 	line-height: 2;
 	visibility: visible;
@@ -1377,7 +1377,7 @@ br {
 }
 
 .notification a.close:hover {
-	background-color: var(--template-darken-background-hover-transparent);
+	background-color: var(--frss-darken-background-hover-transparent);
 }
 
 .notification a.close:hover .icon {
@@ -1407,7 +1407,7 @@ br {
 	width: 100%;
 	height: 100%;
 	overflow: auto;
-	background-color: var(--template-modal-background-color-transparent);
+	background-color: var(--frss-modal-background-color-transparent);
 }
 
 #popup-content {
@@ -1416,9 +1416,9 @@ br {
 	width: 80%;
 	height: 80%;
 	overflow: hidden;
-	background-color: var(--template-background-color);
+	background-color: var(--frss-background-color);
 	border-radius: .25rem;
-	box-shadow: 3px 3px 5px var(--template-box-shadow-color-transparent);
+	box-shadow: 3px 3px 5px var(--frss-box-shadow-color-transparent);
 }
 
 .popup-row {
@@ -1431,14 +1431,14 @@ br {
 	width: 27px;
 	height: 27px;
 	padding-bottom: 5px;
-	color: var(--template-font-color-grey-light);
+	color: var(--frss-font-color-grey-light);
 	font-size: 28px;
 	font-weight: bold;
 }
 
 #popup-close:hover,
 #popup-close:focus {
-	color: var(--template-font-color-dark);
+	color: var(--frss-font-color-dark);
 	text-decoration: none;
 	cursor: pointer;
 }
@@ -1489,12 +1489,12 @@ br {
 #load_more.loading,
 #load_more.loading:hover {
 	padding: 10px 20px;
-	background: var(--template-loading-image) center center no-repeat var(--template-background-color);
+	background: var(--frss-loading-image) center center no-repeat var(--frss-background-color);
 	font-size: 0;
 }
 
 .loading {
-	background: var(--template-loading-image) center center no-repeat;
+	background: var(--frss-loading-image) center center no-repeat;
 	font-size: 0;
 }
 
@@ -1561,7 +1561,7 @@ br {
 	position: fixed;
 	top: 0; bottom: 0;
 	left: 0; right: 0;
-	background-color: var(--template-modal-background-color-transparent);
+	background-color: var(--frss-modal-background-color-transparent);
 	opacity: 0;
 	transition: visibility .3s, opacity .3s;
 	visibility: hidden;
@@ -1573,7 +1573,7 @@ br {
 }
 
 #panel {
-	background-color: var(--template-background-color);
+	background-color: var(--frss-background-color);
 	display: none;
 	position: fixed;
 	top: 2%; bottom: 2%;
@@ -1594,7 +1594,7 @@ br {
 
 /*=== Slider */
 #slider {
-	background-color: var(--template-background-color);
+	background-color: var(--frss-background-color);
 	width: 0;
 	position: fixed;
 	top: 0; bottom: 0;
@@ -1605,7 +1605,7 @@ br {
 
 #slider.active:target {
 	width: 750px;
-	box-shadow: -3px 3px 5px var(--template-box-shadow-color-transparent);
+	box-shadow: -3px 3px 5px var(--frss-box-shadow-color-transparent);
 }
 
 #slider.sliding {
@@ -1620,7 +1620,7 @@ br {
 }
 
 #slider.active:target + #close-slider {
-	background-color: var(--template-modal-background-color-transparent);
+	background-color: var(--frss-modal-background-color-transparent);
 	font-size: 0;
 	left: 0;
 	z-index: 99;
@@ -1653,7 +1653,7 @@ br {
 	display: block;
 	max-width: 640px;
 	height: 320px;
-	border: 1px solid var(--template-border-color);
+	border: 1px solid var(--frss-border-color);
 	position: relative;
 	min-width: 260px;
 	margin-bottom: 30px;
@@ -1688,7 +1688,7 @@ br {
 	display: none;
 	width: 65px;
 	height: 100%;
-	color: var(--template-font-color-light);
+	color: var(--frss-font-color-light);
 	font-family: "Varela Round", sans-serif;
 	font-size: 1000%;
 	position: absolute;
@@ -1698,15 +1698,15 @@ br {
 	transition: opacity .2s;
 	text-align: center;
 	line-height: 225%;
-	background-color: var(--template-background-color-transparent);
+	background-color: var(--frss-background-color-transparent);
 	text-shadow: 0px 0px 15px rgb(119, 119, 119);
 }
 
 .properties {
 	padding: 5px;
-	background-color: var(--template-background-color-transparent);
+	background-color: var(--frss-background-color-transparent);
 	display: none;
-	border-top: 1px solid var(--template-border-color);
+	border-top: 1px solid var(--frss-border-color);
 	bottom: 0;
 	left: 0; right: 0;
 	position: absolute;
@@ -1753,18 +1753,18 @@ input:checked + .slide-container .properties {
 }
 
 .log-item.log-error {
-	background-color: var(--template-background-color-error-transparent);
+	background-color: var(--frss-background-color-error-transparent);
 }
 
 .item.share.error a::after,
 .category .title.error::before,
 .item.feed.error .item-title::before {
 	content: " ⚠ ";
-	color: var(--template-font-color-error);
+	color: var(--frss-font-color-error);
 }
 
 .feed.item.error.active .item-title::before {
-	color: var(--template-font-color-light);
+	color: var(--frss-font-color-light);
 }
 
 .aside .category .title:not([data-unread="0"])::after,
@@ -1805,8 +1805,8 @@ input:checked + .slide-container .properties {
 }
 
 .feed.active .item-title:not([data-unread="0"])::after {
-	color: var(--template-font-color-light);
-	border: 1px solid var(--template-border-color);
+	color: var(--frss-font-color-light);
+	border: 1px solid var(--frss-border-color);
 	font-weight: bold;
 }
 
@@ -1904,7 +1904,7 @@ input:checked + .slide-container .properties {
 	}
 
 	.aside:target {
-		box-shadow: 3px 3px 5px var(--template-box-shadow-color-transparent);
+		box-shadow: 3px 3px 5px var(--frss-box-shadow-color-transparent);
 	}
 
 	.aside .toggle_aside,
@@ -1914,7 +1914,7 @@ input:checked + .slide-container .properties {
 		display: block;
 		width: 100%;
 		height: 50px;
-		border-bottom: 1px solid var(--template-border-color);
+		border-bottom: 1px solid var(--frss-border-color);
 		line-height: 50px;
 		text-align: center;
 	}
@@ -1963,7 +1963,7 @@ input:checked + .slide-container .properties {
 	}
 
 	.dropdown-target:target ~ .dropdown-toggle::after {
-		background-color: var(--template-background-color);
+		background-color: var(--frss-background-color);
 		width: 10px;
 		height: 10px;
 		content: "";
@@ -1990,7 +1990,7 @@ input:checked + .slide-container .properties {
 		padding-top: 0;
 		margin-top: 0;
 		overflow: auto;
-		box-shadow: -3px 0 3px var(--template-box-shadow-color-transparent);
+		box-shadow: -3px 0 3px var(--frss-box-shadow-color-transparent);
 	}
 
 	.configure .dropdown-target:target ~ .dropdown-toggle::after {
@@ -2021,7 +2021,7 @@ input:checked + .slide-container .properties {
 
 	.aside:target + .close-aside,
 	.configure .dropdown-target:target ~ .dropdown-close {
-		background-color: var(--template-modal-background-color-transparent);
+		background-color: var(--frss-modal-background-color-transparent);
 		display: block;
 		font-size: 0;
 		position: fixed;
@@ -2127,7 +2127,7 @@ input:checked + .slide-container .properties {
 	}
 
 	html, body {
-		background-color: var(--template-background-color);
+		background-color: var(--frss-background-color);
 		font-family: Serif;
 	}
 
@@ -2141,7 +2141,7 @@ input:checked + .slide-container .properties {
 	}
 
 	.flux_content .content a {
-		color: var(--template-font-color-dark);
+		color: var(--frss-font-color-dark);
 	}
 
 	.flux_content .content a::after {
@@ -2158,8 +2158,8 @@ input:checked + .slide-container .properties {
 	padding: 1rem;
 	max-width: 1000px;
 	text-align: center;
-	background-color: var(--template-background-color-middle);
-	border: 1px solid var(--template-border-color);
+	background-color: var(--frss-background-color-middle);
+	border: 1px solid var(--frss-border-color);
 	border-radius: .25rem;
 }
 
diff --git a/p/themes/base-theme/template.rtl.css b/p/themes/base-theme/frss.rtl.css
index a6428f009..9aa043ccd 100644
--- a/p/themes/base-theme/template.rtl.css
+++ b/p/themes/base-theme/frss.rtl.css
@@ -3,40 +3,40 @@
 /*=== GENERAL */
 /*============*/
 :root {
-	--template-font-color-dark: #000;
-	--template-font-color-grey-dark: #666;
-	--template-font-color-grey-light: #aaa;
-	--template-font-color-light: #fff;
-	--template-background-color-error-transparent: #ff000040;
-	--template-font-color-error: #f00;
+	--frss-font-color-dark: #000;
+	--frss-font-color-grey-dark: #666;
+	--frss-font-color-grey-light: #aaa;
+	--frss-font-color-light: #fff;
+	--frss-background-color-error-transparent: #ff000040;
+	--frss-font-color-error: #f00;
 
-	--template-background-color: #fff;
-	--template-background-color-transparent: #ffffff7f;
-	--template-background-color-middle: #eee;
-	--template-background-color-dark: #ccc;
+	--frss-background-color: #fff;
+	--frss-background-color-transparent: #ffffff7f;
+	--frss-background-color-middle: #eee;
+	--frss-background-color-dark: #ccc;
 
-	--template-border-color: #999;
-	--template-border-color-error: #f00;
+	--frss-border-color: #999;
+	--frss-border-color-error: #f00;
 
-	--template-switch-accent-color: #85d885;
+	--frss-switch-accent-color: #85d885;
 
-	--template-dragdrop-color: #ff0;
-	--template-dragdrop-color-transparent: #ff02;
+	--frss-dragdrop-color: #ff0;
+	--frss-dragdrop-color-transparent: #ff02;
 
-	--template-noThumbnailImage-background-color: #ddd;
+	--frss-noThumbnailImage-background-color: #ddd;
 
-	--template-darken-background-hover-transparent: #6662;
+	--frss-darken-background-hover-transparent: #6662;
 
-	--template-modal-background-color-transparent: #0007;
+	--frss-modal-background-color-transparent: #0007;
 
-	--template-box-shadow-color-transparent: #0003;
+	--frss-box-shadow-color-transparent: #0003;
 
-	--template-scrollbar-handle: #0002;
-	--template-scrollbar-handle-hover: #0005;
-	--template-scrollbar-track: #0001;
-	--template-scrollbar-track-hover: #0001;
+	--frss-scrollbar-handle: #0002;
+	--frss-scrollbar-handle-hover: #0005;
+	--frss-scrollbar-track: #0001;
+	--frss-scrollbar-track-hover: #0001;
 
-	--template-loading-image: url("loader.gif");
+	--frss-loading-image: url("loader.gif");
 }
 
 @font-face {
@@ -51,7 +51,7 @@
 html, body {
 	margin: 0;
 	padding: 0;
-	background-color: var(--template-background-color);
+	background-color: var(--frss-background-color);
 	height: 100%;
 	font-family: "OpenSans", "Cantarell", "Helvetica", "Arial", sans-serif;
 	font-size: 100%;
@@ -123,11 +123,11 @@ sup {
 }
 
 kbd {
-	background-color: var(--template-background-color-middle);
+	background-color: var(--frss-background-color-middle);
 	padding: 2px 24px 2px 4px;
 	display: inline-block;
-	color: var(--template-font-color-grey-dark);
-	border: 1px solid var(--template-border-color);
+	color: var(--frss-font-color-grey-dark);
+	border: 1px solid var(--frss-border-color);
 	border-radius: 3px;
 	text-indent: -20px;
 	white-space: pre-wrap;
@@ -246,7 +246,7 @@ textarea[rows="2"] {
 }
 
 textarea:invalid {
-	border: 2px dashed var(--template-border-color-error);
+	border: 2px dashed var(--frss-border-color-error);
 }
 
 .prompt textarea,
@@ -262,9 +262,9 @@ input:disabled,
 select:disabled {
 	background-color: transparent;
 	min-width: 75px;
-	color: var(--template-font-color-grey-light);
+	color: var(--frss-font-color-grey-light);
 	font-style: italic;
-	border: 1px dashed var(--template-border-color);
+	border: 1px dashed var(--frss-border-color);
 }
 
 input[type="radio"],
@@ -317,7 +317,7 @@ button.as-link:active {
 }
 
 button.as-link[disabled] {
-	color: var(--template-font-color-grey-light) !important;
+	color: var(--frss-font-color-grey-light) !important;
 }
 
 /*=== Tables */
@@ -455,7 +455,7 @@ a.btn {
 	height: 1.75em;
 	border: 0;
 	border-radius: 1em;
-	background-color: var(--template-background-color-dark);
+	background-color: var(--frss-background-color-dark);
 	cursor: pointer;
 	box-sizing: content-box;
 	background-repeat: no-repeat;
@@ -471,7 +471,7 @@ a.btn {
 }
 
 .switch.active {
-	background-color: var(--template-switch-accent-color);
+	background-color: var(--frss-switch-accent-color);
 	background-repeat: no-repeat;
 	background-position: center center;
 	background-image: url('../icons/enabled.svg');
@@ -502,7 +502,7 @@ a.btn {
 	top: 0.2em;
 	width: 1.5em;
 	height: 1.5em;
-	background-color: var(--template-background-color);
+	background-color: var(--frss-background-color);
 	background-image: url('../icons/disabled.svg');
 	background-repeat: no-repeat;
 	background-position: center center;
@@ -511,7 +511,7 @@ a.btn {
 }
 
 .switch:not([disabled]):hover::before {
-	background-color: var(--template-background-color-middle);
+	background-color: var(--frss-background-color-middle);
 }
 
 .switch.active::before {
@@ -544,7 +544,7 @@ a.btn {
 
 .btn:focus-visible,
 input[type="checkbox"]:focus-visible {
-	outline: 2px solid var(--template-border-color);
+	outline: 2px solid var(--frss-border-color);
 }
 
 /*=== Navigation */
@@ -614,9 +614,9 @@ input[type="checkbox"]:focus-visible {
 
 .dropdown-menu {
 	margin: 0;
-	background-color: var(--template-background-color);
+	background-color: var(--frss-background-color);
 	display: none;
-	border: 1px solid var(--template-border-color);
+	border: 1px solid var(--frss-border-color);
 	min-width: 200px;
 	position: absolute;
 	left: 0;
@@ -628,7 +628,7 @@ input[type="checkbox"]:focus-visible {
 	height: 10px;
 	border-width: 1px 1px 0 0;
 	border-style: solid;
-	border-color: var(--template-border-color);
+	border-color: var(--frss-border-color);
 	content: "";
 	position: absolute;
 	top: -6px;
@@ -696,7 +696,7 @@ input[type="checkbox"]:focus-visible {
 .separator {
 	display: block;
 	height: 0;
-	border-bottom: 1px solid var(--template-border-color);
+	border-bottom: 1px solid var(--frss-border-color);
 }
 
 /*=== Alerts */
@@ -741,7 +741,7 @@ input[type="checkbox"]:focus-visible {
 	margin: 0 0 5em;
 	padding: 1em 0;
 	width: 100%;
-	border-top: 1px solid var(--template-border-color);
+	border-top: 1px solid var(--frss-border-color);
 	text-align: center;
 }
 
@@ -850,7 +850,7 @@ input[type="checkbox"]:focus-visible {
 }
 
 .dragging {
-	background-color: var(--template-dragdrop-color)
+	background-color: var(--frss-dragdrop-color)
 }
 
 .dragging .icon {
@@ -862,17 +862,17 @@ input[type="checkbox"]:focus-visible {
 }
 
 .drag-active .drop-zone:not(.drag-disallowed) {
-	background: repeating-linear-gradient(-45deg, transparent, transparent 40px, var(--template-dragdrop-color-transparent) 40px, var(--template-dragdrop-color-transparent) 60px);
+	background: repeating-linear-gradient(-45deg, transparent, transparent 40px, var(--frss-dragdrop-color-transparent) 40px, var(--frss-dragdrop-color-transparent) 60px);
 }
 
 .drag-active .drag-hover.drop-zone {
-	background-color: var(--template-dragdrop-color-transparent);
+	background-color: var(--frss-dragdrop-color-transparent);
 	transition: background 0.5s;
 }
 
 li.drag-hover {
 	margin: 0 0 5px;
-	border-bottom: 2px solid var(--template-border-color);
+	border-bottom: 2px solid var(--frss-border-color);
 }
 
 .drag-drop {
@@ -882,11 +882,11 @@ li.drag-hover {
 
 @keyframes droppedKeyframe {
 	0% {
-		background-color: var(--template-dragdrop-color-transparent);
+		background-color: var(--frss-dragdrop-color-transparent);
 	}
 
 	50% {
-		background-color: var(--template-dragdrop-color);
+		background-color: var(--frss-dragdrop-color);
 	}
 
 	100% {
@@ -899,38 +899,38 @@ li.drag-hover {
 @supports (scrollbar-width: thin) {
 	#sidebar,
 	.scrollbar-thin {
-		scrollbar-color: var(--template-scrollbar-handle) var(--template-scrollbar-track);
+		scrollbar-color: var(--frss-scrollbar-handle) var(--frss-scrollbar-track);
 		scrollbar-width: thin;
 	}
 
 	#sidebar:hover,
 	.scrollbar-thin:hover {
-		scrollbar-color: var(--template-scrollbar-handle-hover) var(--template-scrollbar-track-hover);
+		scrollbar-color: var(--frss-scrollbar-handle-hover) var(--frss-scrollbar-track-hover);
 	}
 }
 
 @supports not (scrollbar-width: thin) {
 	#sidebar::-webkit-scrollbar,
 	.scrollbar-thin::-webkit-scrollbar {
-		background-color: var(--template-scrollbar-track);
+		background-color: var(--frss-scrollbar-track);
 		width: 8px;
 	}
 
 	#sidebar:hover::-webkit-scrollbar,
 	.scrollbar-thin:hover::-webkit-scrollbar {
-		background-color: var(--template-scrollbar-track-hover);
+		background-color: var(--frss-scrollbar-track-hover);
 	}
 
 	#sidebar::-webkit-scrollbar-thumb,
 	.scrollbar-thin::-webkit-scrollbar-thumb {
-		background-color: var(--template-scrollbar-handle);
+		background-color: var(--frss-scrollbar-handle);
 		display: unset;
 		border-radius: 5px;
 	}
 
 	#sidebar:hover::-webkit-scrollbar-thumb,
 	.scrollbar-thin:hover::-webkit-scrollbar-thumb {
-		background-color: var(--template-scrollbar-handle-hover);
+		background-color: var(--frss-scrollbar-handle-hover);
 	}
 }
 
@@ -1089,7 +1089,7 @@ input[type="search"] {
 #panel .close:hover,
 #slider .toggle_aside:hover,
 .dropdown-menu .toggle_aside:hover {
-	background-color: var(--template-darken-background-hover-transparent);
+	background-color: var(--frss-darken-background-hover-transparent);
 }
 
 /*=== New article notification */
@@ -1148,7 +1148,7 @@ a.website:hover .favicon {
 }
 
 .flux:not(.current):hover .item.title {
-	background-color: var(--template-background-color);
+	background-color: var(--frss-background-color);
 	max-width: calc(100% - 320px);
 	position: absolute;
 }
@@ -1158,7 +1158,7 @@ a.website:hover .favicon {
 }
 
 .flux .item.title a {
-	color: var(--template-font-color-dark);
+	color: var(--frss-font-color-dark);
 	text-decoration: none;
 }
 
@@ -1197,7 +1197,7 @@ a.website:hover .favicon {
 }
 
 .flux .item.thumbnail img {
-	background: repeating-linear-gradient( 45deg, var(--template-noThumbnailImage-background-color), var(--template-noThumbnailImage-background-color) 5px, transparent 5px, transparent 10px );
+	background: repeating-linear-gradient( 45deg, var(--frss-noThumbnailImage-background-color), var(--frss-noThumbnailImage-background-color) 5px, transparent 5px, transparent 10px );
 	display: inline-block;
 	width: 100%;
 	height: 100%;
@@ -1207,7 +1207,7 @@ a.website:hover .favicon {
 
 .flux .item.title .summary {
 	max-height: 3em;
-	color: var(--template-font-color-grey-dark);
+	color: var(--frss-font-color-grey-dark);
 	font-size: 0.9em;
 	line-height: 1.5em;
 	font-weight: normal;
@@ -1218,7 +1218,7 @@ a.website:hover .favicon {
 
 .flux .item.title .author {
 	padding-right: 1rem;
-	color: var(--template-font-color-grey-dark);
+	color: var(--frss-font-color-grey-dark);
 	font-size: .9rem;
 	font-weight: normal;
 }
@@ -1276,14 +1276,14 @@ a.website:hover .favicon {
 
 .content > header,
 .content > footer {
-	color: var(--template-font-color-grey-light);
+	color: var(--frss-font-color-grey-light);
 	font-size: .9rem;
 }
 
 .content > footer {
 	margin: 2rem 0 2rem;
 	padding-top: 1rem;
-	border-top: 2px solid var(--template-border-color);
+	border-top: 2px solid var(--frss-border-color);
 	clear: both;
 }
 
@@ -1356,8 +1356,8 @@ br {
 	top: 1em;
 	right: 25%; left: 25%;
 	z-index: 9999;
-	background-color: var(--template-background-color);
-	border: 1px solid var(--template-border-color);
+	background-color: var(--frss-background-color);
+	border: 1px solid var(--frss-border-color);
 	opacity: 1;
 	line-height: 2;
 	visibility: visible;
@@ -1377,7 +1377,7 @@ br {
 }
 
 .notification a.close:hover {
-	background-color: var(--template-darken-background-hover-transparent);
+	background-color: var(--frss-darken-background-hover-transparent);
 }
 
 .notification a.close:hover .icon {
@@ -1407,7 +1407,7 @@ br {
 	width: 100%;
 	height: 100%;
 	overflow: auto;
-	background-color: var(--template-modal-background-color-transparent);
+	background-color: var(--frss-modal-background-color-transparent);
 }
 
 #popup-content {
@@ -1416,9 +1416,9 @@ br {
 	width: 80%;
 	height: 80%;
 	overflow: hidden;
-	background-color: var(--template-background-color);
+	background-color: var(--frss-background-color);
 	border-radius: .25rem;
-	box-shadow: -3px 3px 5px var(--template-box-shadow-color-transparent);
+	box-shadow: -3px 3px 5px var(--frss-box-shadow-color-transparent);
 }
 
 .popup-row {
@@ -1431,14 +1431,14 @@ br {
 	width: 27px;
 	height: 27px;
 	padding-bottom: 5px;
-	color: var(--template-font-color-grey-light);
+	color: var(--frss-font-color-grey-light);
 	font-size: 28px;
 	font-weight: bold;
 }
 
 #popup-close:hover,
 #popup-close:focus {
-	color: var(--template-font-color-dark);
+	color: var(--frss-font-color-dark);
 	text-decoration: none;
 	cursor: pointer;
 }
@@ -1489,12 +1489,12 @@ br {
 #load_more.loading,
 #load_more.loading:hover {
 	padding: 10px 20px;
-	background: var(--template-loading-image) center center no-repeat var(--template-background-color);
+	background: var(--frss-loading-image) center center no-repeat var(--frss-background-color);
 	font-size: 0;
 }
 
 .loading {
-	background: var(--template-loading-image) center center no-repeat;
+	background: var(--frss-loading-image) center center no-repeat;
 	font-size: 0;
 }
 
@@ -1561,7 +1561,7 @@ br {
 	position: fixed;
 	top: 0; bottom: 0;
 	right: 0; left: 0;
-	background-color: var(--template-modal-background-color-transparent);
+	background-color: var(--frss-modal-background-color-transparent);
 	opacity: 0;
 	transition: visibility .3s, opacity .3s;
 	visibility: hidden;
@@ -1573,7 +1573,7 @@ br {
 }
 
 #panel {
-	background-color: var(--template-background-color);
+	background-color: var(--frss-background-color);
 	display: none;
 	position: fixed;
 	top: 2%; bottom: 2%;
@@ -1594,7 +1594,7 @@ br {
 
 /*=== Slider */
 #slider {
-	background-color: var(--template-background-color);
+	background-color: var(--frss-background-color);
 	width: 0;
 	position: fixed;
 	top: 0; bottom: 0;
@@ -1605,7 +1605,7 @@ br {
 
 #slider.active:target {
 	width: 750px;
-	box-shadow: 3px 3px 5px var(--template-box-shadow-color-transparent);
+	box-shadow: 3px 3px 5px var(--frss-box-shadow-color-transparent);
 }
 
 #slider.sliding {
@@ -1620,7 +1620,7 @@ br {
 }
 
 #slider.active:target + #close-slider {
-	background-color: var(--template-modal-background-color-transparent);
+	background-color: var(--frss-modal-background-color-transparent);
 	font-size: 0;
 	right: 0;
 	z-index: 99;
@@ -1653,7 +1653,7 @@ br {
 	display: block;
 	max-width: 640px;
 	height: 320px;
-	border: 1px solid var(--template-border-color);
+	border: 1px solid var(--frss-border-color);
 	position: relative;
 	min-width: 260px;
 	margin-bottom: 30px;
@@ -1688,7 +1688,7 @@ br {
 	display: none;
 	width: 65px;
 	height: 100%;
-	color: var(--template-font-color-light);
+	color: var(--frss-font-color-light);
 	font-family: "Varela Round", sans-serif;
 	font-size: 1000%;
 	position: absolute;
@@ -1698,15 +1698,15 @@ br {
 	transition: opacity .2s;
 	text-align: center;
 	line-height: 225%;
-	background-color: var(--template-background-color-transparent);
+	background-color: var(--frss-background-color-transparent);
 	text-shadow: 0px 0px 15px rgb(119, 119, 119);
 }
 
 .properties {
 	padding: 5px;
-	background-color: var(--template-background-color-transparent);
+	background-color: var(--frss-background-color-transparent);
 	display: none;
-	border-top: 1px solid var(--template-border-color);
+	border-top: 1px solid var(--frss-border-color);
 	bottom: 0;
 	right: 0; left: 0;
 	position: absolute;
@@ -1753,18 +1753,18 @@ input:checked + .slide-container .properties {
 }
 
 .log-item.log-error {
-	background-color: var(--template-background-color-error-transparent);
+	background-color: var(--frss-background-color-error-transparent);
 }
 
 .item.share.error a::after,
 .category .title.error::before,
 .item.feed.error .item-title::before {
 	content: " ⚠ ";
-	color: var(--template-font-color-error);
+	color: var(--frss-font-color-error);
 }
 
 .feed.item.error.active .item-title::before {
-	color: var(--template-font-color-light);
+	color: var(--frss-font-color-light);
 }
 
 .aside .category .title:not([data-unread="0"])::after,
@@ -1805,8 +1805,8 @@ input:checked + .slide-container .properties {
 }
 
 .feed.active .item-title:not([data-unread="0"])::after {
-	color: var(--template-font-color-light);
-	border: 1px solid var(--template-border-color);
+	color: var(--frss-font-color-light);
+	border: 1px solid var(--frss-border-color);
 	font-weight: bold;
 }
 
@@ -1904,7 +1904,7 @@ input:checked + .slide-container .properties {
 	}
 
 	.aside:target {
-		box-shadow: -3px 3px 5px var(--template-box-shadow-color-transparent);
+		box-shadow: -3px 3px 5px var(--frss-box-shadow-color-transparent);
 	}
 
 	.aside .toggle_aside,
@@ -1914,7 +1914,7 @@ input:checked + .slide-container .properties {
 		display: block;
 		width: 100%;
 		height: 50px;
-		border-bottom: 1px solid var(--template-border-color);
+		border-bottom: 1px solid var(--frss-border-color);
 		line-height: 50px;
 		text-align: center;
 	}
@@ -1963,7 +1963,7 @@ input:checked + .slide-container .properties {
 	}
 
 	.dropdown-target:target ~ .dropdown-toggle::after {
-		background-color: var(--template-background-color);
+		background-color: var(--frss-background-color);
 		width: 10px;
 		height: 10px;
 		content: "";
@@ -1990,7 +1990,7 @@ input:checked + .slide-container .properties {
 		padding-top: 0;
 		margin-top: 0;
 		overflow: auto;
-		box-shadow: 3px 0 3px var(--template-box-shadow-color-transparent);
+		box-shadow: 3px 0 3px var(--frss-box-shadow-color-transparent);
 	}
 
 	.configure .dropdown-target:target ~ .dropdown-toggle::after {
@@ -2021,7 +2021,7 @@ input:checked + .slide-container .properties {
 
 	.aside:target + .close-aside,
 	.configure .dropdown-target:target ~ .dropdown-close {
-		background-color: var(--template-modal-background-color-transparent);
+		background-color: var(--frss-modal-background-color-transparent);
 		display: block;
 		font-size: 0;
 		position: fixed;
@@ -2127,7 +2127,7 @@ input:checked + .slide-container .properties {
 	}
 
 	html, body {
-		background-color: var(--template-background-color);
+		background-color: var(--frss-background-color);
 		font-family: Serif;
 	}
 
@@ -2141,7 +2141,7 @@ input:checked + .slide-container .properties {
 	}
 
 	.flux_content .content a {
-		color: var(--template-font-color-dark);
+		color: var(--frss-font-color-dark);
 	}
 
 	.flux_content .content a::after {
@@ -2158,8 +2158,8 @@ input:checked + .slide-container .properties {
 	padding: 1rem;
 	max-width: 1000px;
 	text-align: center;
-	background-color: var(--template-background-color-middle);
-	border: 1px solid var(--template-border-color);
+	background-color: var(--frss-background-color-middle);
+	border: 1px solid var(--frss-border-color);
 	border-radius: .25rem;
 }
 
diff --git a/p/themes/base-theme/metadata.json b/p/themes/base-theme/metadata.json
index 4d59365a8..8ba17b101 100644
--- a/p/themes/base-theme/metadata.json
+++ b/p/themes/base-theme/metadata.json
@@ -3,5 +3,5 @@
   "author": "Your name",
   "description": "A wonderful base theme",
   "version": 0.1,
-  "files": ["template.css", "base.css"]
+  "files": ["frss.css", "base.css"]
 }