Add initial theme support

Gulpfile.js

@@ -10,9 +10,9 @@ function clean() {
 }
 
 function maniwani_css() {
-	return src('./scss/maniwani.scss').pipe(
+	return src('./scss/themes/*/theme-*.scss').pipe(
 		sass({outputStyle: 'compressed',
-			  includePaths: './node_modules/bootstrap/scss'}).on('error', sass.logError)).pipe(
+			  includePaths: ['./node_modules/bootstrap/scss', './scss/base']}).on('error', sass.logError)).pipe(
 			dest('./static/css/')).pipe(browserSync.stream())
 }
 
@@ -57,7 +57,7 @@ function watch() {
 		proxy: '127.0.0.1:5000',
 		port: 5000
   });
-	gulp.watch('./scss/*.scss', maniwani_css ).on('change', browserSync.reload);
+	gulp.watch('./scss/**/*.scss', maniwani_css ).on('change', browserSync.reload);
 	gulp.watch("./templates/*.html").on("change", browserSync.reload);
 }
 
@@ -67,4 +67,4 @@ exports.css = parallel(maniwani_css, fontawesome_css)
 exports.fonts = fontawesome_webfonts
 exports.js = parallel(popper, jquery, bootstrap_js, imagesloaded, masonry)
 exports.build = series(clean, parallel(exports.css, exports.js, exports.fonts))
-exports.default = exports.build
+exports.default = exports.build

app.py

@@ -8,6 +8,7 @@
 from blueprints.boards import boards_blueprint
 from blueprints.main import main_blueprint
 from blueprints.slip import slip_blueprint
+from blueprints.theme import theme_blueprint
 from blueprints.threads import threads_blueprint
 from blueprints.upload import upload_blueprint
 from blueprints.live import live_blueprint
@@ -22,6 +23,7 @@
 
 app.register_blueprint(main_blueprint, url_prefix="/")
 app.register_blueprint(boards_blueprint, url_prefix="/boards")
+app.register_blueprint(theme_blueprint, url_prefix="/theme")
 app.register_blueprint(threads_blueprint, url_prefix="/threads")
 app.register_blueprint(upload_blueprint, url_prefix="/upload")
 app.register_blueprint(slip_blueprint, url_prefix="/slip")

blueprints/theme.py

@@ -0,0 +1,11 @@
+from flask import Blueprint, session, redirect, request
+
+
+theme_blueprint = Blueprint('theme', __name__, template_folder='template')
+
+
+@theme_blueprint.route("/set-theme", methods=["POST"])
+def set_theme():
+    theme_name = request.form["selected-theme"]
+    session["theme"] = theme_name
+    return redirect(request.referrer)

doc/deploying.md

@@ -87,6 +87,10 @@ but a brief description of each follows:
 * `SERVE_REST` - if `True`, REST endpoints will be served by Maniwani. Note that ideally, the REST API for
   your Maniwani installation is protected with HTTPS, since Maniwani uses HTTP Basic for authentication and
   authorization.
+* `DEFAULT_THEME` - this is an optional string representing the name of the theme Maniwani should use if
+  the user has not otherwise selected a theme to use. If not present, the stock theme will be used.
+* `THEME_LIST` - this is an optional list of strings representing the list of installed themes available.
+  If not present, Maniwani assumes the default themes normally bundled with Maniwani are available. 
 * `MAX_CONTENT_LENGTH` - this is an integer detailing the largest attachment Maniwani should accept
   in bytes. Note that your reverse proxy should be set up to not deny any requests smaller than this;
   if you're copying or following along with the `nginx.conf` bundled with Maniwani under the `deploy-configs`

model/Media.py

@@ -5,7 +5,7 @@
 import os
 import subprocess
 from PIL import Image, ImageDraw
-from flask import send_from_directory, redirect
+from flask import send_from_directory, redirect, session
 from shared import db, app
 
 
@@ -274,7 +274,22 @@ def static_resource(path):
     else:
         def static_resource(path):
             return storage.static_resource(path)
-    return dict(static_resource=static_resource)
+    def get_current_theme():
+        # TODO: extend to also keep theme preference in slips
+        theme_name = session.get("theme")
+        if theme_name is None:
+            theme_name = app.config.get("DEFAULT_THEME") or "stock"
+        return theme_name
+    def get_current_theme_path():
+        theme_name = get_current_theme()
+        theme_template = "css/{THEME_NAME}/theme-{THEME_NAME}.css"
+        return static_resource(theme_template.format(THEME_NAME=theme_name))
+    def get_themes():
+        return app.config.get("THEME_LIST") or ("stock", "harajuku", "wildride")
+    return dict(static_resource=static_resource,
+                get_current_theme=get_current_theme,
+                get_current_theme_path=get_current_theme_path,
+                get_themes=get_themes)
 
 
 @app.context_processor

scss/base/navbar.scss

@@ -0,0 +1,4 @@
+.navbar {
+	@extend .navbar-dark;
+	@extend .bg-dark;
+}

scss/base/navbar.scss~

@@ -0,0 +1,4 @@
+.navbar {
+	@extend navbar-dark;
+	@extend .bg-dark;
+}

scss/post.scss → scss/base/post.scss

@@ -4,7 +4,7 @@
 }
 
 .post-container:nth-child(odd) {
-	@extend .bg-light;
+	background-color: #e7e7e7;
 }
 .post-container:nth-child(even) {
 	@extend .bg-white;

scss/styling.scss → scss/base/styling.scss

@@ -16,6 +16,9 @@
 	opacity: 0.3;
 	filter: blur(12px);
 }
