Added catppuccin theme

static/style.css

@@ -92,7 +92,7 @@
 
 /* Nord theme setting */
 .nord {
-	--accent: #8fbcbb; 
+	--accent: #8fbcbb;
 	--green: #a3be8c;
 	--text: #eceff4;
 	--foreground: #3b4252;
@@ -164,6 +164,21 @@
 	--shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
 }
 
+/* Catppuccin theme setting */
+.catppuccin {
+	--accent: #C9CBFF;
+	--green: #ABE9B3;
+	--text: #D9E0EE;
+	--foreground: #1A1826;
+	--background: #1E1E2E;
+	--outside: #1A1826;
+	--post: #1A1826;
+	--panel-border: 2px solid #302D41;
+	--highlighted: #302D41;
+	--visited: #988BA2;
+	--shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
 /* General */
 
 ::selection {
@@ -194,13 +209,13 @@ nav {
 
 	justify-content: space-between;
 	align-items: center;
-	
+
 	color: var(--accent);
 	background: var(--outside);
 	box-shadow: var(--shadow);
-	
+
 	font-size: 20px;
-	
+
 	z-index: 2;
 	top: 0;
 	padding: 5px 15px;
@@ -506,7 +521,7 @@ select {
 select, #search {
 	border: none;
 	padding: 0 10px;
-	
+
 	appearance: none;
 	-webkit-appearance: none;
 	-moz-appearance: none;
@@ -626,7 +641,7 @@ button.submit:hover > svg { stroke: var(--accent); }
 	margin-bottom: 20px;
 }
 
-.search_subreddit { 
+.search_subreddit {
 	padding: 16px 20px;
 	display: flex;
 }
@@ -655,7 +670,7 @@ a.search_subreddit:hover {
 	background: var(--foreground);
 }
 
-.search_subreddit:not(:last-child) { 
+.search_subreddit:not(:last-child) {
 	border-bottom: 1px solid var(--highlighted);
 }
 
@@ -733,7 +748,7 @@ a.search_subreddit:hover {
 
 .post_score .label {
 	display: none;
-} 
+}
 
 .post_header {
 	margin: 15px 20px 5px 12px;
@@ -964,7 +979,7 @@ a.search_subreddit:hover {
 }
 
 .post_thumbnail img {
-	max-width: 100%;	
+	max-width: 100%;
 }
 
 .stickied {
@@ -1351,7 +1366,7 @@ td, th {
 		margin: 0 0 10px 0;
 		max-width: 100%;
 	}
-	
+
 	nav {
 		grid-template-areas: 'logo links' 'searchbox searchbox';
 		padding: 10px;
@@ -1369,7 +1384,7 @@ td, th {
 		right: 10px;
 		min-width: auto;
 	}
-	
+
 	#settings {
 		max-width: unset;
 	}
@@ -1397,14 +1412,14 @@ td, th {
 				"post_score  post_footer post_thumbnail" auto
 				/ auto 1fr fit-content(min(20%, 152px));
 	}
-	
+
 	.post_score {
 		margin: 5px 0px 20px 15px;
 		padding: 0;
 	}
-	
+
 	.compact .post_score { padding: 0; }
-	
+
 	.post_score::before {	content: "↑" }
 
 	.post_header { font-size: 14px; }

templates/settings.html

@@ -14,20 +14,20 @@
 			<legend>Appearance</legend>
 			<div id="theme">
 				<label for="theme">Theme:</label>
-				<select name="theme"> 
+				<select name="theme">
-					{% call utils::options(prefs.theme, ["system", "light", "dark", "black", "dracula", "nord", "laserwave", "violet", "gold", "rosebox"], "system") %}
+					{% call utils::options(prefs.theme, ["system", "light", "dark", "black", "dracula", "nord", "laserwave", "violet", "gold", "rosebox", "catppuccin"], "system") %}
 				</select>
 			</div>
 			<legend>Interface</legend>
 			<div id="front_page">
 				<label for="front_page">Front page:</label>
-				<select name="front_page"> 
+				<select name="front_page">
 					{% call utils::options(prefs.front_page, ["default", "popular", "all"], "default") %}
 				</select>
 			</div>
 			<div id="layout">
 				<label for="layout">Layout:</label>
-				<select name="layout"> 
+				<select name="layout">
 					{% call utils::options(prefs.layout, ["card", "clean", "compact"], "card") %}
 				</select>
 			</div>
@@ -39,13 +39,13 @@
 			<legend>Content</legend>
 			<div id="post_sort">
 				<label for="post_sort" title="Applies only to subreddit feeds">Default subreddit post sort:</label>
-				<select name="post_sort"> 
+				<select name="post_sort">
 					{% call utils::options(prefs.post_sort, ["hot", "new", "top", "rising", "controversial"], "hot") %}
 				</select>
 			</div>
 			<div id="comment_sort">
 				<label for="comment_sort">Default comment sort:</label>
-				<select name="comment_sort"> 
+				<select name="comment_sort">
 					{% call utils::options(prefs.comment_sort, ["confidence", "top", "new", "controversial", "old"], "confidence") %}
 				</select>
 			</div>