Better theme support

config.py

@@ -1,9 +1,11 @@
 import os
 import subprocess
 from datetime import datetime
+from enum import Enum
 
 import requests
 import yaml
+import sass
 from itsdangerous import JSONWebSignatureSerializer
 from pymongo import MongoClient
 
@@ -13,6 +15,19 @@ from utils.key import get_key
 from utils.key import get_secret_key
 
 
+class ThemeStyle(Enum):
+    LIGHT = "light"
+    DARK = "dark"
+
+
+DEFAULT_THEME_STYLE = ThemeStyle.LIGHT.value
+
+DEFAULT_THEME_PRIMARY_COLOR = {
+    ThemeStyle.LIGHT: "#1d781d",  # Green
+    ThemeStyle.DARK: "#e14eea",  # Purple
+}
+
+
 def noop():
     pass
 
@@ -54,8 +69,22 @@ with open(os.path.join(KEY_DIR, "me.yml")) as f:
     ICON_URL = conf["icon_url"]
     PASS = conf["pass"]
     PUBLIC_INSTANCES = conf.get("public_instances", [])
-    # TODO(tsileo): choose dark/light style
+
-    THEME_COLOR = conf.get("theme_color")
+    # Theme-related config
+    theme_conf = conf.get("theme", {})
+    THEME_STYLE = ThemeStyle(theme_conf.get("style", DEFAULT_THEME_STYLE))
+    THEME_COLOR = theme_conf.get("color", DEFAULT_THEME_PRIMARY_COLOR[THEME_STYLE])
+
+
+SASS_DIR = os.path.join(os.path.dirname(os.path.abspath(__file__)), "sass")
+theme_css = f"$primary-color: {THEME_COLOR};\n"
+with open(os.path.join(SASS_DIR, f"{THEME_STYLE.value}.scss")) as f:
+    theme_css += f.read()
+    theme_css += '\n'
+with open(os.path.join(SASS_DIR, "base_theme.scss")) as f:
+    raw_css = theme_css + f.read()
+    CSS = sass.compile(string=raw_css)
+
 
 USER_AGENT = (
     f"{requests.utils.default_user_agent()} (microblog.pub/{VERSION}; +{BASE_URL})"

sass/base_theme.scss

@@ -1,24 +1,3 @@
-// a4.io dark theme
-$background-color: #060606;
-$background-light: #222;
-$color: #808080;
-$color-title-link: #fefefe;
-$color-summary: #ddd;
-$color-light: #bbb;
-$color-menu-background: #222;
-$color-note-link: #666;
-$primary-color: #f7ca18;
-
-$background-color: #eee; 
-$background-light: #ccc;
-$color: #111;
-$color-title-link: #333;
-$color-light: #555;
-$color-summary: #111;
-$color-note-link: #333;
-$color-menu-background: #ddd;
-$primary-color: #1d781d; 
-
 .note-container p:first-child {
         margin-top: 0;
 }

sass/dark.scss

@@ -0,0 +1,8 @@
+$background-color: #060606;
+$background-light: #222;
+$color: #808080;
+$color-title-link: #fefefe;
+$color-summary: #ddd;
+$color-light: #bbb;
+$color-menu-background: #222;
+$color-note-link: #666;

sass/light.scss

@@ -0,0 +1,9 @@
+$background-color: #eee; 
+$background-light: #ccc;
+$color: #111;
+$color-title-link: #333;
+$color-light: #555;
+$color-summary: #111;
+$color-note-link: #333;
+$color-menu-background: #ddd;
+// $primary-color: #1d781d; 

static/base.css

@@ -1,160 +0,0 @@
-.note-container p:first-child {
-        margin-top: 0;
-}
-html, body {
-	  height: 100%;
-}
-body {
-  background-color: #060606;
-  color: #808080;
-display: flex;
-flex-direction: column;
-}
-.base-container {
- flex: 1 0 auto;
-}
-.footer {
-flex-shrink: 0;
-}
-a, h1, h2, h3, h4, h5, h6 {
-  color: #fefefe;
-}
-a {
-  text-decoration: none;
-}
-a:hover {
-  text-decoration: underline;
-}
-.gold {
-  color: #f7ca18;
-}
-
-#header {
-	margin-bottom: 40px;
-}
-#header .h-card {
-}
-#header .title {
-font-size:1.2em;padding-right:15px;color:#fefefe;
-}
-#header .title:hover {
-text-decoration: none;
-}
-#header .menu {
-padding: 20px 0 10px 0;
-}
-#header .menu ul {
-display:inline;list-style-type:none;padding:0;
-}
-#header .menu li {
-float:left;
-padding-right:10px;
-margin-bottom:10px;
-}
-#header .menu a {
-  padding: 2px 7px;
-}
-#header .menu a.selected {
-background:#f7ca18;color:#634806;
-border-radius:2px;
-}
-#header .menu a:hover {
-background:#f7ca18;color:#060606;
-text-decoration: none;
-}
-#container {
-width:90%;max-width: 720px;margin:40px auto;
-}
-#container #notes {
-margin-top:20px;
-}
-.actor-box {
-display:block;text-decoration:none;margin-bottom:40px;
-}
-.actor-box .actor-icon {
-width: 100%;
-max-width:120px;
-border-radius:2px;
-}
-.actor-box h3 { margin:0; }
-.note .l {
-color:#666;
-}
-.note {
-display:flex;margin-bottom:70px;
-}
-.note .h-card {
-flex:initial;width:50px;
-}
-.note .u-photo {
-width:50px;border-radius:2px;
-}
-.note .note-wrapper {
-flex:1;padding-left:15px;
-}
-.note .bottom-bar {
-margin-top:10px;
-}
-.bar-item {
-background: #222;
-padding: 5px;
-color:#bbb;
-margin-right:5px;
-border-radius:2px;
-}
-.bottom-bar .perma-item {
-margin-right:5px;
-}
-.bottom-bar a.bar-item:hover {
-	text-decoration: none;
-}
-.note .img-attachment {
-max-width:100%;
-border-radius:2px;
-}
-.note h3 {
-font-size:1.1em;color:#ccc;
-}
-.note .note-container {
-clear:right;padding:10px 0;
-}
-.note strong {
-font-weight:600;
-}
-.footer > div  {
-width:90%;max-width: 720px;margin:40px auto;
-}
-.footer a, .footer a:hover, .footer a:visited {
-  text-decoration:underline;
-  color:#808080;
-}
-.summary {
-color: #ddd;
-font-size:1.3em;
-margin-top:50px;
-margin-bottom:70px;
-}
-.summary a, .summay a:hover {
-color:#ddd;
-text-decoration:underline;
-}
-#followers, #following, #new {
-	margin-top:50px;
-}
-#admin {
-	margin-top:50px;
-}
-textarea, input {
-	background: #222;
-	padding: 10px;
-	color: #bbb;
-	border: 0px;
-	border-radius: 2px;
-}
-input {
-	padding: 10px;
-}
-input[type=submit] {
-  color: #f7ca18;
-  text-transform: uppercase;
-}

