background pattern themes

src/components/SiteHeader/SiteHeader.stories.svelte

@@ -42,7 +42,7 @@
   </div>
 </Story>
 
-<style>
+<style lang="scss">
   div {
     min-height: 625px;
     width: calc(100% + 30px);

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>

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;
+  }
+}
+```