From b66a64eefa911f67a79dcead5087d8b26724d7aa Mon Sep 17 00:00:00 2001
From: Jon McClure <jon.r.mcclure@gmail.com>
Date: Thu, 26 Jan 2023 15:19:48 +0000
Subject: [PATCH] background pattern themes

---
 .../SiteHeader/SiteHeader.stories.svelte      |  2 +-
 src/components/Theme/Theme.stories.svelte     | 28 +++++++++++++++
 src/components/Theme/stories/docs/pattern.md  | 36 +++++++++++++++++++
 3 files changed, 65 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Theme/stories/docs/pattern.md

diff --git a/src/components/SiteHeader/SiteHeader.stories.svelte b/src/components/SiteHeader/SiteHeader.stories.svelte
index 771fbd8d..0a39750a 100644
--- a/src/components/SiteHeader/SiteHeader.stories.svelte
+++ b/src/components/SiteHeader/SiteHeader.stories.svelte
@@ -42,7 +42,7 @@
   </div>
 </Story>
 
-<style>
+<style lang="scss">
   div {
     min-height: 625px;
     width: calc(100% + 30px);
diff --git a/src/components/Theme/Theme.stories.svelte b/src/components/Theme/Theme.stories.svelte
index 22e47dbe..cd8fe33f 100644
--- a/src/components/Theme/Theme.stories.svelte
+++ b/src/components/Theme/Theme.stories.svelte
@@ -6,9 +6,12 @@
   // @ts-ignore
   import customiseDocs from './stories/docs/customise.md?raw';
   // @ts-ignore
+  import patternDocs from './stories/docs/pattern.md?raw';
+  // @ts-ignore
   import inheritanceDocs from './stories/docs/inheritance.md?raw';
 
   import ThemedPage from './stories/ThemedPage.svelte';
+  import SiteHeader from '../SiteHeader/SiteHeader.svelte';
 
   import Theme, { themes } from './Theme.svelte';
 
@@ -61,6 +64,20 @@
   </Theme>
 </Story>
 
+<Story name="Background patterns" {...withStoryDocs(patternDocs)}>
+  <div id="pattern-bg">
+    <Theme
+      base="dark"
+      theme="{{
+        colour: { background: 'transparent' },
+      }}"
+    >
+      <SiteHeader />
+      <ThemedPage />
+    </Theme>
+  </div>
+</Story>
+
 <Story name="Inheritance" {...withStoryDocs(inheritanceDocs)}>
   <Theme theme="{themes.light}">
     <div class="themed">
@@ -111,4 +128,15 @@
       width: 100%;
     }
   }
+
+  div#pattern-bg {
+    background-image: url(https://res.cloudinary.com/practicaldev/image/fetch/s--BuPz-p40--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nphrgz8yfnjylrwfr0yl.png);
+
+    :global(.nav-container .inner) {
+      background: #161019 !important;
+    }
+    :global(.nav-container .dropdown) {
+      background: #161019 !important;
+    }
+  }
 </style>
diff --git a/src/components/Theme/stories/docs/pattern.md b/src/components/Theme/stories/docs/pattern.md
new file mode 100644
index 00000000..a7743a4a
--- /dev/null
+++ b/src/components/Theme/stories/docs/pattern.md
@@ -0,0 +1,36 @@
+To use a background pattern or image, set the background colour property in your custom theme to `transparent`...
+
+```svelte
+<Theme
+  base="dark"
+  theme="{{
+    colour: { background: 'transparent' },
+  }}"
+>
+  <!-- Page content -->
+</Theme>
+```
+
+... then set your background image in global SCSS:
+
+```scss
+// global.scss
+body {
+  background-color: darkblue;
+  background-image: url('$assets/images/my-pattern.png');
+}
+```
+
+You may also want to override the background on the header nav if it conflicts with your background, especially the dropdown menu:
+
+```scss
+// global.scss
+// Main nav container
+.nav-container .inner {
+  background: darkblue !important;
+  // Dropdown menu
+  .dropdown {
+    background: darkblue !important;
+  }
+}
+```