feat: add dark mode and announcement component

components/announcement-banner/about.json

@@ -0,0 +1,14 @@
+{
+  "name": "announcement-banner-DO-NOT-REMOVE",
+  "component": true,
+  "license_url": null,
+  "about_url": null,
+  "authors": null,
+  "theme_version": null,
+  "minimum_discourse_version": null,
+  "maximum_discourse_version": null,
+  "assets": {},
+  "color_schemes": {},
+  "modifiers": {},
+  "learn_more": "https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966"
+}

components/announcement-banner/common/common.scss

@@ -0,0 +1,28 @@
+.announcement {
+  background-color: #a32952;
+  font-family: monospace;
+  color: #ffefef;
+  font-size: 1em;
+  line-height: 1.4;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  margin: 1em 0;
+  padding: 1em;
+}
+
+.announcement a {
+  color: #ffefef;
+  font-weight: bold;
+  text-decoration: underline;
+  padding: 0 4px;
+}
+
+.announcement a:hover {
+  cursor: pointer;
+}
+
+.announcement-heading {
+  text-align: center;
+}

components/announcement-banner/common/head_tag.html

@@ -0,0 +1,65 @@
+<script type="text/discourse-plugin" version="0.8.18">
+
+const h = require("virtual-dom").h;
+
+api.createWidget("banner-box-widget", {
+  tagName: "div.banner-box",
+  html(attrs) {
+
+    const path = window.location.pathname;
+
+    let showOnHomepage;
+    if(settings.display_on_homepage) {
+      let hasSingleForwardSlash = new RegExp('[^\/]\/[^\/]');
+      showOnHomepage = !hasSingleForwardSlash.test(path);
+    }
+
+    let urlMatch;
+    if(settings.url_must_contain.length) {
+      let escapedList = settings.url_must_contain.replace(/\//g, '\\/');
+      let regex = new RegExp(escapedList);
+      urlMatch = regex.test(path);
+    }
+
+    if(showOnHomepage || urlMatch) {
+      return [
+        h('div.container', [
+          this.attach('banner-content-widget')
+        ])
+      ]
+    }
+  }
+});
+
+api.decorateWidget('banner-box-widget:after', helper => {
+  helper.widget.appEvents.on('page:changed', () => {
+    helper.widget.scheduleRerender();
+  });
+});
+
+api.createWidget("banner-content-widget", {
+  tagName: "div#banner-content_wrap",
+  html(attrs) {
+    let columns = h('div', { innerHTML: settings.banner_content })
+    return h('div.row', columns);
+  }
+});
+
+</script>
+
+<script type="text/x-handlebars" data-template-name="/connectors/custom-banner/banner">
+  {{mount-widget widget="banner-box-widget"}}
+</script>
+
+<script type="text/x-handlebars" data-template-name="/connectors/above-main-container/banner-themes">
+  {{#if (theme-setting 'show_for_members')}}
+    {{#if currentUser}}
+      {{plugin-outlet name="custom-banner"}}
+    {{/if}}
+  {{/if}}
+  {{#if (theme-setting 'show_for_anon')}}
+    {{#unless currentUser}}
+      {{plugin-outlet name="custom-banner"}}
+    {{/unless}}
+  {{/if}}
+</script>

palettes/sakura-dreams-dark.json

@@ -0,0 +1,16 @@
+{
+  "Sakura Dreams Dark": {
+    "primary": "fff5f8",
+    "secondary": "7a2048",
+    "tertiary": "ff85a1",
+    "quaternary": "c75b7c",
+    "header_background": "7a2048",
+    "header_primary": "ffb7c5",
+    "highlight": "ffb7c5",
+    "danger": "ff5c5c",
+    "success": "ff9ecf",
+    "love": "ff6eb5",
+    "selected": "ffd6e0",
+    "hover": "ffecf2"
+  }
+}

themes/sakura-dreams-dark/about.json

@@ -0,0 +1,14 @@
+{
+  "name": "Sakura Dreams Dark",
+  "component": false,
+  "license_url": null,
+  "about_url": null,
+  "authors": null,
+  "theme_version": null,
+  "minimum_discourse_version": null,
+  "maximum_discourse_version": null,
+  "assets": {},
+  "color_schemes": {},
+  "modifiers": {},
+  "learn_more": "https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966"
+}

themes/sakura-dreams-dark/common/common.scss

@@ -0,0 +1,20 @@
+body::before {
+  background: url(https://cdn.nhcarrigan.com/background.png);
+  background-size: cover;
+  background-position: center;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  content: "";
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 1;
+  pointer-events: none;
+}
+
+body {
+    background-color: #7a2048dd;
+}