diff --git a/packages/freesewing.shared/components/mdx/example.js b/packages/freesewing.shared/components/mdx/example.js
index a0dda15acca..940af054e2e 100644
--- a/packages/freesewing.shared/components/mdx/example.js
+++ b/packages/freesewing.shared/components/mdx/example.js
@@ -5,6 +5,8 @@ import tutorial from '@freesewing/tutorial'
 import Draft from '@freesewing/components/Draft'
 import Icon from 'shared/components/icon'
 //import Design from '../Workbench/Design'
+//
+const Design = props => <p>TODO: Design</p>
 
 const Example = ({
   pattern = 'examples',
@@ -60,7 +62,7 @@ const Example = ({
   const patternProps = patternInstance.getRenderProps()
   return (
     <figure className={designMode ? 'design example' : 'example'}>
-      <div className="example">
+      <div className="example text-base-content">
         <div className="actions">
           <button
             disabled={!designMode}
@@ -69,23 +71,23 @@ const Example = ({
           >
             <Icon icon='settings' />
           </button>
-          <div className="p-6 card bordered">
-            <div className="form-control">
-              <label className="cursor-pointer label">
-                <span className="label-text">Design mode</span>
-                <input
-                  type="checkbox"
-                  checked={designMode}
-                  className="toggle toggle-primary"
-                  onChange={() => setDesignMode(!designMode)}
-                />
-              </label>
-            </div>
+          <div className="form-control">
+            <label className="cursor-pointer label justify-start gap-4 font-lg lg:font-xl font-bold">
+              <input
+                type="checkbox"
+                checked={designMode}
+                className="toggle toggle-secondary"
+                onChange={() => setDesignMode(!designMode)}
+              />
+              <span className="label-text text-secondary">{designMode ? 'Disable' : 'Enable'} Developer View</span>
+            </label>
           </div>
         </div>
-        <Draft {...patternProps} design={designMode} focus={focus} raiseEvent={raiseEvent} />
+        <div className="shadow rounded border border-base-200">
+          <Draft {...patternProps} design={designMode} focus={focus} raiseEvent={raiseEvent} />
+        </div>
       </div>
-      <figcaption>{children}</figcaption>
+      <figcaption className="text-base-content text-center text-base lg:text-lg italic">{children}</figcaption>
       {designMode && (
         <div className="design">
           <Design
diff --git a/packages/freesewing.shared/components/mdx/index.js b/packages/freesewing.shared/components/mdx/index.js
index e753d315157..6f51745958e 100644
--- a/packages/freesewing.shared/components/mdx/index.js
+++ b/packages/freesewing.shared/components/mdx/index.js
@@ -19,11 +19,20 @@ const mdxCustomComponents = {
   Tip: props => <Popout {...props} tip />,
   Warning: props => <Popout {...props} warning />,
   YouTube,
-  // Tailwind typography plugin overrides
-  h5: props => <h5 className="font-bold my-2">{props.children}</h5>,
-  h6: props => <h6 className="font-bold my-2 text-sm">{props.children}</h6>,
   pre: props => <Highlight {...props} />,
   //code: props => <Highlight {...props} tag='code'/>,
+  // TODO: Handle PatternPage component
+  PatternPage: props => (
+    <Popout {...props} fixme>
+      <p>
+        The PatternPage component is not yet implemented.
+        <br />
+        Below are the props:
+      </p>
+      <pre>{JSON.stringify(props, null ,2)}</pre>
+    </Popout>
+  ),
+
 }
 
 export default mdxCustomComponents
diff --git a/packages/freesewing.shared/config/tailwind.config.js b/packages/freesewing.shared/config/tailwind.config.js
index dab4b22f8af..a983e299c3b 100644
--- a/packages/freesewing.shared/config/tailwind.config.js
+++ b/packages/freesewing.shared/config/tailwind.config.js
@@ -1,7 +1,5 @@
 // Handle themes
-const allThemes = require('../themes')
-const themes = {}
-for (const theme in allThemes) themes[theme] = allThemes[theme].config
+const themes = require('../themes')
 
 module.exports = {
   content: [
diff --git a/packages/freesewing.shared/styles/globals.css b/packages/freesewing.shared/styles/globals.css
index dc6fcbd3ec7..658e5b15c0c 100644
--- a/packages/freesewing.shared/styles/globals.css
+++ b/packages/freesewing.shared/styles/globals.css
@@ -5,8 +5,9 @@
 @import './code.css';
 @import './svg-freesewing-draft.css';
 
-/* Applied styles for common HTML tags */
 @layer components {
+
+  /* Applied styles for common HTML tags */
   h1 { @apply text-base-content text-4xl py-5 font-bold lg:text-6xl }
   h2 { @apply text-base-content text-3xl py-4 font-bold lg:text-4xl }
   h3 { @apply text-base-content text-2xl py-3 font-bold lg:text-3xl }
@@ -14,13 +15,87 @@
   h5 { @apply text-base-content text-lg py-1 font-bold lg:text-xl }
   h6 { @apply text-base-content text-base font-bold lg:text-lg }
   p { @apply text-base-content my-1 py-2 lg:text-xl }
+
   /* mdx styles */
   .mdx a { @apply text-secondary }
   .mdx a:hover { @apply text-secondary-focus }
   .mdx p > code { @apply text-info px-1 rounded-lg }
   .mdx ul { @apply pl-4 list-disc list-inside text-base-content }
+
+  /* FreeSewing SVG output styles */
+  .fs-stroke-fabric      { stroke: var(--pattern-fabric); }
+  .fs-stroke-lining      { stroke: var(--pattern-lining); }
+  .fs-stroke-interfacing { stroke: var(--pattern-interfacing); }
+  .fs-stroke-canvas      { stroke: var(--pattern-canvas); }
+  .fs-stroke-various     { stroke: var(--pattern-various); }
+  .fs-stroke-mark        { stroke: var(--pattern-mark); }
+  .fs-stroke-contrast    { stroke: var(--pattern-contrast); }
+  .fs-stroke-note        { stroke: var(--pattern-note); }
+  svg.freesewing.draft path.fabric,
+  svg.freesewing.draft circle.fabric { @apply fs-stroke-fabric }
+  svg.freesewing.draft path.lining,
+  svg.freesewing.draft circle.lining { @apply fs-stroke-lining }
+  svg.freesewing.draft path.interfacing,
+  svg.freesewing.draft circle.interfacing { @apply fs-stroke-interfacing }
+  svg.freesewing.draft path.canvas,
+  svg.freesewing.draft circle.canvas { @apply fs-stroke-canvas }
+  svg.freesewing.draft path.various,
+  svg.freesewing.draft circle.various { @apply fs-stroke-various }
+  svg.freesewing.draft path.mark,
+  svg.freesewing.draft circle.mark { @apply fs-stroke-mark }
+  svg.freesewing.draft path.contrast,
+  svg.freesewing.draft circle.contrast { @apply fs-stroke-contrast }
+  svg.freesewing.draft path.note,
+  svg.freesewing.draft circle.note { @apply fs-stroke-note }
+  .fs-fill-fabric      { fill: var(--pattern-fabric); }
+  .fs-fill-lining      { fill: var(--pattern-lining); }
+  .fs-fill-interfacing { fill: var(--pattern-interfacing); }
+  .fs-fill-canvas      { fill: var(--pattern-canvas); }
+  .fs-fill-various     { fill: var(--pattern-various); }
+  .fs-fill-mark        { fill: var(--pattern-mark); }
+  .fs-fill-contrast    { fill: var(--pattern-contrast); }
+  .fs-fill-note        { fill: var(--pattern-note); }
+  svg.freesewing.draft path.fill-fabric,
+  svg.freesewing.draft text.fill-fabric,
+  svg.freesewing.draft tspan.fill-fabric,
+  svg.freesewing.draft circle.fill-fabric { @apply fs-fill-fabric }
+  svg.freesewing.draft text.fill-lining,
+  svg.freesewing.draft tspan.fill-lining,
+  svg.freesewing.draft path.fill-lining,
+  svg.freesewing.draft circle.fill-lining { @apply fs-fill-lining }
+  svg.freesewing.draft text.fill-interfacing,
+  svg.freesewing.draft tspan.fill-interfacing,
+  svg.freesewing.draft path.fill-interfacing,
+  svg.freesewing.draft circle.fill-interfacing { @apply fs-fill-interfacing }
+  svg.freesewing.draft text.fill-canvas,
+  svg.freesewing.draft tspan.fill-canvas,
+  svg.freesewing.draft path.fill-canvas,
+  svg.freesewing.draft circle.fill-canvas { @apply fs-fill-canvas }
+  svg.freesewing.draft text.fill-various,
+  svg.freesewing.draft tspan.fill-various,
+  svg.freesewing.draft path.fill-various,
+  svg.freesewing.draft circle.fill-various { @apply fs-fill-various }
+  svg.freesewing.draft path.fill-mark,
+  svg.freesewing.draft text.fill-mark,
+  svg.freesewing.draft tspan.fill-mark,
+  svg.freesewing.draft circle.fill-mark { @apply fs-fill-mark }
+  svg.freesewing.draft text.fill-contrast,
+  svg.freesewing.draft tspan.fill-contrast,
+  svg.freesewing.draft path.fill-contrast,
+  svg.freesewing.draft circle.fill-contrast { @apply fs-fill-contrast }
+  svg.freesewing.draft text.fill-note,
+  svg.freesewing.draft tspan.fill-note,
+  svg.freesewing.draft path.fill-note,
+  svg.freesewing.draft circle.fill-note { @apply fs-fill-note }
+
+  .fs-fill-bg { fill: var(--pattern-bg); }
+  .fs-fill-current { fill: currentColor; }
+  svg.freesewing.draft .fill-bg { @apply fs-fill-bg }
+  svg.freesewing.draft .fill-current { @apply fs-fill-current }
 }
 
+
+
 details { user-select: none; }
 details > summary > svg.details-toggle {
   transform: rotate(90deg);
diff --git a/packages/freesewing.shared/themes/dark/index.js b/packages/freesewing.shared/themes/dark/index.js
index 55c41e7e674..1bb621d1e59 100644
--- a/packages/freesewing.shared/themes/dark/index.js
+++ b/packages/freesewing.shared/themes/dark/index.js
@@ -2,65 +2,63 @@ const colors = require('tailwindcss/colors')
 const gray = colors.neutral
 
 module.exports = {
-  icon: "🌚",
-  config: {
-    'fontFamily': '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif',
-    'primary': gray['300'],
-    'primary-focus': colors.violet['300'],
-    'primary-content': gray['900'],
+  'fontFamily': '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif',
+  'primary': gray['300'],
+  'primary-focus': colors.violet['300'],
+  'primary-content': gray['900'],
 
-    'secondary': colors.violet['500'],
-    'secondary-focus': colors.violet['400'],
-    'secondary-content': colors.violet['900'],
+  'secondary': colors.violet['500'],
+  'secondary-focus': colors.violet['400'],
+  'secondary-content': colors.violet['900'],
 
-    'accent': colors.emerald['500'],
-    'accent-focus': colors.emerald['400'],
-    'accent-content': gray['900'],
+  'accent': colors.emerald['500'],
+  'accent-focus': colors.emerald['400'],
+  'accent-content': gray['900'],
 
-    'neutral': gray['900'],
-    'neutral-focus': gray['800'],
-    'neutral-content': gray['300'],
+  'neutral': gray['900'],
+  'neutral-focus': gray['800'],
+  'neutral-content': gray['300'],
 
-    'base-100': gray['900'],
-    'base-200': gray['700'],
-    'base-300': gray['600'],
-    'base-content': gray['300'],
+  'base-100': gray['900'],
+  'base-200': gray['700'],
+  'base-300': gray['600'],
+  'base-content': gray['300'],
 
-    'info': colors.emerald['700'],
-    'success': colors.green['500'],
-    'warning': colors.amber['500'],
-    'error': colors.red['400'],
+  'info': colors.emerald['700'],
+  'success': colors.green['500'],
+  'warning': colors.amber['500'],
+  'error': colors.red['400'],
 
-    '--code-background-color': '#111',
-    '--code-border-color': colors.neutral['800'],
-    '--code-color': colors.neutral['300'],
-    '--code-font-family': `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`,
-    '--code-border-radius': '0.5rem',
-    '--code-border-style': 'solid',
-    '--code-border-width': 2,
-    '--code-outer-padding': '0 0.5rem',
-    '--code-inner-padding': '1rem',
-    '--code-color-keyword': colors.pink['400'],
-    '--code-font-weight-keyword': 'bold',
-    '--code-color-entity': colors.violet['400'],
-    '--code-font-weight-entity': 'bold',
-    '--code-color-constant': colors.lime['300'],
-    '--code-color-string': colors.sky['300'],
-    '--code-font-style-string': 'italic',
-    '--code-color-variable': colors.indigo['300'],
-    '--code-color-comment': colors.neutral['600'],
-    '--code-color-tag': colors.green['600'],
-    '--code-color-property': colors.yellow['200'],
-    '--code-font-weight-property': 'bold',
+  '--code-background-color': '#111',
+  '--code-border-color': colors.neutral['800'],
+  '--code-color': colors.neutral['300'],
+  '--code-font-family': `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`,
+  '--code-border-radius': '0.5rem',
+  '--code-border-style': 'solid',
+  '--code-border-width': 2,
+  '--code-outer-padding': '0 0.5rem',
+  '--code-inner-padding': '1rem',
+  '--code-color-keyword': colors.pink['400'],
+  '--code-font-weight-keyword': 'bold',
+  '--code-color-entity': colors.violet['400'],
+  '--code-font-weight-entity': 'bold',
+  '--code-color-constant': colors.lime['300'],
+  '--code-color-string': colors.sky['300'],
+  '--code-font-style-string': 'italic',
+  '--code-color-variable': colors.indigo['300'],
+  '--code-color-comment': colors.neutral['600'],
+  '--code-color-tag': colors.green['600'],
+  '--code-color-property': colors.yellow['200'],
+  '--code-font-weight-property': 'bold',
 
-    '--pattern-fabric': colors.neutral['300'],
-    '--pattern-lining': colors.emerald['700'],
-    '--pattern-interfacing': colors.neutral['500'],
-    '--pattern-canvas': colors.amber['700'],
-    '--pattern-various': colors.red['700'],
-    '--pattern-mark': colors.blue['700'],
-    '--pattern-contrast': colors.pink['600'],
-    '--pattern-note': colors.violet['600'],
+  '--pattern-bg': colors.neutral['900'],
+  '--pattern-fabric': colors.neutral['300'],
+  '--pattern-lining': colors.emerald['700'],
+  '--pattern-interfacing': colors.neutral['500'],
+  '--pattern-canvas': colors.amber['700'],
+  '--pattern-various': colors.red['700'],
+  '--pattern-mark': colors.blue['700'],
+  '--pattern-contrast': colors.pink['600'],
+  '--pattern-note': colors.violet['600'],
 
-  }
 }
diff --git a/packages/freesewing.shared/themes/hax0r/index.js b/packages/freesewing.shared/themes/hax0r/index.js
index a5f3bac63ab..a5fdf6486a2 100644
--- a/packages/freesewing.shared/themes/hax0r/index.js
+++ b/packages/freesewing.shared/themes/hax0r/index.js
@@ -1,83 +1,73 @@
 const colors = require('tailwindcss/colors')
-const gray = colors.neutral
 
 module.exports = {
-  icon: "👩‍💻",
-  config: {
-    'fontFamily': `ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;`,
-    'primary': colors.lime['600'],
-    'primary-focus': colors.lime['700'],
-    'primary-content': colors.lime['100'],
+  'fontFamily': `ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;`,
+  'primary': colors.lime['600'],
+  'primary-focus': colors.lime['700'],
+  'primary-content': colors.lime['100'],
 
-    'secondary': colors.lime['600'],
-    'secondary-focus': colors.lime['500'],
-    'secondary-content': colors.lime['100'],
+  'secondary': colors.lime['600'],
+  'secondary-focus': colors.lime['500'],
+  'secondary-content': colors.lime['100'],
 
-    'accent': colors.yellow['400'],
-    'accent-focus': colors.yellow['500'],
-    'accent-content': gray['900'],
+  'accent': colors.yellow['400'],
+  'accent-focus': colors.yellow['500'],
+  'accent-content': colors.neutral['900'],
 
-    'neutral': colors.lime['900'],
-    'neutral-focus': gray['200'],
-    'neutral-content': colors.lime['300'],
+  'neutral': colors.lime['900'],
+  'neutral-focus': colors.neutral['200'],
+  'neutral-content': colors.lime['300'],
 
-    'base-100': '#002808',
-    'base-200': '#002808',
-    'base-300': colors.lime['900'],
-    'base-content': colors.lime['500'],
+  'base-100': '#002808',
+  'base-200': '#002808',
+  'base-300': colors.lime['900'],
+  'base-content': colors.lime['500'],
 
-    'info': colors.lime['700'],
-    'success': colors.green['600'],
-    'warning': colors.amber['400'],
-    'error': colors.red['400'],
+  'info': colors.lime['700'],
+  'success': colors.green['600'],
+  'warning': colors.amber['400'],
+  'error': colors.red['400'],
 
-    '--rounded-btn': '0',
+  '--rounded-btn': '0',
 
-    '--code-background-color': '#002407',
-    '--code-border-color': colors.lime['900'],
-    '--code-color': colors.lime['600'],
-    '--code-font-family': `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`,
-    '--code-border-radius': 0,
-    '--code-border-style': 'solid',
-    '--code-border-width': 1,
-    '--code-outer-padding': '0 0.5rem',
-    '--code-inner-padding': '1rem',
-    '--code-color-keyword': colors.lime['400'],
-    '--code-font-weight-keyword': 'bold',
-    '--code-color-entity': colors.lime['400'],
-    '--code-font-weight-entity': 'bold',
-    '--code-color-constant': colors.lime['200'],
-    '--code-color-string': colors.lime['200'],
-    '--code-font-style-string': 'italic',
-    '--code-color-variable': colors.lime['400'],
-    '--code-color-comment': colors.lime['600'],
-    '--code-color-tag': colors.lime['400'],
-    '--code-color-property': colors.lime['200'],
-    '--code-font-weight-property': 'bold',
+  '--code-background-color': '#002407',
+  '--code-border-color': colors.lime['900'],
+  '--code-color': colors.lime['600'],
+  '--code-font-family': `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`,
+  '--code-border-radius': 0,
+  '--code-border-style': 'solid',
+  '--code-border-width': 1,
+  '--code-outer-padding': '0 0.5rem',
+  '--code-inner-padding': '1rem',
+  '--code-color-keyword': colors.lime['400'],
+  '--code-font-weight-keyword': 'bold',
+  '--code-color-entity': colors.lime['400'],
+  '--code-font-weight-entity': 'bold',
+  '--code-color-constant': colors.lime['200'],
+  '--code-color-string': colors.lime['200'],
+  '--code-font-style-string': 'italic',
+  '--code-color-variable': colors.lime['400'],
+  '--code-color-comment': colors.lime['600'],
+  '--code-color-tag': colors.lime['400'],
+  '--code-color-property': colors.lime['200'],
+  '--code-font-weight-property': 'bold',
 
-    '--pattern-fabric': colors.neutral['700'],
-    '--pattern-lining': colors.emerald['500'],
-    '--pattern-interfacing': colors.neutral['400'],
-    '--pattern-canvas': colors.amber['600'],
-    '--pattern-various': colors.red['500'],
-    '--pattern-mark': colors.blue['500'],
-    '--pattern-contrast': colors.pink['500'],
-    '--pattern-note': colors.violet['500'],
-    '--pattern-fabric': colors.neutral['700'],
-    '--pattern-lining': colors.emerald['500'],
-    '--pattern-interfacing': colors.neutral['400'],
-    '--pattern-canvas': colors.amber['600'],
-    '--pattern-various': colors.red['500'],
-    '--pattern-mark': colors.blue['500'],
-    '--pattern-contrast': colors.pink['500'],
-    '--pattern-note': colors.violet['500'],
+  '--pattern-bg': colors.lime['900'],
+  '--pattern-fabric': colors.neutral['700'],
+  '--pattern-lining': colors.emerald['500'],
+  '--pattern-interfacing': colors.neutral['400'],
+  '--pattern-canvas': colors.amber['600'],
+  '--pattern-various': colors.red['500'],
+  '--pattern-mark': colors.blue['500'],
+  '--pattern-contrast': colors.pink['500'],
+  '--pattern-note': colors.violet['500'],
+  '--pattern-fabric': colors.neutral['700'],
+  '--pattern-lining': colors.emerald['500'],
+  '--pattern-interfacing': colors.neutral['400'],
+  '--pattern-canvas': colors.amber['600'],
+  '--pattern-various': colors.red['500'],
+  '--pattern-mark': colors.blue['500'],
+  '--pattern-contrast': colors.pink['500'],
+  '--pattern-note': colors.violet['500'],
 
-    ".mdx.prose a" : {
-      color: colors.lime['600'],
-      'text-decoration': 'underline',
-    },
-    ".mdx.prose a:hover" : {
-      color: colors.lime['500'],
-    },
-  }
 }
diff --git a/packages/freesewing.shared/themes/lgbtq/index.js b/packages/freesewing.shared/themes/lgbtq/index.js
index df191b6d85a..c7aae0ed8d0 100644
--- a/packages/freesewing.shared/themes/lgbtq/index.js
+++ b/packages/freesewing.shared/themes/lgbtq/index.js
@@ -1,71 +1,33 @@
 const colors = require('tailwindcss/colors')
 
 module.exports = {
-  // fontFamily: The font family to use.
   'fontFamily': '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif',
 
-  // base-100: The default background color
   'base-100': colors.neutral['50'],
-  // base-200: A slightly different background color, used for hovers and so on
   'base-200': colors.neutral['200'],
-  // base-300: A shade midway between dark and light
   'base-300': colors.neutral['400'],
-  // base-content: The default text color
   'base-content': colors.neutral['700'],
 
-  // primary: The main brand color and color of the primary button
   'primary': colors.sky['500'],
-  // primary-focus: The :hover color for the primary button
   'primary-focus': colors.sky['600'],
-  // primary-content: The text color for the primary button
   'primary-content': colors.sky['100'],
-
-  // secondary: The link color
   'secondary': colors.violet['500'],
-  // secondary: The :hover link color
   'secondary-focus': colors.violet['400'],
-  // secondary: An alternative link color for on dark backgrounds
-  // Typically a light shade of the secondary color
   'secondary-content': colors.violet['300'],
 
-  // accent: The accent color is used to highlight active things
-  // Should be something is positive/neutral. Avoid red or orange.
   'accent': colors.emerald['500'],
-  // accent-focus: The :hover color for the accent button
   'accent-focus': colors.emerald['400'],
-  // accent-content: The text color for the accent button
   'accent-content': colors.neutral['900'],
 
-  // neutral: Used as the background for the footer and code blocks.
-  // Should always be dark(ish) because of prism syntax highlighting
   'neutral': colors.neutral['800'],
-  // neutral-focus: Typically a shade lighter than neutral
   'neutral-focus': colors.neutral['700'],
-  // neutral-content: The text color on neutral backgrounds
   'neutral-content': colors.neutral['200'],
 
-  // info: Used rarely, can be another color best somewhat neutral looking
-  // and should work with the default text color
   'info': colors.pink['400'],
-  // success: Used rarely, but if it is it's in notifications indicating success
-  // Typically some shade of green
   'success': colors.green['600'],
-  // warning: We don't do warnings, but this is used for the tabs under code blocks
-  // and a couple of other UI elements.
   'warning': colors.amber['500'],
-  // error: Used rarely, but if it is it's in notifications indicating success
-  // or the danger button
-  // Typically some shade of red
   'error': colors.red['600'],
 
-  /* CODE HIGHLIGHTING COLORS
-  *
-  * These are variables to style highlighted code blocks.
-  *
-  * Specifically this first set applies to the wrapper around
-  * the highlighted code.
-  * The names should (hopefully) speak for themselves
-  */
   '--code-background-color': colors.neutral['100'],
   '--code-border-color': colors.neutral['300'],
   '--code-color': colors.neutral['900'],
@@ -75,9 +37,7 @@ module.exports = {
   '--code-border-width': 1,
   '--code-outer-padding': '0 0.5rem',
   '--code-inner-padding': '1rem',
-  /*
-  * These variables are used to style the highlighted tokesn themselves
-  */
+
   '--code-color-keyword': colors.pink['500'],
   '--code-font-weight-keyword': 'bold',
   '--code-color-entity': colors.violet['500'],
@@ -90,5 +50,15 @@ module.exports = {
   '--code-color-tag': colors.green['600'],
   '--code-color-property': 'inherit',
   '--code-font-weight-property': 'bold',
+
+  '--pattern-bg': colors.neutral['50'],
+  '--pattern-fabric': colors.neutral['700'],
+  '--pattern-lining': colors.emerald['500'],
+  '--pattern-interfacing': colors.neutral['400'],
+  '--pattern-canvas': colors.amber['600'],
+  '--pattern-various': colors.red['500'],
+  '--pattern-mark': colors.blue['500'],
+  '--pattern-contrast': colors.pink['500'],
+  '--pattern-note': colors.violet['500'],
 }
 
diff --git a/packages/freesewing.shared/themes/light/index.js b/packages/freesewing.shared/themes/light/index.js
index 54c927e947b..23f199c4958 100644
--- a/packages/freesewing.shared/themes/light/index.js
+++ b/packages/freesewing.shared/themes/light/index.js
@@ -17,164 +17,163 @@
 const colors = require('tailwindcss/colors')
 
 module.exports = {
-  icon: "🌞",
-  config: {
 
-    /* FONTS
-    *
-    * This will apply to everything except code blocks
+  /* FONTS
+  *
+  * This will apply to everything except code blocks
+  */
+
+  // fontFamily: The font family to use.
+  'fontFamily': '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif',
+
+  /* COLORS
+  *
+  * These names are a bit 'bootstrap' like, which can be misleading.
+  * We don't really use primary and secondary colors, nor do we have
+  * a warning color and so on.
+  * However, these names are used under the hood by TailwindCSS
+  * and DaisyUI, so we're stuck with them.
+  *
+  * Read the descriptions below to understand what each color is used for.
+  */
+
+  // base-100: The default background color
+  'base-100': colors.neutral['50'],
+  // base-200: A slightly different background color, used for hovers and so on
+  'base-200': colors.neutral['200'],
+  // base-300: A shade midway between dark and light
+  'base-300': colors.neutral['400'],
+  // base-content: The default text color
+  'base-content': colors.neutral['700'],
+
+  // primary: The main brand color and color of the primary button
+  'primary': colors.violet['700'],
+  // primary-focus: The :hover color for the primary button
+  'primary-focus': colors.violet['600'],
+  // primary-content: The text color for the primary button
+  'primary-content': colors.violet['50'],
+
+  // secondary: The link color
+  'secondary': colors.sky['500'],
+  // secondary: The :hover link color
+  'secondary-focus': colors.sky['400'],
+  // secondary: An alternative link color for on dark backgrounds
+  // Typically a light shade of the secondary color
+  'secondary-content': colors.sky['300'],
+
+  // accent: The accent color is used to highlight active things
+  // Should be something is positive/neutral. Avoid red or orange.
+  'accent': colors.emerald['500'],
+  // accent-focus: The :hover color for the accent button
+  'accent-focus': colors.emerald['400'],
+  // accent-content: The text color for the accent button
+  'accent-content': colors.neutral['900'],
+
+  // neutral: Used as the background for the footer and code blocks.
+  // Should always be dark(ish) because of prism syntax highlighting
+  'neutral': colors.neutral['800'],
+  // neutral-focus: Typically a shade lighter than neutral
+  'neutral-focus': colors.neutral['700'],
+  // neutral-content: The text color on neutral backgrounds
+  'neutral-content': colors.neutral['200'],
+
+  // info: Used rarely, can be another color best somewhat neutral looking
+  // and should work with the default text color
+  'info': colors.violet['400'],
+  // success: Used rarely, but if it is it's in notifications indicating success
+  // Typically some shade of green
+  'success': colors.green['500'],
+  // warning: We don't do warnings, but this is used for the tabs under code blocks
+  // and a couple of other UI elements.
+  'warning': colors.amber['500'],
+  // error: Used rarely, but if it is it's in notifications indicating success
+  // or the danger button
+  // Typically some shade of red
+  'error': colors.red['600'],
+
+  /* VARIOUS
+  *
+  * These are additional variables to control other aspects of the theme
+  */
+
+  // border-radius for cards and other big elements
+  '--rounded-box': '0.5rem',
+  // border-radius for buttons and similar elements
+  '--rounded-btn': '0.5rem',
+  // border-radius for badges and other small elements
+  '--rounded-badge': '1.9rem',
+  // bounce animation time for button
+  '--animation-btn': '0.25s',
+  // bounce animation time for checkbox, toggle, etc
+  '--animation-input': '.4s',
+  // default card-body padding
+  '--padding-card': '2rem',
+  // default text case for buttons
+  '--btn-text-case': 'uppercase',
+  // default padding for navbar
+  '--navbar-padding': '.5rem',
+  // default border size for button
+  '--border-btn': '1px',
+  // focus ring size for button and inputs
+  '--focus-ring': '2px',
+  // focus ring offset size for button and inputs
+  '--focus-ring-offset': '2px',
+
+  /* CODE HIGHLIGHTING COLORS
+  *
+  * These are variables to style highlighted code blocks.
+  *
+  * Specifically this first set applies to the wrapper around
+  * the highlighted code.
+  * The names should (hopefully) speak for themselves
+  */
+  '--code-background-color': colors.neutral['800'],
+  '--code-border-color': colors.neutral['900'],
+  '--code-color': colors.neutral['100'],
+  '--code-font-family': `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`,
+  '--code-border-radius': '0.5rem',
+  '--code-border-style': 'solid',
+  '--code-border-width': 1,
+  '--code-outer-padding': '0 0.5rem',
+  '--code-inner-padding': '1rem',
+  /*
+    * These variables are used to style the highlighted tokesn themselves
     */
+  '--code-color-keyword': colors.pink['400'],
+  '--code-font-weight-keyword': 'bold',
+  '--code-color-entity': colors.violet['400'],
+  '--code-font-weight-entity': 'bold',
+  '--code-color-constant': colors.lime['400'],
+  '--code-color-string': colors.sky['400'],
+  '--code-font-style-string': 'italic',
+  '--code-color-variable': colors.indigo['400'],
+  '--code-color-comment': colors.neutral['400'],
+  '--code-color-tag': colors.green['400'],
+  '--code-color-property': 'inherit',
+  '--code-font-weight-property': 'bold',
 
-    // fontFamily: The font family to use.
-    'fontFamily': '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif',
+  /* FREESEWING PATTERN COLORS
+  *
+  * These are variables to style FreeSewing SVG output (drafts, examples, and so on)
+  */
 
-    /* COLORS
-    *
-    * These names are a bit 'bootstrap' like, which can be misleading.
-    * We don't really use primary and secondary colors, nor do we have
-    * a warning color and so on.
-    * However, these names are used under the hood by TailwindCSS
-    * and DaisyUI, so we're stuck with them.
-    *
-    * Read the descriptions below to understand what each color is used for.
-    */
+  // Pattern background color
+  '--pattern-bg': colors.neutral['50'],
+  // Color for the main fabric
+  '--pattern-fabric': colors.neutral['700'],
+  // Color for lining fabric
+  '--pattern-lining': colors.emerald['500'],
+  // Color for interfacing
+  '--pattern-interfacing': colors.neutral['400'],
+  // Color for canvas
+  '--pattern-canvas': colors.amber['600'],
+  // Color for various fabric types
+  '--pattern-various': colors.red['500'],
+  // Color for marking things on a pattern
+  '--pattern-mark': colors.blue['500'],
+  // Color to provide contrast on a pattern
+  '--pattern-contrast': colors.pink['500'],
+  // Color for noting things on a pattern
+  '--pattern-note': colors.violet['500'],
 
-    // base-100: The default background color
-    'base-100': colors.neutral['50'],
-    // base-200: A slightly different background color, used for hovers and so on
-    'base-200': colors.neutral['200'],
-    // base-300: A shade midway between dark and light
-    'base-300': colors.neutral['400'],
-    // base-content: The default text color
-    'base-content': colors.neutral['700'],
-
-    // primary: The main brand color and color of the primary button
-    'primary': colors.violet['700'],
-    // primary-focus: The :hover color for the primary button
-    'primary-focus': colors.violet['600'],
-    // primary-content: The text color for the primary button
-    'primary-content': colors.violet['50'],
-
-    // secondary: The link color
-    'secondary': colors.sky['500'],
-    // secondary: The :hover link color
-    'secondary-focus': colors.sky['400'],
-    // secondary: An alternative link color for on dark backgrounds
-    // Typically a light shade of the secondary color
-    'secondary-content': colors.sky['300'],
-
-    // accent: The accent color is used to highlight active things
-    // Should be something is positive/neutral. Avoid red or orange.
-    'accent': colors.emerald['500'],
-    // accent-focus: The :hover color for the accent button
-    'accent-focus': colors.emerald['400'],
-    // accent-content: The text color for the accent button
-    'accent-content': colors.neutral['900'],
-
-    // neutral: Used as the background for the footer and code blocks.
-    // Should always be dark(ish) because of prism syntax highlighting
-    'neutral': colors.neutral['800'],
-    // neutral-focus: Typically a shade lighter than neutral
-    'neutral-focus': colors.neutral['700'],
-    // neutral-content: The text color on neutral backgrounds
-    'neutral-content': colors.neutral['200'],
-
-    // info: Used rarely, can be another color best somewhat neutral looking
-    // and should work with the default text color
-    'info': colors.violet['400'],
-    // success: Used rarely, but if it is it's in notifications indicating success
-    // Typically some shade of green
-    'success': colors.green['500'],
-    // warning: We don't do warnings, but this is used for the tabs under code blocks
-    // and a couple of other UI elements.
-    'warning': colors.amber['500'],
-    // error: Used rarely, but if it is it's in notifications indicating success
-    // or the danger button
-    // Typically some shade of red
-    'error': colors.red['600'],
-
-    /* VARIOUS
-    *
-    * These are additional variables to control other aspects of the theme
-    */
-
-    // border-radius for cards and other big elements
-    '--rounded-box': '0.5rem',
-    // border-radius for buttons and similar elements
-    '--rounded-btn': '0.5rem',
-    // border-radius for badges and other small elements
-    '--rounded-badge': '1.9rem',
-    // bounce animation time for button
-    '--animation-btn': '0.25s',
-    // bounce animation time for checkbox, toggle, etc
-    '--animation-input': '.4s',
-    // default card-body padding
-    '--padding-card': '2rem',
-    // default text case for buttons
-    '--btn-text-case': 'uppercase',
-    // default padding for navbar
-    '--navbar-padding': '.5rem',
-    // default border size for button
-    '--border-btn': '1px',
-    // focus ring size for button and inputs
-    '--focus-ring': '2px',
-    // focus ring offset size for button and inputs
-    '--focus-ring-offset': '2px',
-
-    /* CODE HIGHLIGHTING COLORS
-    *
-    * These are variables to style highlighted code blocks.
-    *
-    * Specifically this first set applies to the wrapper around
-    * the highlighted code.
-    * The names should (hopefully) speak for themselves
-    */
-    '--code-background-color': colors.neutral['800'],
-    '--code-border-color': colors.neutral['900'],
-    '--code-color': colors.neutral['100'],
-    '--code-font-family': `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`,
-    '--code-border-radius': '0.5rem',
-    '--code-border-style': 'solid',
-    '--code-border-width': 1,
-    '--code-outer-padding': '0 0.5rem',
-    '--code-inner-padding': '1rem',
-    /*
-     * These variables are used to style the highlighted tokesn themselves
-     */
-    '--code-color-keyword': colors.pink['400'],
-    '--code-font-weight-keyword': 'bold',
-    '--code-color-entity': colors.violet['400'],
-    '--code-font-weight-entity': 'bold',
-    '--code-color-constant': colors.lime['400'],
-    '--code-color-string': colors.sky['400'],
-    '--code-font-style-string': 'italic',
-    '--code-color-variable': colors.indigo['400'],
-    '--code-color-comment': colors.neutral['400'],
-    '--code-color-tag': colors.green['400'],
-    '--code-color-property': 'inherit',
-    '--code-font-weight-property': 'bold',
-
-    /* FREESEWING PATTERN COLORS
-    *
-    * These are variables to style FreeSewing SVG output (drafts, examples, and so on)
-    */
-
-    // Color for the main fabric
-    '--pattern-fabric': colors.neutral['700'],
-    // Color for lining fabric
-    '--pattern-lining': colors.emerald['500'],
-    // Color for interfacing
-    '--pattern-interfacing': colors.neutral['400'],
-    // Color for canvas
-    '--pattern-canvas': colors.amber['600'],
-    // Color for various fabric types
-    '--pattern-various': colors.red['500'],
-    // Color for marking things on a pattern
-    '--pattern-mark': colors.blue['500'],
-    // Color to provide contrast on a pattern
-    '--pattern-contrast': colors.pink['500'],
-    // Color for noting things on a pattern
-    '--pattern-note': colors.violet['500'],
-
-  }
 }
diff --git a/packages/freesewing.shared/themes/trans/index.js b/packages/freesewing.shared/themes/trans/index.js
index ef2e73fe37e..c7aae0ed8d0 100644
--- a/packages/freesewing.shared/themes/trans/index.js
+++ b/packages/freesewing.shared/themes/trans/index.js
@@ -1,88 +1,33 @@
 const colors = require('tailwindcss/colors')
 
 module.exports = {
-
-  /* FONTS
-  *
-  * This will apply to everything except code blocks
-  */
-
-  // fontFamily: The font family to use.
   'fontFamily': '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif',
 
-  /* COLORS
-  *
-  * These names are a bit 'bootstrap' like, which can be misleading.
-  * We don't really use primary and secondary colors, nor do we have
-  * a warning color and so on.
-  * However, these names are used under the hood by TailwindCSS
-  * and DaisyUI, so we're stuck with them.
-  *
-  * Read the descriptions below to understand what each color is used for.
-  */
-
-  // base-100: The default background color
   'base-100': colors.neutral['50'],
-  // base-200: A slightly different background color, used for hovers and so on
   'base-200': colors.neutral['200'],
-  // base-300: A shade midway between dark and light
   'base-300': colors.neutral['400'],
-  // base-content: The default text color
   'base-content': colors.neutral['700'],
 
-  // primary: The main brand color and color of the primary button
   'primary': colors.sky['500'],
-  // primary-focus: The :hover color for the primary button
   'primary-focus': colors.sky['600'],
-  // primary-content: The text color for the primary button
   'primary-content': colors.sky['100'],
-
-  // secondary: The link color
   'secondary': colors.violet['500'],
-  // secondary: The :hover link color
   'secondary-focus': colors.violet['400'],
-  // secondary: An alternative link color for on dark backgrounds
-  // Typically a light shade of the secondary color
   'secondary-content': colors.violet['300'],
 
-  // accent: The accent color is used to highlight active things
-  // Should be something is positive/neutral. Avoid red or orange.
   'accent': colors.emerald['500'],
-  // accent-focus: The :hover color for the accent button
   'accent-focus': colors.emerald['400'],
-  // accent-content: The text color for the accent button
   'accent-content': colors.neutral['900'],
 
-  // neutral: Used as the background for the footer and code blocks.
-  // Should always be dark(ish) because of prism syntax highlighting
   'neutral': colors.neutral['800'],
-  // neutral-focus: Typically a shade lighter than neutral
   'neutral-focus': colors.neutral['700'],
-  // neutral-content: The text color on neutral backgrounds
   'neutral-content': colors.neutral['200'],
 
-  // info: Used rarely, can be another color best somewhat neutral looking
-  // and should work with the default text color
   'info': colors.pink['400'],
-  // success: Used rarely, but if it is it's in notifications indicating success
-  // Typically some shade of green
   'success': colors.green['600'],
-  // warning: We don't do warnings, but this is used for the tabs under code blocks
-  // and a couple of other UI elements.
   'warning': colors.amber['500'],
-  // error: Used rarely, but if it is it's in notifications indicating success
-  // or the danger button
-  // Typically some shade of red
   'error': colors.red['600'],
 
-  /* CODE HIGHLIGHTING COLORS
-  *
-  * These are variables to style highlighted code blocks.
-  *
-  * Specifically this first set applies to the wrapper around
-  * the highlighted code.
-  * The names should (hopefully) speak for themselves
-  */
   '--code-background-color': colors.neutral['100'],
   '--code-border-color': colors.neutral['300'],
   '--code-color': colors.neutral['900'],
@@ -92,9 +37,7 @@ module.exports = {
   '--code-border-width': 1,
   '--code-outer-padding': '0 0.5rem',
   '--code-inner-padding': '1rem',
-  /*
-    * These variables are used to style the highlighted tokesn themselves
-    */
+
   '--code-color-keyword': colors.pink['500'],
   '--code-font-weight-keyword': 'bold',
   '--code-color-entity': colors.violet['500'],
@@ -107,5 +50,15 @@ module.exports = {
   '--code-color-tag': colors.green['600'],
   '--code-color-property': 'inherit',
   '--code-font-weight-property': 'bold',
+
+  '--pattern-bg': colors.neutral['50'],
+  '--pattern-fabric': colors.neutral['700'],
+  '--pattern-lining': colors.emerald['500'],
+  '--pattern-interfacing': colors.neutral['400'],
+  '--pattern-canvas': colors.amber['600'],
+  '--pattern-various': colors.red['500'],
+  '--pattern-mark': colors.blue['500'],
+  '--pattern-contrast': colors.pink['500'],
+  '--pattern-note': colors.violet['500'],
 }