+.theme-selector {
+	float: right;
+}
 blockquote {
 	color: var(--green);
 }

scss/themes/harajuku/navbar.scss

@@ -0,0 +1,4 @@
+.navbar {
+	@extend .navbar-light;
+	background-color: #ffc683;
+}

scss/themes/harajuku/post.scss

@@ -0,0 +1,6 @@
+.post-container:nth-child(odd) {
+	background-color: #afcee3;
+}
+.post-container:nth-child(even) {
+	background-color: #f0f7fd;
+}

scss/themes/harajuku/theme-harajuku.scss

@@ -0,0 +1,13 @@
+$body-bg: #e5f2ff;
+$theme-colors: (
+	"primary": #b07274,
+	"info": #4f4f4f
+);
+$navbar-light-color: rgba(#0000, .8);
+$navbar-light-hover-color: rgba(#0000, .9);
+@import "bootstrap";
+@import "catalog";
+@import "post";
+@import "styling";
+@import "captchouli";
+@import "navbar";

scss/maniwani.scss → scss/themes/stock/theme-stock.scss

@@ -3,3 +3,4 @@
 @import "post";
 @import "styling";
 @import "captchouli";
+@import "navbar";

scss/themes/wildride/theme-wildride.scss

@@ -0,0 +1,104 @@
+.post-container:nth-child(odd) {
+	background-color: rgba(255,255,255,.05) !important;
+}
+
+.post-container:nth-child(even) {
+	background-color: rgba(255,255,255,.10) !important;
+}
+
+.container {
+	color: rgba(255,255,255,.7);
+}
+
+.text-info {
+	color: #ff8707ba !important;
+}
+
+.badge-primary {
+	background-color: #ff78707ba !important;
+	opacity:.7;
+	color: rgb(255,255,255);
+}
+
+.badge-secondary {
+	opacity:.7;
+	color: rgb(255,255,255);
+}
+
+.btn-dark {
+	color: rgba(255,255,255,.7);
+	background-color: transparent !important;
+	text-decoration:underline !important;
+	border:none!important;
+}
+
+.thread {
+	border:none !important;
+	border-radius: 0px !important;
+	background-color:rgba(255,255,255,.1) !important;
+}
+
+.thread-stats-container {
+	margin-bottom: 3.5%;
+	margin-right: 3.5%;
+}
+
+.text-light {
+	color: rgba(255,255,255,.7) !important;
+}
+
+.thread .text-body {
+	color: rgba(255,255,255, .7) !important;
+}
+
+.fa-comment, .fa-image {
+	display:none;
+}
+
+.text-center {
+	color:rgba(255,255,255,0.7) !important;
+}
+
+.modal-content {
+	background-color: rgb(33,33,33);
+	color: rgba(255,255,255,.7);
+}
+
+.modal-header {
+	border-bottom: 0px !important;
+}
+
+.modal-footer {
+	border-top: 0px !important;
+}
+
+.navbar {
+	padding: 0rem 1rem;
+	line-height: .8;
+}
+
+.form-control, .jumbotron  {
+	background-color: #49505773 !important;
+	border: 1px solid #49505773;
+	color: #fff !important;
+}
+
+a {
+	color: #ff8707ba;
+}
+
+a:hover {
+	color: #ff8707;
+}
+
+body {
+	font-family:monospace !important;
+}
+$body-bg: black;
+$theme-colors: (
+	"light": rgba(255,255,255,.1)
+);
+@import "bootstrap";
+@import "navbar";
+@import "styling";
+@import "catalog";

templates/base.html

@@ -5,7 +5,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
-	<link rel="stylesheet" href="{{ static_resource("css/maniwani.css") }}">
+	<link rel="stylesheet" href="{{ get_current_theme_path() }}">
     <script src="{{ static_resource("jquery/jquery.min.js") }}"></script>
     <script src="{{ static_resource("popperjs/umd/popper.min.js") }}"></script>
     <script src="{{ static_resource("bootstrap/bootstrap.min.js") }}"></script>
@@ -16,7 +16,7 @@
     <title>{{ instance_name() }} - {% block title %}{% endblock %}</title>
 </head>
 <body>
-<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top mb-2">
+<nav class="navbar navbar-expand-lg sticky-top mb-2">
     <a class="navbar-brand" href="{{ url_for("main.index") }}">{{ instance_name() }}</a>
     <script>
 			 document.write('<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#site-nav"> \
@@ -63,6 +63,20 @@
 {% endwith %}
 {% block content %}{% endblock %}
 <hr>
+<div class="theme-selector">
+	<form method="post" enctype="multipart/form-data" action="{{ url_for("theme.set_theme") }}">
+		<select name="selected-theme">
+			{% for theme_name in get_themes() %}
+				{% if theme_name == get_current_theme() %}
+					<option value="{{ theme_name }}" selected="selected">{{ theme_name }}</option>
+				{% else %}
+					<option value="{{ theme_name }}">{{ theme_name }}</option>
+				{% endif %}
+			{% endfor %}
+		</select>
+		<button id="theme-submit" type="submit" class="btn btn-primary">Select theme</button>
+	</form>
+</div>
 <div class="container-fluid">
     {% block footer %}{% endblock %}
     <p class="text-center text-muted">