diff --git a/.storybook/main.ts b/.storybook/main.ts
index e62ffc7..6737fad 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -8,6 +8,7 @@ const config: StorybookConfig = {
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     '@chromatic-com/storybook',
+    'storybook-addon-render-modes'
   ],
   framework: {
     name: '@storybook/web-components-vite',
diff --git a/README.md b/README.md
index 283f921..d18fe43 100644
--- a/README.md
+++ b/README.md
@@ -2,15 +2,52 @@
 
 A web component (using LitElement) which presents resume content stored in [JSON Resume][jsonresume] format. The HTML structure uses the components from [jsonresume-theme-microdata][jtm] to generate HTML which includes structured data as microdata in HTML attributes.
 
-## Installation
+
+## NPM / Node.js usage
+
+### Install dependencies
+
+```sh
+npm i jsonresume-component
+```
 
 ```javascript
-npm i jsonresume-web-component
+import { JsonResume } from 'jsonresume-component/src/index.js';
+```
+
+```html
+<JsonResume gist_id="9e7a7ceb9425336c6aa08d58afb63b8d"></JsonResume>
+```
+
+## Browser usage
+
+**note:** requires installing `lit` and `@lit/task`.
+
+### Add jsonresume-component and dependencies
+
+```html
+<script type="importmap">
+  {
+    "imports": {
+      "lit": "https://esm.run/lit",
+      "@lit/task": "https://esm.run/@lit/task"
+    }
+  }
+</script>
+<script type="module">
+  import 'https://esm.run/jsonresume-component'
+</script>
+```
+
+### Use the web component by giving it your `gist` ID
+
+```html
+<json-resume gist_id="9e7a7ceb9425336c6aa08d58afb63b8d"></json-resume>
 ```
 
 ## A modified JSON Resume schema
 
-The JSON structure follows an extension of the [JSON Resume][jsonresume] schema with added schema structure for microdata `itemtype` on some content types, `basics.pronouns`, and `meta.sectionTitles` which allows changing the content of the resume section titles. See the [jsonresume-theme-microdata][jtm] README for details on this adjusted structure.
+The JSON structure follows an extension of the [JSON Resume][jsonresume] schema with added schema structure for microdata `itemtype` on some content types, `basics.pronouns`, and `meta.themeOptions` which allows changing the content of the resume section titles, colors, and other theme opts. See the [jsonresume-theme-microdata][jtm] README for details on this adjusted structure.
 
 
 [microdata-html]: /blahg/microdata-with-html/
diff --git a/custom-elements.json b/custom-elements.json
index a9369fe..1f73670 100644
--- a/custom-elements.json
+++ b/custom-elements.json
@@ -140,6 +140,14 @@
               "kind": "field",
               "name": "_stylesGenerate",
               "description": "Generates a `style` tag with variable component styles",
+              "parameters": [
+                {
+                  "name": "resumejson",
+                  "type": {
+                    "text": "ResumeJson"
+                  }
+                }
+              ],
               "privacy": "private"
             },
             {
@@ -260,7 +268,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "The aria-label for the `div` containing the resume. Defaults to `${basics.name}'s resume`",
+              "description": "When styles are generated internally, repeat them onto the global document (page)\n**WARNING** Completely deletes and overrides page styles",
               "attribute": "globalize-styles"
             },
             {
@@ -279,7 +287,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Accepts a string containing styles"
+              "description": "Accepts a string containing styles\n**WARNING** Completely deletes and overrides internal component styles"
             }
           ],
           "attributes": [
@@ -328,7 +336,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "The aria-label for the `div` containing the resume. Defaults to `${basics.name}'s resume`",
+              "description": "When styles are generated internally, repeat them onto the global document (page)\n**WARNING** Completely deletes and overrides page styles",
               "fieldName": "globalizeStyles"
             }
           ],
diff --git a/examples/browser/index.html b/examples/browser/index.html
index f5be983..7fca74e 100644
--- a/examples/browser/index.html
+++ b/examples/browser/index.html
@@ -15,7 +15,7 @@
       }
     </script>
     <script type="module">
-      import '../../dist/json-resume.js'
+      import 'https://esm.run/jsonresume-component'
     </script>
   </head>
   <body>