static/css/.gitignore

@@ -1,2 +0,0 @@
-*
-!.gitignore

static/css/theme.css

@@ -1 +0,0 @@
-.note-container p:first-child{margin-top:0}html,body{height:100%}body{background-color:#eee;color:#111;display:flex;flex-direction:column}.base-container{flex:1 0 auto}.footer{flex-shrink:0}a,h1,h2,h3,h4,h5,h6{color:#333}a{text-decoration:none}a:hover{text-decoration:underline}.gold{color:#1d781d}#header{margin-bottom:70px}#header .title{font-size:1.2em;padding-right:15px;color:#333}#header .title:hover{text-decoration:none}#header .subtitle-username{color:#111}#header .menu{clear:both;padding:0 0 10px 0}#header .menu ul{display:inline;list-style-type:none;padding:0}#header .menu ul li{float:left;padding-right:10px;margin-bottom:10px}#header .menu a{padding:5px 10px}#header .menu a small.badge{background-color:#ddd;color:#555;border-radius:2px;margin-left:5px;padding:3px 5px 0px 5px;font-weight:bold}#header .menu a.selected{background:#1d781d;color:#eee;border-radius:2px}#header .menu a.selected .badge{color:#1d781d;background:#eee}#header .menu a:hover{background:#1d781d;color:#eee;text-decoration:none;border-radius:2px}#header .menu a:hover .badge{color:#1d781d;background:#eee}#container{width:90%;max-width:720px;margin:40px auto}#container #notes{margin-top:20px}.actor-box{display:block;text-decoration:none;margin-bottom:40px}.actor-box .actor-icon{width:120px;border-radius:2px}.actor-box h3{margin:0}.actor-box .actor-inline{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.actor-box-big{display:block;text-decoration:none}.actor-box-big .actor-box-wrapper{margin-bottom:40px}.actor-box-big .actor-box-wrapper .actor-icon{width:120px;border-radius:2px}.actor-box-big .actor-box-wrapper h3{margin:0}.note{display:flex;margin-bottom:70px}.note .l{color:#333}.note .h-card{flex:initial;width:50px}.note .u-photo{width:50px;border-radius:2px}.note .note-wrapper{flex:1;padding-left:15px}.note .bottom-bar{margin-top:10px}.note .img-attachment{max-width:100%;border-radius:2px}.note h3{font-size:1.1em;color:#555}.note strong{font-weight:600}.note .note-container{clear:right;padding:10px 0}.bar-item{background:#ddd;padding:5px;color:#555;margin-right:5px;border-radius:2px}button.bar-item{border:0}form.action-form{display:inline}.perma{font-size:1.25em}.bottom-bar .perma-item{margin-right:5px}.bottom-bar a.bar-item:hover{text-decoration:none}.footer>div{width:90%;max-width:720px;margin:40px auto}.footer a,.footer a:hover,.footer a:visited{text-decoration:underline;color:#111}.summary{color:#111;font-size:1.1em;margin-top:10px;margin-bottom:30px}.summary a,.summay a:hover{color:#111;text-decoration:underline}#followers,#following,#new{margin-top:50px}#admin{margin-top:50px}textarea,input{background:#ddd;padding:10px;color:#555;border:0px;border-radius:2px}input{padding:10px}input[type=submit]{color:#1d781d;text-transform:uppercase}

templates/layout.html

@@ -6,7 +6,6 @@
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <title>{% block title %}{{ config.NAME }}{% endblock %} - microblog.pub</title>
 <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
-<link rel="stylesheet" href="/static/css/theme.css">
 <link rel="authorization_endpoint" href="{{ config.ID }}/indieauth">
 <link rel="token_endpoint" href="{{ config.ID }}/token">
 <link rel="micropub" href="{{ config.ID }}/micropub">
@@ -15,6 +14,9 @@
 <link rel="alternate" href="{{ config.ID }}/feed.rss" type="application/rss+xml" title="RSS">
 <link rel="alternate" href="{{ config.ID }}/feed.atom" type="application/atom+xml" title="Atom 0.3">
 {% if config.THEME_COLOR %}<meta name="theme-color" content="{{ config.THEME_COLOR }}">{% endif %}
+<style>
+{{ config.CSS }}
+</style>
 </head>
 <body>
 <div class="base-container">