Added a sepia theme, based on the sepia theme in Slide for Android

config.js.template

@@ -2,7 +2,7 @@ const config = {
   domain: process.env.DOMAIN || '127.0.0.1', // Or for example 'teddit.net'
   use_reddit_oauth: process.env.USE_REDDIT_OAUTH === 'true' || false, // If false, teddit uses Reddit's public API. If true, you need to have your own Reddit app ID (enter the app ID to the "reddit_app_id" config key). 
   cert_dir: process.env.CERT_DIR || '', // For example '/home/teddit/letsencrypt/live/teddit.net', if you are using https. No trailing slash.
-  theme: process.env.THEME || 'dark', // One of: 'dark', ''
+  theme: process.env.THEME || 'dark', // One of: 'dark', 'sepia', ''
   flairs_enabled: process.env.FLAIRS_ENABLED !== 'true' || true, // Enables the rendering of user and link flairs on teddit
   highlight_controversial: process.env.HIGHLIGHT_CONTROVERSIAL !== 'true' || true, // Enables controversial comments to be indicated by a typographical dagger (†)
   api_enabled: process.env.API_ENABLED !== 'true' || true, // Teddit API feature. Might increase loads significantly on your instance.

static/css/sepia.css

@@ -0,0 +1,180 @@
+:root {
+	--bodybg: #ccc9b8; /* #cac5ad; */
+	--bodytext: #53524b;
+	--topbarbg: #992c09;
+	--headerbg: #bf360c;
+	--headertext: white;
+	--headerfaded: #ecc3b7;
+	--tabbg: #5a5a5a;
+	--tabtext: #f2f0ea;
+	--linkbg: #e2dfd7;
+	--linktext: #979692;
+	--shadow: #9e9e9e;
+	--buttonbg: #f2f0ea;
+	--buttontext: #53524b;
+	--oddbg: #e2dfd7;
+	--oddborder: #616161;
+ 	--evenbg: #f2f0ea;
+	--evenborder: #919191;
+	/* Overrides */
+	--graytext: #616161;
+	/* Copied from default theme */
+	--linkcolor: #0645ad;
+	--lightlinkcolor: #406bb3;
+}
+/* Main page */
+body.sepia {
+	background: var(--bodybg);
+	color: var(--bodytext);
+}
+body.sepia nav {
+	background: var(--topbarbg);
+	color: var(--headertext);
+}
+body.sepia .top-links {
+	background: var(--headerbg);
+}
+body.sepia .top-links a {
+	padding-left: 4px;
+	background: var(--headerbg);
+	color: var(--headerfaded);
+}
+body.sepia #sr-more-link {
+	margin-top: 4px;
+	background: var(--buttonbg);
+}
+body.sepia header {
+	margin-top: 0;
+	background: var(--headerbg);
+	color: var(--headertext);
+}
+body.sepia header a {
+	color: var(--headertext);
+}
+body.sepia header .tabmenu li:not(.active) a {
+	background: var(--tabbg);
+	color: var(--tabtext);
+}
+body.sepia #links {
+	margin: 4px 16px; /* Only when width has certain minimum */
+}
+body.sepia #links .link {
+	margin: 8px 0;
+	padding: 16px 8px 16px 0;
+	background: var(--linkbg);
+	color: var(--linktext);
+	border-radius: 3px;
+	box-shadow: 0px 0px 2px var(--shadow);
+}
+body.sepia .flair,
+body.sepia #links .link .entry .title span.flair,
+body.sepia #post .info .title span.flair {
+	color: var(--bodytext);
+	background-color: var(--linkbg);
+}
+body.sepia .upvotes .arrow {
+	filter: brightness(90%);
+}
+body.sepia #links .link .entry .title a h2 {
+	padding-right: 4px;
+}
+body.sepia #links .link .entry .title span {
+	padding-left: 0;
+}
+body.sepia #user .upvotes,
+body.sepia #links .link .upvotes,
+body.sepia #links .link .entry .title span,
+body.sepia #links .link .entry .meta,
+body.sepia #links .link .entry .meta .links a {
+	color: var(--linktext);
+}
+body.sepia button,
+body.sepia select,
+body.sepia input,
+body.sepia input[type="submit"],
+body.sepia #search input[type="text"],
+body.sepia #sr-more-link,
+body.sepia .btn,
+body.sepia .view-more-links a {
+	margin-bottom: 0;
+	background: var(--buttonbg);
+	color: var(--buttontext);
+	border-radius: 3px;
+	border: none;
+	box-shadow: 0px 0px 2px var(--shadow);
+}
+body.sepia .view-more-links a {
+	margin-left: 16px;
+	color: var(--linkcolor);
+	font-weight: normal;
+}
+body.sepia #sr-more-link {
+	border-radius: 3px 0 0 3px;
+}
+body.sepia input[type="checkbox"] {
+	margin-top: 6px;
+}
+body.sepia footer {
+	margin-top: 20px;
+	padding: 8px 0 8px 20px;
+	box-shadow: 0px 0px 2px var(--shadow);
+}
+/* Search */
+body.sepia #links.search {
+	width: calc(100% - 40px);
+}
+/* Comments */
+body.sepia #post .score {
+	color: var(--graytext);
+}
+body.sepia .score .arrow {
+	filter: brightness(70%);
+}
+body.sepia #post .submitted,
+body.sepia #post .title .domain {
+	color: var(--graytext);
+}
+body.sepia #post .usertext-body {
+	background: var(--oddbg);
+	border-radius: 3px;
+	border: none;
+	box-shadow: 0px 0px 2px var(--shadow);
+}
+body.sepia .md {
+	color: var(--bodytext);
+}
+body.sepia #post header div a {
+	color: var(--headerfaded);
+}
+body.sepia .comment {
+	background: var(--oddbg);
+	border-left: 3px solid var(--oddborder);
+	border-radius: 3px 0 0 3px;
+	box-shadow: 1px 0px 1px var(--shadow);
+}
+body.sepia .comment.even-depth {
+	background: var(--evenbg);
+	border-left: 3px solid var(--evenborder);
+	box-shadow: 1px 0px 1px var(--shadow);
+}
+body.sepia .comments > .comment {
+	border: none;
+	border-radius: 0;
+}
+body.sepia .md .md-spoiler-text:not(.revealed),
+body.sepia .md .md-spoiler-text:active:not(.revealed),
+body.sepia .md .md-spoiler-text:focus:not(.revealed),
+body.sepia .md .md-spoiler-text:hover:not(.revealed) {
+	background: var(--bodytext);
+	color: var(--bodytext);
+}
+body.sepia .md .md-spoiler-text:active:not(.revealed),
+body.sepia .md .md-spoiler-text:focus:not(.revealed),
+body.sepia .md .md-spoiler-text:hover:not(.revealed) {
+	background: none;
+}
+body.sepia .comments > form button {
+	margin: 12px 8px;
+	padding: 8px;
+	cursor: pointer;
+}

views/includes/head.pug

@@ -1,5 +1,7 @@
 if(user_preferences.theme === 'dark')
   link(rel="stylesheet", type="text/css", href="/css/dark.css")
+if(user_preferences.theme === 'sepia')
+  link(rel="stylesheet", type="text/css", href="/css/sepia.css")
 link(rel="stylesheet", type="text/css", href="/css/styles.css")
 link(rel="icon", type="image/png", sizes="32x32", href="/favicon.png")
 meta(name="viewport", content="width=device-width, initial-scale=1.0")

views/preferences.pug

@@ -16,9 +16,15 @@ html
                 if(!user_preferences.theme || user_preferences.theme == '')
                   option(value="", selected="selected") White
                   option(value="dark") Dark
+                  option(value="sepia") Sepia
                 if(user_preferences.theme === 'dark')
                   option(value="") White
                   option(value="dark", selected="selected") Dark
+                  option(value="sepia") Sepia
+                if(user_preferences.theme === 'sepia')
+                  option(value="") White
+                  option(value="dark") Dark
+                  option(value="sepia", selected="selected") Sepia
           .setting
             label(for="flairs") Show flairs: 
               if(!user_preferences.flairs || user_preferences.flairs == 'true')