diff --git a/examples/browser/local.html b/examples/browser/local.html
new file mode 100644
index 0000000..145aa2e
--- /dev/null
+++ b/examples/browser/local.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>
+      Scott Nath's Resume
+    </title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <script type="importmap">
+      {
+        "imports": {
+          "lit": "https://esm.run/lit",
+          "@lit/task": "https://esm.run/@lit/task"
+        }
+      }
+    </script>
+    <script type="module">
+      import 'https://esm.run/jsonresume-component'
+      import resumejson from './lorem.resume.short.json' with { type: 'json' };
+      resumejson.basics.summary = 'This resume gets resume.json from a local file. In your HTML you can get the file using `import resumejson from "./resume.json" with { type: "json" };` and inject it into the component with `document.getElementById("jsonresume").resumejson = resumejson;`';
+
+      const jsonresume = document.getElementById('jsonresume');
+      jsonresume.resumejson = resumejson
+    </script>
+  </head>
+  <body>
+    <json-resume id="jsonresume"></json-resume>
+  </body>
+</html>
diff --git a/examples/browser/lorem.resume.json b/examples/browser/lorem.resume.json
new file mode 100644
index 0000000..3af1a40
--- /dev/null
+++ b/examples/browser/lorem.resume.json
@@ -0,0 +1,218 @@
+{
+  "basics": {
+    "name": "MC Fluff NStuff",
+    "label": "Very Professional Title",
+    "image": "https://placekitten.com/300/300",
+    "email": "jsonresume@example.com",
+    "phone": "212-555-1212",
+    "url": "https://example.com",
+    "pronouns": "they/them",
+    "summary": "Cat ipsum dolor sit amet, be the most annoying cat that you can, and, knock everything off the table but commence midnight zoomies. Scratch at fleas, meow until belly rubs, hide behind curtain when vacuum cleaner is on scratch strangers and poo on owners food you call this cat food chirp at birds, decide to want nothing to do with my owner today yet gnaw the corn cob so chase the pig around the house.",
+    "location": {
+      "address": "1234 Street Lane",
+      "postalCode": "10001",
+      "city": "NYC",
+      "countryCode": "US",
+      "region": "NorthEast"
+    },
+    "profiles": [
+      {
+        "network": "MySpace",
+        "username": "user12345678",
+        "url": "https://myspace.com/user12345678"
+      },
+      {
+        "network": "friendster",
+        "username": "meow_user_Af1544erxr",
+        "url": "https://friendster.com/meow_user_Af1544erxr"
+      }
+    ]
+  },
+  "skills": [
+    {
+      "name": "Skill One",
+      "level": "Amazing",
+      "keywords": ["Things", "Stuff", "Activities"]
+    },
+    {
+      "name": "Skill Two",
+      "level": "Fantastical",
+      "keywords": ["Meow", "Plow", "Pazow", "Cacao"]
+    }
+  ],
+  "work": [
+    {
+      "name": "Company ABC",
+      "location": "",
+      "description": "",
+      "position": "Position or role",
+      "website": "http://company.example.com",
+      "startDate": "2020-03",
+      "endDate": "2024-03",
+      "summary": "Cat ipsum dolor sit amet, eat fish on floor. Inspect anything brought into the house scratch at fleas, meow until belly rubs, hide behind curtain when vacuum cleaner is on scratch strangers and poo on owners food so hiding behind the couch until lured out by a feathery toy. Pooping rainbow while flying in a toasted bread costume in space. Fall over dead (not really but gets sypathy) go crazy with excitement when plates are clanked together signalling the arrival of cat food and do doodoo in the litter-box, clickityclack on the piano, be frumpygrumpy, for stinky cat hiiiiiiiiii feed me now. Slap owner's face at 5am until human fills food dish paw at your fat belly yet missing until dinner time, or cat fur is the new black and hunt anything. ",
+      "highlights": ["Highlight one", "Highlight two"]
+    },
+    {
+      "name": "Meows of Great Meowtown",
+      "location": "Georgia, USA",
+      "description": "An important business that does important busy stuff",
+      "position": "The Role of Meow",
+      "website": "http://company.example.com",
+      "startDate": "2020-03",
+      "endDate": "2024-03",
+      "summary": "Inspect anything brought into the house scratch at fleas, meow until belly rubs, hide behind curtain when vacuum cleaner is on scratch strangers and poo on owners food so hiding behind the couch until lured out by a feathery toy. Pooping rainbow while flying in a toasted bread costume in space. Fall over dead (not really but gets sypathy) go crazy with excitement when plates are clanked together signalling the arrival of cat food and do doodoo in the litter-box, clickityclack on the piano, be frumpygrumpy, for stinky cat hiiiiiiiiii feed me now. Slap owner's face at 5am until human fills food dish paw at your fat belly yet missing until dinner time, or cat fur is the new black and hunt anything. ",
+      "highlights": ["Highlight Meow", "Highlight Purr"]
+    }
+  ],
+  "projects": [
+    {
+      "name": "Project ABC",
+      "description": "The project is Car rides are evil swat turds around the house poop on the floor, break a planter, sprint, eat own hair, vomit hair, hiss, chirp at birds, eat a squirrel, hide from fireworks, lick toe beans, attack christmas tree. Chase dog then run away allways wanting food. Fat baby cat best buddy little guy stare at the wall, play with food and get confused by dust for stare at imaginary bug. ",
+      "highlights": ["Thing that happened one", "Highlighted thing two"],
+      "keywords": ["Keyword-a", "Keyword-b"],
+      "startDate": "2024-01",
+      "endDate": "2024-05",
+      "website": "https://project.example.com",
+      "roles": ["Breathing", "Being"],
+      "entity": "Entity ABC",
+      "type": "Open Source"
+    },
+    {
+      "startDate": "2024-04-01",
+      "name": "jsonresume-theme-microdata",
+      "keywords": ["jsonresume", "microdata"],
+      "url": "https://github.com/scottnath/jsonresume-theme-microdata",
+      "description": "A flat JSON Resume theme with schema.org microdata, compatible with the latest resume schema",
+      "type": "open source",
+      "roles": ["Architect", "Developer"]
+    }
+  ],
+  "volunteer": [
+    {
+      "organization": "Volunteer Organization",
+      "position": "Unpaid Position",
+      "website": "http://volunteer.example.com",
+      "startDate": "2024-01",
+      "endDate": "2024-04",
+      "summary": "Cat ipsum dolor sit amet, eat fish on floor. Cat not kitten around . Car rides are evil swat turds around the house poop on the floor, break a planter, sprint, eat own hair, vomit hair, hiss, chirp at birds, eat a squirrel, hide from fireworks, lick toe beans, attack christmas tree. Chase dog then run away allways wanting food. Fat baby cat best buddy little guy stare at the wall, play with food and get confused by dust for stare at imaginary bug. ",
+      "highlights": ["Highlight abc", "Highlight xyz"]
+    },
+    {
+      "organization": "Meows for Wows",
+      "position": "The Fluff",
+      "website": "http://volunteer.example.com",
+      "startDate": "2024-01",
+      "summary": "Cat ipsum dolor sit amet, eat fish on floor. Cat not kitten around . Car rides are evil swat turds around the house poop on the floor, break a planter, sprint, eat own hair, vomit hair, hiss, chirp at birds, eat a squirrel, hide from fireworks, lick toe beans, attack christmas tree. Chase dog then run away allways wanting food. Fat baby cat best buddy little guy stare at the wall, play with food and get confused by dust for stare at imaginary bug. ",
+      "highlights": ["Highlight 123", "Highlight 987"]
+    }
+  ],
+  "education": [
+    {
+      "institution": "School of Things and Stuff",
+      "area": "Things",
+      "studyType": "Masters",
+      "startDate": "2016-08",
+      "gpa": "4.5",
+      "courses": ["Course one", "Course two"]
+    }
+  ],
+  "awards": [
+    {
+      "title": "The Best at the Thing",
+      "date": "2024-02",
+      "awarder": "The Award Warehouse",
+      "summary": "Cat ipsum dolor sit amet, be the most annoying cat that you can, and, knock everything off the table but commence midnight zoomies. Scratch at fleas, meow until belly rubs, hide behind curtain when vacuum cleaner is on scratch strangers and poo on owners food you call this cat food chirp at birds, decide to want nothing to do with my owner today yet gnaw the corn cob so chase the pig around the house."
+    },
+    {
+      "title": "The Fluffiest Little Guy",
+      "date": "2024-05",
+      "awarder": "The Consensus of the Whole Planet",
+      "summary": "Cat ipsum dolor sit amet, be the most annoying cat that you can, and, knock everything off the table but commence midnight zoomies. Scratch at fleas, meow until belly rubs, hide behind curtain when vacuum cleaner is on scratch strangers and poo on owners food you call this cat food chirp at birds, decide to want nothing to do with my owner today yet gnaw the corn cob so chase the pig around the house."
+    }
+  ],
+  "publications": [
+    {
+      "name": "How I wrote fake content and used it in JSON Resume",
+      "publisher": "The Fake Meow Times",
+      "releaseDate": "2024-05",
+      "website": "https://publisher.example.com",
+      "summary": "Cat ipsum dolor sit amet, eat fish on floor. Inspect anything brought into the house scratch at fleas, meow until belly rubs, hide behind curtain when vacuum cleaner is on scratch strangers and poo on owners food so hiding behind the couch until lured out by a feathery toy."
+    },
+    {
+      "name": "Open sourcin for fun and no profit",
+      "publisher": "The Daily Furtonian",
+      "releaseDate": "2020-05",
+      "website": "https://publisher2.example.com",
+      "summary": "Cat ipsum dolor sit amet, be the most annoying cat that you can, and, knock everything off the table but commence midnight zoomies. Scratch at fleas, meow until belly rubs, hide behind curtain when vacuum cleaner is on scratch strangers and poo on owners food you call this cat food chirp at birds, decide to want nothing to do with my owner today yet gnaw the corn cob so chase the pig around the house."
+    }
+  ],
+  "certificates": [
+    {
+      "name": "Certified Kubernetes Administrator",
+      "date": "2020-06-06",
+      "url": "https://example.com",
+      "issuer": "CNCF"
+    },
+    {
+      "name": "Certified Acrobatics Instructor with an emphasis on a long title",
+      "date": "1998-12-31",
+      "url": "https://example.com",
+      "issuer": "International Acrobatics Association of Really Long-Named Organizations"
+    }
+  ],
+  "languages": [
+    {
+      "language": "English",
+      "fluency": "Native"
+    },
+    {
+      "language": "Gibberish",
+      "fluency": "[inaudible mumbling]"
+    },
+    {
+      "language": "Cat",
+      "fluency": "tolerated"
+    }
+  ],
+  "interests": [
+    {
+      "name": "I like things",
+      "keywords": ["Like stuff", "Like things"]
+    },
+    {
+      "name": "Sun Pool",
+      "keywords": ["Hot Sleepin", "Sauna times"]
+    }
+  ],
+  "references": [
+    {
+      "name": "John Doe",
+      "reference": "Fall over dead (not really but gets sypathy) go crazy with excitement when plates are clanked together signalling the arrival of cat food and do doodoo in the litter-box, clickityclack on the piano, be frumpygrumpy, for stinky cat hiiiiiiiiii feed me now. "
+    },
+    {
+      "name": "Jane Doe",
+      "reference": "I show my fluffy belly but it's a trap! if you pet it i will tear up your hand throwup on your pillow. Stare at ceiling yowling nonstop the whole night i shredded your linens for you i cry and cry and cry unless you pet me, and then maybe i cry just for fun. Cat not kitten around ."
+    }
+  ],
+  "meta": {
+    "canonical": "https://gist.githubusercontent.com/scottnath/9e7a7ceb9425336c6aa08d58afb63b8d/raw",
+    "version": "0.1.0",
+    "lastModified": "2024-05-30T18:30:16.736Z",
+    "themeOptions": {
+      "preordered": true,
+      "sectionTitles": {
+        "work": "Work of a Cat",
+        "certificates": "Certificates of Meowing",
+        "publications": "Publications for Meows",
+        "skills": "Feline Skillset"
+      },
+      "colors": {
+        "background": ["gold", "blueviolet"],
+        "dimmed": ["lightsalmon", "fuscia"],
+        "primary": ["mediumpurple", "yellow"],
+        "secondary": ["violet", "chartreuse"],
+        "link": ["palegreen", "aqua"]
+      }
+    }
+  }
+}
diff --git a/examples/browser/lorem.resume.short.json b/examples/browser/lorem.resume.short.json
new file mode 100644
index 0000000..757a08e
--- /dev/null
+++ b/examples/browser/lorem.resume.short.json
@@ -0,0 +1,124 @@
+{
+  "basics": {
+    "name": "MC Fluff NStuff",
+    "label": "Very Professional Title",
+    "image": "https://placekitten.com/300/300",
+    "email": "jsonresume@example.com",
+    "phone": "212-555-1212",
+    "url": "https://example.com",
+    "summary": "Cat ipsum dolor sit amet, be the most annoying cat that you can, and, knock everything off the table but commence midnight zoomies. Scratch at fleas, meow until belly rubs, hide behind curtain when vacuum cleaner is on scratch strangers and poo on owners food you call this cat food chirp at birds, decide to want nothing to do with my owner today yet gnaw the corn cob so chase the pig around the house.",
+    "location": {
+      "city": "NYC"
+    },
+    "profiles": [
+      {
+        "network": "MySpace",
+        "username": "user12345678",
+        "url": "https://myspace.com/user12345678"
+      },
+      {
+        "network": "friendster",
+        "username": "meow_user_Af1544erxr",
+        "url": "https://friendster.com/meow_user_Af1544erxr"
+      }
+    ]
+  },
+  "skills": [
+    {
+      "name": "Skill One",
+      "level": "Amazing",
+      "keywords": ["Things", "Stuff", "Activities"]
+    }
+  ],
+  "work": [
+    {
+      "name": "Meows of Great Meowtown",
+      "location": "Georgia, USA",
+      "position": "The Role of Meow",
+      "website": "http://company.example.com",
+      "startDate": "2020-03",
+      "endDate": "2024-03",
+      "summary": "Inspect anything brought into the house scratch at fleas, meow until belly rubs, hide behind curtain when vacuum cleaner is on scratch strangers and poo on owners food so hiding behind the couch until lured out by a feathery toy. Pooping rainbow while flying in a toasted bread costume in space. Fall over dead (not really but gets sypathy) go crazy with excitement when plates are clanked together signalling the arrival of cat food and do doodoo in the litter-box, clickityclack on the piano, be frumpygrumpy, for stinky cat hiiiiiiiiii feed me now. Slap owner's face at 5am until human fills food dish paw at your fat belly yet missing until dinner time, or cat fur is the new black and hunt anything. ",
+      "highlights": ["Highlight Meow", "Highlight Purr"]
+    }
+  ],
+  "projects": [
+    {
+      "startDate": "2024-04-01",
+      "name": "jsonresume-theme-microdata",
+      "keywords": ["jsonresume", "microdata"],
+      "url": "https://github.com/scottnath/jsonresume-theme-microdata",
+      "description": "A flat JSON Resume theme with schema.org microdata, compatible with the latest resume schema",
+      "type": "open source",
+      "roles": ["Architect", "Developer"]
+    }
+  ],
+  "volunteer": [
+    {
+      "organization": "Meows for Wows",
+      "position": "The Fluff",
+      "website": "http://volunteer.example.com",
+      "startDate": "2024-01",
+      "summary": "Cat ipsum dolor sit amet, eat fish on floor. Cat not kitten around . Car rides are evil swat turds around the house poop on the floor, break a planter, sprint, eat own hair, vomit hair, hiss, chirp at birds, eat a squirrel, hide from fireworks, lick toe beans, attack christmas tree. Chase dog then run away allways wanting food. Fat baby cat best buddy little guy stare at the wall, play with food and get confused by dust for stare at imaginary bug. ",
+      "highlights": ["Highlight 123", "Highlight 987"]
+    }
+  ],
+  "education": [
+    {
+      "institution": "School of Things and Stuff",
+      "area": "Things",
+      "studyType": "Masters",
+      "startDate": "2016-08",
+      "gpa": "4.5",
+      "courses": ["Course one", "Course two"]
+    }
+  ],
+  "awards": [
+    {
+      "title": "The Fluffiest Little Guy",
+      "date": "2024-05",
+      "awarder": "The Consensus of the Whole Planet",
+      "summary": "Cat ipsum dolor sit amet, be the most annoying cat that you can, and, knock everything off the table but commence midnight zoomies. Scratch at fleas, meow until belly rubs, hide behind curtain when vacuum cleaner is on scratch strangers and poo on owners food you call this cat food chirp at birds, decide to want nothing to do with my owner today yet gnaw the corn cob so chase the pig around the house."
+    }
+  ],
+  "publications": [
+    {
+      "name": "How I wrote fake content and used it in JSON Resume",
+      "publisher": "The Fake Meow Times",
+      "releaseDate": "2024-05",
+      "website": "https://publisher.example.com",
+      "summary": "Cat ipsum dolor sit amet, eat fish on floor. Inspect anything brought into the house scratch at fleas, meow until belly rubs, hide behind curtain when vacuum cleaner is on scratch strangers and poo on owners food so hiding behind the couch until lured out by a feathery toy."
+    }
+  ],
+  "certificates": [
+    {
+      "name": "Certified Acrobatics Instructor with an emphasis on a long title",
+      "date": "1998-12-31",
+      "url": "https://example.com",
+      "issuer": "International Acrobatics Association of Really Long-Named Organizations"
+    }
+  ],
+  "languages": [
+    {
+      "language": "Cat",
+      "fluency": "tolerated"
+    }
+  ],
+  "interests": [
+    {
+      "name": "Sun Pool",
+      "keywords": ["Hot Sleepin", "Sauna times"]
+    }
+  ],
+  "references": [
+    {
+      "name": "Jane Doe",
+      "reference": "I show my fluffy belly but it's a trap! if you pet it i will tear up your hand throwup on your pillow. Stare at ceiling yowling nonstop the whole night i shredded your linens for you i cry and cry and cry unless you pet me, and then maybe i cry just for fun. Cat not kitten around ."
+    }
+  ],
+  "meta": {
+    "canonical": "https://gist.githubusercontent.com/scottnath/9e7a7ceb9425336c6aa08d58afb63b8d/raw",
+    "version": "0.1.0",
+    "lastModified": "2024-05-30T18:30:16.736Z"
+  }
+}
diff --git a/examples/browser/slots.html b/examples/browser/slots.html
new file mode 100644
index 0000000..55d877d
--- /dev/null
+++ b/examples/browser/slots.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>
+      Scott Nath's Resume
+    </title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <script type="importmap">
+      {
+        "imports": {
+          "lit": "https://esm.run/lit",
+          "@lit/task": "https://esm.run/@lit/task"
+        }
+      }
+    </script>
+    <script type="module" src="https://unpkg.com/profile-components/dist/github-repository.js"></script>
+    <script type="module">
+      import 'https://esm.run/jsonresume-component'
+      import resumejson from './lorem.resume.short.json' with { type: 'json' };
+      resumejson.basics.summary = 'This resume replaces `work` and `projects` with slotted content. `projects` is using the github-repository component from profile-components to show the projects';
+      const jsonresume = document.getElementById('jsonresume');
+      jsonresume.resumejson = resumejson
+    </script>
+  </head>
+  <body>
+    <json-resume id="jsonresume" preordered="true" globalize-styles="true">
+      <section slot="work">
+        <h3>Work Title from a slot!</h3>
+        <article><h4>I am a slotted H4</h4><section><h5>And this is the slotted H5</h5></section></article>
+        <article><h4>Amazing Company Inc.</h4><section><h5>Super Senior Principal Full-Stack Design Engineering Lead</h5></sectio></article>
+      </section>
+      <section slot="projects">
+        <h3>Open Source Projects</h3>
+        <github-repository full_name="scottnath/profile-components" fetch="true"></github-repository>
+        <github-repository full_name="scottnath/jsonresume-theme-microdata" fetch="true"></github-repository>
+      </section>
+    </json-resume>
+    <script type="module">
+    </script>
+  </body>
+</html>
diff --git a/package.json b/package.json
index 45b7545..535294e 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,7 @@
     "micromark": "^4.0.0",
     "profile-components": "^0.4.1",
     "storybook": "^8.1.1",
