diff --git a/src/components/NoteText/NoteText.svelte b/src/components/NoteText/NoteText.svelte
index d56eb6cc..dea7cd97 100644
--- a/src/components/NoteText/NoteText.svelte
+++ b/src/components/NoteText/NoteText.svelte
@@ -5,7 +5,7 @@
    * @required
    */
   export let text: string;
-  
+
   import { marked } from 'marked';
   import Block from '../Block/Block.svelte';
 </script>
@@ -20,7 +20,7 @@
 <style lang="scss" global>
   // Same as body text... we probably should unbind these styles from the component
   // and import them in the app through a separate scss file.
-  @import "../../scss/mixins";
+  @import '../../scss/mixins';
 
   div.article-block.notes {
     @include note-text;
diff --git a/src/components/Theme/Theme.svelte b/src/components/Theme/Theme.svelte
index 1fa4ae69..bb9a7251 100644
--- a/src/components/Theme/Theme.svelte
+++ b/src/components/Theme/Theme.svelte
@@ -23,18 +23,19 @@
    */
   export let base: Base = 'light';
 
-  import cssVariables from '../../actions/cssVariables';
   import flatten from './utils/flatten';
   import mergeThemes from './utils/merge';
 
   /** @type {Theme} */
   $: mergedTheme = mergeThemes({}, themes[base] || themes.light, theme);
+  
+  $: cssVariables = Object.entries(flatten({ theme: mergedTheme })).map(([key, value]) => `--${key}: ${value};`).join(' ');
 </script>
 
 <div
   class="theme"
-  style="display: contents;"
-  use:cssVariables="{flatten({ theme: mergedTheme })}"
+  style="{cssVariables}"
+  style:display="contents"
 >
   <!-- Clients can override the theme above by attaching custom properties to this element. -->
   <div class="theme-client-override" style="display: contents;">