Rough implementation of appearance settings

js/admin/src/components/AppearancePage.js

@@ -1,9 +1,81 @@
 import Component from 'flarum/Component';
+import Button from 'flarum/components/Button';
+import Switch from 'flarum/components/Switch';
+import EditCustomCssModal from 'flarum/components/EditCustomCssModal';
+import saveConfig from 'flarum/utils/saveConfig';
 
 export default class AppearancePage extends Component {
+  constructor(...args) {
+    super(...args);
+
+    this.primaryColor = m.prop(app.config.theme_primary_color);
+    this.secondaryColor = m.prop(app.config.theme_secondary_color);
+    this.darkMode = m.prop(app.config.theme_dark_mode === '1');
+    this.coloredHeader = m.prop(app.config.theme_colored_header === '1');
+  }
+
   view() {
     return (
-      <div className="AppearancePage"/>
+      <div className="AppearancePage">
+        <div className="container">
+          <form onsubmit={this.onsubmit.bind(this)}>
+            <fieldset className="AppearancePage-colors">
+              <legend>Colors</legend>
+              <div className="helpText">
+                Choose two colors to theme your forum with. The first will be used as a highlight color, while the second will be used to style background elements.
+              </div>
+
+              <div className="AppearancePage-colors-input">
+                <input className="FormControl" placeholder="#aaaaaa" value={this.primaryColor()} onchange={m.withAttr('value', this.primaryColor)}/>
+                <input className="FormControl" placeholder="#aaaaaa" value={this.secondaryColor()} onchange={m.withAttr('value', this.secondaryColor)}/>
+              </div>
+
+              {Switch.component({
+                state: this.darkMode(),
+                children: 'Dark Mode',
+                onchange: this.darkMode
+              })}
+
+              {Switch.component({
+                state: this.coloredHeader(),
+                children: 'Colored Header',
+                onchange: this.coloredHeader
+              })}
+
+              {Button.component({
+                className: 'Button Button--primary',
+                children: 'Save Changes',
+                loading: this.loading
+              })}
+            </fieldset>
+          </form>
+
+          <fieldset>
+            <legend>Custom Styles</legend>
+            <div className="helpText">
+              Customize your forum's appearance by adding your own LESS/CSS code to be applied on top of Flarum's default styles.
+            </div>
+            {Button.component({
+              className: 'Button',
+              children: 'Edit Custom CSS',
+              onclick: () => app.modal.show(new EditCustomCssModal())
+            })}
+          </fieldset>
+        </div>
+      </div>
     );
   }
+
+  onsubmit(e) {
+    e.preventDefault();
+
+    this.loading = true;
+
+    saveConfig({
+      theme_primary_color: this.primaryColor(),
+      theme_secondary_color: this.secondaryColor(),
+      theme_dark_mode: this.darkMode(),
+      theme_colored_header: this.coloredHeader()
+    }).then(() => window.location.reload());
+  }
 }

js/admin/src/components/EditCustomCssModal.js

@@ -0,0 +1,51 @@
+import Modal from 'flarum/components/Modal';
+import Button from 'flarum/components/Button';
+import saveConfig from 'flarum/utils/saveConfig';
+
+export default class EditCustomCssModal extends Modal {
+  constructor(...args) {
+    super(...args);
+
+    this.customLess = m.prop(app.config.custom_less || '');
+  }
+
+  className() {
+    return 'EditCustomCssModal Modal--large';
+  }
+
+  title() {
+    return 'Edit Custom CSS';
+  }
+
+  content() {
+    return (
+      <div className="Modal-body">
+        <p>Customize your forum's appearance by adding your own LESS/CSS code to be applied on top of Flarum's default styles. <a href="">Read the documentation</a> for more information.</p>
+
+        <div className="Form">
+          <div className="Form-group">
+            <textarea className="FormControl" rows="30" value={this.customLess()} onchange={m.withAttr('value', this.customLess)}/>
+          </div>
+
+          <div className="Form-group">
+            {Button.component({
+              className: 'Button Button--primary',
+              children: 'Save Changes',
+              loading: this.loading
+            })}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  onsubmit(e) {
+    e.preventDefault();
+
+    this.loading = true;
+
+    saveConfig({
+      custom_less: this.customLess()
+    }).then(() => window.location.reload());
+  }
+}

less/admin/AppearancePage.less

@@ -0,0 +1,34 @@
+.AppearancePage {
+  @media @desktop-up {
+    .container {
+      max-width: 600px;
+      padding: 30px;
+      margin: 0;
+    }
+  }
+
+  fieldset {
+    margin-bottom: 40px;
+  }
+}
+.AppearancePage-colors-input {
+  overflow: hidden;
+
+  input {
+    width: 49%;
+    float: left;
+
+    &:first-child {
+      margin-right: 2%;
+    }
+  }
+}
+.AppearancePage-colors-input,
+.AppearancePage-colors .Checkbox {
+  margin-bottom: 15px;
+}
+
+.EditCustomCssModal textarea {
+  font-family: monospace;
+  line-height: 1;
+}

less/admin/app.less

@@ -6,3 +6,4 @@
 @import "PermissionsPage.less";
 @import "EditGroupModal.less";
 @import "ExtensionsPage.less";
+@import "AppearancePage.less";

less/lib/Modal.less

@@ -55,10 +55,6 @@
   width: auto;
   margin: 10px;
   max-width: 600px;
-
-  .Modal--small & {
-    max-width: 400px;
-  }
 }
 
 // Actual modal
@@ -194,7 +190,10 @@
     .box-shadow(0 7px 15px @shadow-color);
   }
   .Modal--small {
-    width: 375px;
+    max-width: 375px;
+  }
+  .Modal--large {
+    max-width: 800px;
   }
   .Modal-header {
     text-align: center;

src/Admin/Actions/UpdateConfigAction.php

@@ -37,6 +37,14 @@ class UpdateConfigAction extends Action
             $this->settings->set($k, $v);
         }
 
+        $assetPath = public_path('assets');
+        $manifest = file_get_contents($assetPath . '/rev-manifest.json');
+        $revisions = json_decode($manifest, true);
+
+        foreach ($revisions as $file => $revision) {
+            @unlink($assetPath . '/' . substr_replace($file, '-' . $revision, strrpos($file, '.'), 0));
+        }
+
         return $this->success();
     }
 }

src/Support/ClientAction.php

@@ -183,8 +183,8 @@ abstract class ClientAction extends HtmlAction
     protected function getLessVariables()
     {
         return [
-            'config-primary-color'   => $this->settings->get('theme_primary_color', '#000'),
+            'config-primary-color'   => $this->settings->get('theme_primary_color') ?: '#000',
-            'config-secondary-color' => $this->settings->get('theme_secondary_color', '#000'),
+            'config-secondary-color' => $this->settings->get('theme_secondary_color') ?: '#000',
             'config-dark-mode'       => $this->settings->get('theme_dark_mode') ? 'true' : 'false',
             'config-colored-header'  => $this->settings->get('theme_colored_header') ? 'true' : 'false'
         ];