+    "storybook-addon-render-modes": "^0.0.11",
     "storydocker-utilities": "^0.0.21",
     "vite": "5.2.11",
     "vite-plugin-static-copy": "^1.0.4",
diff --git a/src/fixtures/lorem.resume.json b/src/fixtures/lorem.resume.json
index c470a06..3af1a40 100644
--- a/src/fixtures/lorem.resume.json
+++ b/src/fixtures/lorem.resume.json
@@ -42,7 +42,7 @@
   ],
   "work": [
     {
-      "company": "Company ABC",
+      "name": "Company ABC",
       "location": "",
       "description": "",
       "position": "Position or role",
@@ -53,7 +53,7 @@
       "highlights": ["Highlight one", "Highlight two"]
     },
     {
-      "company": "Meows of Great Meowtown",
+      "name": "Meows of Great Meowtown",
       "location": "Georgia, USA",
       "description": "An important business that does important busy stuff",
       "position": "The Role of Meow",
@@ -205,6 +205,13 @@
         "certificates": "Certificates of Meowing",
         "publications": "Publications for Meows",
         "skills": "Feline Skillset"
+      },
+      "colors": {
+        "background": ["gold", "blueviolet"],
+        "dimmed": ["lightsalmon", "fuscia"],
+        "primary": ["mediumpurple", "yellow"],
+        "secondary": ["violet", "chartreuse"],
+        "link": ["palegreen", "aqua"]
       }
     }
   }
