Theming (#624)

* Theming

- Custom CSS for blogs
- Custom themes for instance
- New dark theme
- UI to choose your instance theme
- Option to disable blog themes if you prefer to only have the instance theme
- UI to choose a blog theme

templates/blogs/details.rs.html

@@ -5,6 +5,7 @@
 @use templates::{base, partials::post_card};
 @use template_utils::*;
 @use routes::*;
+@use std::path::Path;
 
 @(ctx: BaseContext, blog: Blog, authors: &[User], page: i32, n_pages: i32, posts: Vec<Post>)
 
@@ -23,6 +24,11 @@
 
 	<link href='@Instance::get_local().unwrap().compute_box("~", &blog.fqn, "atom.xml")' rel='alternate' type='application/atom+xml'>
 	<link href='@blog.ap_url' rel='alternate' type='application/activity+json'>
+    @if !ctx.2.clone().map(|u| u.hide_custom_css).unwrap_or(false) {
+        @if let Some(ref theme) = blog.theme {
+            <link rel="stylesheet" href="@uri!(plume_static_files: file = Path::new("css").join(theme).join("theme.css"), _build_id = CACHE_NAME)">
+        }
+    }
 }, {
     <a href="@uri!(blogs::details: name = &blog.fqn, page = _)" dir="auto">@blog.title</a>
 }, {

templates/blogs/edit.rs.html

@@ -1,5 +1,6 @@
 @use validator::ValidationErrors;
 @use plume_models::blogs::Blog;
+@use plume_models::instance::Instance;
 @use plume_models::medias::Media;
 @use routes::blogs;
 @use routes::blogs::EditForm;
@@ -31,6 +32,18 @@
         @:image_select(ctx, "icon", i18n!(ctx.1, "Blog icon"), true, medias.clone(), form.icon)
         @:image_select(ctx, "banner", i18n!(ctx.1, "Blog banner"), true, medias, form.banner)
 
+        @if let Ok(themes) = Instance::list_themes() {
+            <label for="css">@i18n!(ctx.1, "Custom theme")</label>
+            <select name="theme" id="theme">
+                <option value="" @if form.theme.is_none() { selected }>@i18n!(ctx.1, "Default theme")</option>
+                @for theme in themes {
+                    <option value="@theme" @if Some(theme.clone()) == form.theme { selected }>@theme</option>
+                }
+            </select>
+        } else {
+            <p class="error">@i18n!(ctx.1, "Error while loading theme selector.")</p>
+        }
+
         <input type="submit" value="@i18n!(ctx.1, "Update blog")"/>
     </form>