diff --git a/src/index.js b/src/index.js
index 5dd8208..213b4b5 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,4 @@
-import { LitElement, html } from 'lit';
+import { LitElement, html, css, unsafeCSS } from 'lit';
 import {choose} from 'lit/directives/choose.js';
 import {Task} from '@lit/task';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
@@ -101,7 +101,8 @@ export class JsonResume extends LitElement {
       attribute: 'label'
     },
     /**
-     * The aria-label for the `div` containing the resume. Defaults to `${basics.name}'s resume`
+     * When styles are generated internally, repeat them onto the global document (page)
+     * **WARNING** Completely deletes and overrides page styles
      */
     globalizeStyles: {
       type: Boolean,
@@ -116,6 +117,7 @@ export class JsonResume extends LitElement {
     },
     /**
      * Accepts a string containing styles
+     * **WARNING** Completely deletes and overrides internal component styles
      */
     stylesheet: {
       type: String,
@@ -179,20 +181,29 @@ export class JsonResume extends LitElement {
   }
 
   /**
-   * Generates a `style` tag with variable component styles 
+   * Generates a `style` tag with variable component styles
+   * @param {ResumeJson} resumejson 
    * @private
    */
-  _stylesGenerate = () => {
-    return `<style>
-      ${this.stylesheet ? this.stylesheet : style}
-    </style>`
-  }
-  
-  firstUpdated() {
+  _stylesGenerate = (resumejson) => {
+    let sheet = new CSSStyleSheet();
+    
+    if (this.stylesheet) {
+      sheet.replaceSync(this.stylesheet);
+    } else {
+      sheet.replaceSync(style)
+    }
+    
+    if (resumejson.meta?.themeOptions?.colors) {
+      const colors = resumejson.meta?.themeOptions?.colors;
+      const props = Object.entries(colors).map(([name, [light, dark = light]]) => `--color-${name}-light:${light}; --color-${name}-dark:${dark};`)
+      .join(' ')
+      sheet.insertRule(`:host, body { ${props} }`, 1)
+    }
+    
+    this.shadowRoot.adoptedStyleSheets = [sheet];
     if (this.globalizeStyles) {
-      const div = document.createElement("div");
-      div.innerHTML = this._stylesGenerate();
-      this.prepend(div.cloneNode(true))
+      document.adoptedStyleSheets = [sheet]
     }
   }
 
@@ -233,7 +244,7 @@ export class JsonResume extends LitElement {
    * @private
    */
   _resumeGenerate = (resumejson) => {
-    if (this.preordered) {
+    if (this.preordered || resumejson.meta?.themeOptions?.preordered) {
       this._sectionOrder = Object.keys(resumejson)
     }
     if (resumejson.meta?.themeOptions?.sectionTitles) {
@@ -247,7 +258,8 @@ export class JsonResume extends LitElement {
       return this._resumeSection(section, resumejson[section])
     })
     const ariaLabel = this.label || `${resumejson.basics.name}'s resume`;
-    return html`${unsafeHTML(this._stylesGenerate())}<div id="jsonresume" itemscope itemtype="https://schema.org/ProfilePage">
+    this._stylesGenerate(resumejson);
+    return html`<div id="jsonresume" itemscope itemtype="https://schema.org/ProfilePage">
       <article part="resume" itemprop="mainEntity" itemscope itemtype="https://schema.org/Person" aria-label="${ariaLabel}">
       ${resumeSections}
       </article>
diff --git a/src/style.css b/src/style.css
index bd867a1..acd7d7c 100644
--- a/src/style.css
+++ b/src/style.css
@@ -61,7 +61,7 @@
   color: var(--color-primary);
 }
 
-/* @media (prefers-color-scheme: dark) {
+@media (prefers-color-scheme: dark) {
   :host {
     --color-background: var(--color-background-dark);
     --color-dimmed: var(--color-dimmed-dark);
@@ -69,7 +69,7 @@
     --color-secondary: var(--color-secondary-dark);
     --color-link: var(--color-link-dark);
   }
-} */
+}
 
 * {
   box-sizing: border-box;
diff --git a/src/web-component.stories.js b/src/web-component.stories.js
index e0afe5c..cf8792e 100644
--- a/src/web-component.stories.js
+++ b/src/web-component.stories.js
@@ -14,8 +14,8 @@ import './index.js';
 const { argTypes } = getWcStorybookHelpers("json-resume");
 
 const resumeFixtureLorem = JSON.parse(resumeLorem);
+const themeOptions = {...resumeFixtureLorem.meta.themeOptions};
 delete resumeFixtureLorem.meta.themeOptions;
-const resumeFixtureLoremOpts = JSON.parse(resumeLorem);
 
 const changeSummary = (summary, json = resumeFixtureLorem) => {
   return {
@@ -86,7 +86,15 @@ export const SectionOrder = {
 export const SectionTitles = {
   args: {
     resumejson: {
-      ...changeSummary('This resume shows alternate title text for some sections. This can be configured in your `resume.json` file by adding an object to `meta.sectionTitles`. You only need to include the titles you want to change.', resumeFixtureLoremOpts),
+      ...changeSummary('This resume shows alternate title text for some sections. This can be configured in your `resume.json` file by adding an object to `meta.sectionTitles`. You only need to include the titles you want to change.', {
+        ...resumeFixtureLorem,
+        meta: {
+          ...resumeFixtureLorem.meta,
+          themeOptions: {
+            sectionTitles: themeOptions.sectionTitles
+          }
+        }
+      }),
     },
   }
 }
@@ -140,11 +148,25 @@ export const Styling = {
   </div>`]
 }
 
+export const ThemeOptions = {
+  args: {
+    resumejson: {
+      ...changeSummary('This resume shows all theme options, including section titles, preordered, and colors. These are detailed in `jsonresume-theme-microdata`.', {
+        ...resumeFixtureLorem,
+        meta: {
+          ...resumeFixtureLorem.meta,
+          themeOptions
+        }
+      }),
+    },
+  }
+}
+
 export const GlobalizeStyles = {
   render: (args) => 
   html`<h3>I am an H3 outside of the resume</h3><json-resume .resumejson="${args.resumejson}" preordered="${args.preordered}" globalize-styles="${args['globalize-styles']}">
       <section slot="work"><h3>I am a slotted H3 header for the Work section</h3><article><h4>I am a slotted H4</h4></article></section>
-      <section slot="projects"><h3>SLOTTED! Open Source Projects</h3><github-repository full_name="scottnath/profile-components" fetch="true" data-theme="light"></github-repository><github-repository full_name="scottnath/jsonresume-theme-microdata" fetch="true" data-theme="light"></github-repository></section>
+      <section slot="projects"><h3>SLOTTED! Open Source Projects</h3><github-repository full_name="scottnath/profile-components" fetch="true"></github-repository><github-repository full_name="scottnath/jsonresume-theme-microdata" fetch="true"></github-repository></section>
     </json-resume>
   `,
   args: {
diff --git a/yarn.lock b/yarn.lock
index e71a8e9..ec49b50 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13354,6 +13354,11 @@ store2@^2.14.2:
   resolved "https://registry.npmjs.org/store2/-/store2-2.14.3.tgz"
   integrity sha512-4QcZ+yx7nzEFiV4BMLnr/pRa5HYzNITX2ri0Zh6sT9EyQHbBHacC6YigllUPU9X3D0f/22QCgfokpKs52YRrUg==
 
+storybook-addon-render-modes@^0.0.11:
+  version "0.0.11"
+  resolved "https://registry.yarnpkg.com/storybook-addon-render-modes/-/storybook-addon-render-modes-0.0.11.tgz#39e2ac9bfa2e2649b0d8573fff5e1b87e6777771"
+  integrity sha512-+KqkJq/rDftxWu1nvsaaewhEqmv3SYt4QHT+m4h3kjy0TkrYUL+75zpjv3Jf5gQYpmeUySgZGJdCzaYhNCE5eg==
+
 storybook@^8.1.1:
   version "8.1.1"
   resolved "https://registry.yarnpkg.com/storybook/-/storybook-8.1.1.tgz#2ee3a0d894f585cecc34cc493f7923a4e7d5510e"