diff --git a/crates/wdl-doc/src/docs_tree.rs b/crates/wdl-doc/src/docs_tree.rs
index f4f8796b..7dbf3760 100644
--- a/crates/wdl-doc/src/docs_tree.rs
+++ b/crates/wdl-doc/src/docs_tree.rs
@@ -26,8 +26,12 @@ use crate::r#struct::Struct;
 use crate::task::Task;
 use crate::workflow::Workflow;
 
-/// Filename for the logo SVG expected to be in the "assets" directory.
+/// Filename for the dark theme logo SVG expected to be in the "assets"
+/// directory.
 const LOGO_FILE_NAME: &str = "logo.svg";
+/// Filename for the light theme logo SVG expected to be in the "assets"
+/// directory.
+const LIGHT_LOGO_FILE_NAME: &str = "logo.light.svg";
 
 /// The type of a page.
 #[derive(Debug)]
@@ -216,8 +220,15 @@ pub struct DocsTreeBuilder {
     homepage: Option<PathBuf>,
     /// An optional path to a custom theme to use for the docs.
     custom_theme: Option<PathBuf>,
-    /// The path to a custom logo to embed at the top of the left sidebar.
+    /// The path to a custom dark theme logo to embed at the top of the left
+    /// sidebar.
+    ///
+    /// If this is `Some(_)` and no `alt_logo` is supplied, this will be used
+    /// for both dark and light themes.
     logo: Option<PathBuf>,
+    /// The path to an alternate light theme custom logo to embed at the top of
+    /// the left sidebar.
+    alt_logo: Option<PathBuf>,
     /// Optional JavaScript to embed in each HTML page.
     additional_javascript: AdditionalScript,
     /// Start on the "Full Directory" left sidebar view instead of the
@@ -225,6 +236,8 @@ pub struct DocsTreeBuilder {
     ///
     /// Users can toggle the view. This only impacts the initialized value.
     init_on_full_directory: bool,
+    /// Start in light mode instead of the default dark mode.
+    init_light_mode: bool,
 }
 
 impl DocsTreeBuilder {
@@ -238,8 +251,10 @@ impl DocsTreeBuilder {
             homepage: None,
             custom_theme: None,
             logo: None,
+            alt_logo: None,
             additional_javascript: AdditionalScript::None,
             init_on_full_directory: crate::PREFER_FULL_DIRECTORY,
+            init_light_mode: false,
         }
     }
 
@@ -289,6 +304,18 @@ impl DocsTreeBuilder {
         self.maybe_logo(Some(logo))
     }
 
+    /// Set the alt (i.e. light mode) custom logo for the left sidebar with an
+    /// option.
+    pub fn maybe_alt_logo(mut self, logo: Option<impl Into<PathBuf>>) -> Self {
+        self.alt_logo = logo.map(|l| l.into());
+        self
+    }
+
+    /// Set the alt (i.e. light mode) custom logo for the left sidebar.
+    pub fn alt_logo(self, logo: impl Into<PathBuf>) -> Self {
+        self.maybe_alt_logo(Some(logo))
+    }
+
     /// Set the additional javascript for each page.
     pub fn additional_javascript(mut self, js: AdditionalScript) -> Self {
         self.additional_javascript = js;
@@ -302,6 +329,12 @@ impl DocsTreeBuilder {
         self
     }
 
+    /// Set whether light mode should be the initial view instead of dark mode.
+    pub fn init_light_mode(mut self, init_light_mode: bool) -> Self {
+        self.init_light_mode = init_light_mode;
+        self
+    }
+
     /// Build the docs tree.
     pub fn build(self) -> Result<DocsTree> {
         self.write_assets().with_context(|| {
@@ -324,6 +357,7 @@ impl DocsTreeBuilder {
             homepage: self.homepage,
             additional_javascript: self.additional_javascript,
             init_on_full_directory: self.init_on_full_directory,
+            init_light_mode: self.init_light_mode,
         })
     }
 
@@ -399,15 +433,64 @@ impl DocsTreeBuilder {
             std::fs::write(&path, bytes)
                 .with_context(|| format!("failed to write asset to `{}`", path.display()))?;
         }
-        if let Some(supplied_logo) = &self.logo {
-            let logo_path = assets_dir.join(LOGO_FILE_NAME);
-            std::fs::copy(supplied_logo, &logo_path).with_context(|| {
-                format!(
-                    "failed to copy custom logo from `{}` to `{}`",
-                    supplied_logo.display(),
-                    logo_path.display()
-                )
-            })?;
+        // The above `get_assets()` call will write the default logos; then the
+        // following logic may overwrite those files with user supplied logos.
+        match (&self.logo, &self.alt_logo) {
+            (Some(dark_logo), Some(light_logo)) => {
+                let logo_path = assets_dir.join(LOGO_FILE_NAME);
+                std::fs::copy(dark_logo, &logo_path).with_context(|| {
+                    format!(
+                        "failed to copy dark theme custom logo from `{}` to `{}`",
+                        dark_logo.display(),
+                        logo_path.display()
+                    )
+                })?;
+                let logo_path = assets_dir.join(LIGHT_LOGO_FILE_NAME);
+                std::fs::copy(light_logo, &logo_path).with_context(|| {
+                    format!(
+                        "failed to copy light theme custom logo from `{}` to `{}`",
+                        light_logo.display(),
+                        logo_path.display()
+                    )
+                })?;
+            }
+            (Some(logo), None) => {
+                let logo_path = assets_dir.join(LOGO_FILE_NAME);
+                std::fs::copy(logo, &logo_path).with_context(|| {
+                    format!(
+                        "failed to copy custom logo from `{}` to `{}`",
+                        logo.display(),
+                        logo_path.display()
+                    )
+                })?;
+                let logo_path = assets_dir.join(LIGHT_LOGO_FILE_NAME);
+                std::fs::copy(logo, &logo_path).with_context(|| {
+                    format!(
+                        "failed to copy custom logo from `{}` to `{}`",
+                        logo.display(),
+                        logo_path.display()
+                    )
+                })?;
+            }
+            (None, Some(logo)) => {
+                let logo_path = assets_dir.join(LOGO_FILE_NAME);
+                std::fs::copy(logo, &logo_path).with_context(|| {
+                    format!(
+                        "failed to copy custom logo from `{}` to `{}`",
+                        logo.display(),
+                        logo_path.display()
+                    )
+                })?;
+                let logo_path = assets_dir.join(LIGHT_LOGO_FILE_NAME);
+                std::fs::copy(logo, &logo_path).with_context(|| {
+                    format!(
+                        "failed to copy custom logo from `{}` to `{}`",
+                        logo.display(),
+                        logo_path.display()
+                    )
+                })?;
+            }
+            (None, None) => {}
         }
 
         Ok(())
@@ -431,6 +514,8 @@ pub struct DocsTree {
     /// Initialize pages on the "Full Directory" view instead of the "Workflows"
     /// view of the left sidebar.
     init_on_full_directory: bool,
+    /// Initialize in light mode instead of the default dark mode.
+    init_light_mode: bool,
 }
 
 impl DocsTree {
@@ -919,10 +1004,8 @@ impl DocsTree {
                 // top navbar
                 div class="sticky px-4" {
                     a href=(self.root_index_relative_to(base).to_string_lossy()) {
-                        // Dark mode logo
-                        img src=(self.get_asset(base, LOGO_FILE_NAME)) class="w-[120px] flex-none mb-8 light:hidden" alt="Logo";
-                        // Light logo (ensure we use logo with .light.svg suffix)
-                        img src=(self.get_asset(base, LOGO_FILE_NAME)) class="w-[120px] flex-none mb-8 hidden light:block" alt="Logo";
+                        img src=(self.get_asset(base, LOGO_FILE_NAME)) class="w-[120px] flex-none mb-8 block light:hidden" alt="Logo";
+                        img src=(self.get_asset(base, LIGHT_LOGO_FILE_NAME)) class="w-[120px] flex-none mb-8 hidden light:block" alt="Logo";
                     }
                     div class="relative w-full h-10" {
                         input id="searchbox" "x-model.debounce"="search" type="text" placeholder="Search..." class="left-sidebar__searchbox";
@@ -1164,6 +1247,7 @@ impl DocsTree {
             ),
             self.root().path(),
             &self.additional_javascript,
+            self.init_light_mode,
         );
         std::fs::write(&index_path, html.into_string())
             .with_context(|| format!("failed to write homepage to `{}`", index_path.display()))?;
@@ -1294,6 +1378,7 @@ impl DocsTree {
             ),
             self.root_relative_to(base),
             &self.additional_javascript,
+            self.init_light_mode,
         );
         std::fs::write(&path, html.into_string())
             .with_context(|| format!("failed to write page at `{}`", path.display()))?;
diff --git a/crates/wdl-doc/src/lib.rs b/crates/wdl-doc/src/lib.rs
index dcc23faa..3fca7c0b 100644
--- a/crates/wdl-doc/src/lib.rs
+++ b/crates/wdl-doc/src/lib.rs
@@ -185,10 +185,11 @@ pub(crate) fn full_page<P: AsRef<Path>>(
     body: Markup,
     root: P,
     script: &AdditionalScript,
+    init_light_mode: bool,
 ) -> Markup {
     html! {
         (DOCTYPE)
-        html x-data="{ DEFAULT_THEME: 'light' }" x-bind:class="(localStorage.getItem('theme') ?? DEFAULT_THEME) === 'light' ? 'light' : ''" x-cloak {
+        html x-data=(if init_light_mode { "{ DEFAULT_THEME: 'light' }" } else { "{ DEFAULT_THEME: '' }" }) x-bind:class="(localStorage.getItem('theme') ?? DEFAULT_THEME) === 'light' ? 'light' : ''" x-cloak {
             (header(page_title, root, script))
             body class="body--base" {
                 @match script {
@@ -377,10 +378,15 @@ pub struct Config {
     output_dir: PathBuf,
     /// An optional markdown file to embed in the homepage.
     homepage: Option<PathBuf>,
+    /// Initialize pages in light mode instead of the default dark mode.
+    init_light_mode: bool,
     /// An optional custom theme directory.
     custom_theme: Option<PathBuf>,
     /// An optional custom logo to embed in the left sidebar.
     custom_logo: Option<PathBuf>,
+    /// An optional alternate (light mode) custom logo to embed in the left
+    /// sidebar.
+    alt_logo: Option<PathBuf>,
     /// Optional JavaScript to embed in each HTML page.
     additional_javascript: AdditionalScript,
     /// Initialize pages on the "Full Directory" view instead of the "Workflows"
@@ -400,8 +406,10 @@ impl Config {
             workspace: workspace.into(),
             output_dir: output_dir.into(),
             homepage: None,
+            init_light_mode: false,
             custom_theme: None,
             custom_logo: None,
+            alt_logo: None,
             additional_javascript: AdditionalScript::None,
             init_on_full_directory: PREFER_FULL_DIRECTORY,
         }
@@ -413,6 +421,12 @@ impl Config {
         self
     }
 
+    /// Overwrite the config's light mode default with the new value.
+    pub fn init_light_mode(mut self, init_light_mode: bool) -> Self {
+        self.init_light_mode = init_light_mode;
+        self
+    }
+
     /// Overwrite the config's custom theme with the new value.
     pub fn custom_theme(mut self, custom_theme: Option<PathBuf>) -> Self {
         self.custom_theme = custom_theme;
@@ -425,6 +439,12 @@ impl Config {
         self
     }
 
+    /// Overwrite the config's alternate logo with the new value.
+    pub fn alt_logo(mut self, alt_logo: Option<PathBuf>) -> Self {
+        self.alt_logo = alt_logo;
+        self
+    }
+
     /// Overwrite the config's additional JS with the new value.
     pub fn additional_javascript(mut self, additional_javascript: AdditionalScript) -> Self {
         self.additional_javascript = additional_javascript;
@@ -490,8 +510,10 @@ pub async fn document_workspace(config: Config) -> Result<()> {
 
     let mut docs_tree = DocsTreeBuilder::new(docs_dir.clone())
         .maybe_homepage(homepage)
+        .init_light_mode(config.init_light_mode)
         .maybe_custom_theme(config.custom_theme)?
         .maybe_logo(config.custom_logo)
+        .maybe_alt_logo(config.alt_logo)
         .additional_javascript(config.additional_javascript)
         .prefer_full_directory(config.init_on_full_directory)
         .build()
diff --git a/crates/wdl-doc/tests/output_docs/assets/category-selected.light.svg b/crates/wdl-doc/tests/output_docs/assets/category-selected.light.svg
new file mode 100644
index 00000000..61dd8027
--- /dev/null
+++ b/crates/wdl-doc/tests/output_docs/assets/category-selected.light.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.79053 15.4688C7.93376 15.8739 8.18561 16.2318 8.51855 16.5035C8.85148 16.7751 9.2527 16.95 9.67832 17.009C10.1039 17.0681 10.5376 17.0089 10.9319 16.8381C11.3262 16.6673 11.6659 16.3914 11.914 16.0405C12.1621 15.6897 12.3089 15.2774 12.3384 14.8487C12.368 14.42 12.2791 13.9914 12.0815 13.6099C11.884 13.2283 11.5853 12.9083 11.2182 12.6851C10.851 12.4618 10.4296 12.3437 9.9999 12.3438" stroke="#070a1a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.2107 4.53125C12.0675 4.12619 11.8157 3.76829 11.4828 3.49665C11.15 3.22501 10.7488 3.0501 10.3233 2.99102C9.89773 2.93194 9.46413 2.99096 9.06985 3.16165C8.67558 3.33233 8.33581 3.60811 8.08767 3.95883C7.83953 4.30956 7.69257 4.72175 7.66284 5.15035C7.63312 5.57896 7.72178 6.00748 7.91913 6.38911C8.11648 6.77073 8.41494 7.09076 8.78187 7.31424C9.14881 7.53771 9.57012 7.65603 9.99975 7.65625" stroke="#070a1a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.65625 10C7.65625 10.6216 7.90318 11.2177 8.34272 11.6573C8.78226 12.0968 9.3784 12.3438 10 12.3438C10.6216 12.3438 11.2177 12.0968 11.6573 11.6573C12.0968 11.2177 12.3438 10.6216 12.3438 10C12.3438 9.3784 12.0968 8.78226 11.6573 8.34272C11.2177 7.90318 10.6216 7.65625 10 7.65625C9.3784 7.65625 8.78226 7.90318 8.34272 8.34272C7.90318 8.78226 7.65625 9.3784 7.65625 10Z" stroke="#070a1a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/crates/wdl-doc/tests/output_docs/assets/category-unselected.light.svg b/crates/wdl-doc/tests/output_docs/assets/category-unselected.light.svg
new file mode 100644
index 00000000..bf410397
--- /dev/null
+++ b/crates/wdl-doc/tests/output_docs/assets/category-unselected.light.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.79053 15.4688C7.93376 15.8739 8.18561 16.2318 8.51855 16.5035C8.85148 16.7751 9.2527 16.95 9.67832 17.009C10.1039 17.0681 10.5376 17.0089 10.9319 16.8381C11.3262 16.6673 11.6659 16.3914 11.914 16.0405C12.1621 15.6897 12.3089 15.2774 12.3384 14.8487C12.368 14.42 12.2791 13.9914 12.0815 13.6099C11.884 13.2283 11.5853 12.9083 11.2182 12.6851C10.851 12.4618 10.4296 12.3437 9.9999 12.3438" stroke="#474E69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.2107 4.53125C12.0675 4.12619 11.8157 3.76829 11.4828 3.49665C11.15 3.22501 10.7488 3.0501 10.3233 2.99102C9.89773 2.93194 9.46413 2.99096 9.06985 3.16165C8.67558 3.33233 8.33581 3.60811 8.08767 3.95883C7.83953 4.30956 7.69257 4.72175 7.66284 5.15035C7.63312 5.57896 7.72178 6.00748 7.91913 6.38911C8.11648 6.77073 8.41494 7.09076 8.78187 7.31424C9.14881 7.53771 9.57012 7.65603 9.99975 7.65625" stroke="#474E69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.65625 10C7.65625 10.6216 7.90318 11.2177 8.34272 11.6573C8.78226 12.0968 9.3784 12.3438 10 12.3438C10.6216 12.3438 11.2177 12.0968 11.6573 11.6573C12.0968 11.2177 12.3438 10.6216 12.3438 10C12.3438 9.3784 12.0968 8.78226 11.6573 8.34272C11.2177 7.90318 10.6216 7.65625 10 7.65625C9.3784 7.65625 8.78226 7.90318 8.34272 8.34272C7.90318 8.78226 7.65625 9.3784 7.65625 10Z" stroke="#474E69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/crates/wdl-doc/tests/output_docs/assets/chevron-down.light.svg b/crates/wdl-doc/tests/output_docs/assets/chevron-down.light.svg
new file mode 100644
index 00000000..8ba85deb
--- /dev/null
+++ b/crates/wdl-doc/tests/output_docs/assets/chevron-down.light.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.23017 7.20938C5.52875 6.92228 6.00353 6.93159 6.29063 7.23017L10 11.1679L13.7094 7.23017C13.9965 6.93159 14.4713 6.92228 14.7698 7.20938C15.0684 7.49647 15.0777 7.97125 14.7906 8.26983L10.5406 12.7698C10.3992 12.9169 10.204 13 10 13C9.79599 13 9.60078 12.9169 9.45938 12.7698L5.20938 8.26983C4.92228 7.97125 4.93159 7.49647 5.23017 7.20938Z" fill="#070a1a"/>
+</svg>
diff --git a/crates/wdl-doc/tests/output_docs/assets/chevron-up.light.svg b/crates/wdl-doc/tests/output_docs/assets/chevron-up.light.svg
new file mode 100644
index 00000000..c16cc651
--- /dev/null
+++ b/crates/wdl-doc/tests/output_docs/assets/chevron-up.light.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.7698 12.7906C14.4713 13.0777 13.9965 13.0684 13.7094 12.7698L10 8.83208L6.29062 12.7698C6.00353 13.0684 5.52875 13.0777 5.23017 12.7906C4.93159 12.5035 4.92228 12.0287 5.20937 11.7302L9.45937 7.23017C9.60078 7.08311 9.79599 7 10 7C10.204 7 10.3992 7.08311 10.5406 7.23017L14.7906 11.7302C15.0777 12.0287 15.0684 12.5035 14.7698 12.7906Z" fill="#070a1a"/>
+</svg>
diff --git a/crates/wdl-doc/tests/output_docs/assets/dir-open.light.svg b/crates/wdl-doc/tests/output_docs/assets/dir-open.light.svg
new file mode 100644
index 00000000..49148d52
--- /dev/null
+++ b/crates/wdl-doc/tests/output_docs/assets/dir-open.light.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.12362 8.14668C3.21698 8.13241 3.31277 8.125 3.41051 8.125H16.5867C16.6845 8.125 16.7802 8.13241 16.8736 8.14668M3.12362 8.14668C2.12694 8.299 1.40681 9.23235 1.55435 10.2652L2.26864 15.2652C2.4006 16.1889 3.1917 16.875 4.1248 16.875H15.8724C16.8055 16.875 17.5966 16.1889 17.7286 15.2652L18.4429 10.2652C18.5904 9.23235 17.8703 8.299 16.8736 8.14668M3.12362 8.14668V5C3.12362 3.96447 3.96308 3.125 4.99862 3.125H8.23085C8.56237 3.125 8.88031 3.2567 9.11473 3.49112L10.8825 5.25888C11.1169 5.4933 11.4349 5.625 11.7664 5.625H14.9986C16.0341 5.625 16.8736 6.46447 16.8736 7.5V8.14668" stroke="#070a1a" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/crates/wdl-doc/tests/output_docs/assets/folder-selected.light.svg b/crates/wdl-doc/tests/output_docs/assets/folder-selected.light.svg
new file mode 100644
index 00000000..a0181f85
--- /dev/null
+++ b/crates/wdl-doc/tests/output_docs/assets/folder-selected.light.svg
@@ -0,0 +1,4 @@
+<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.8748 2.70001C3.00496 2.70001 2.2998 3.40516 2.2998 4.27501V7.20983C2.75444 6.91876 3.29492 6.75001 3.8748 6.75001H15.1248C15.7047 6.75001 16.2452 6.91876 16.6998 7.20983V6.07501C16.6998 5.20516 15.9947 4.50001 15.1248 4.50001H10.7726C10.7129 4.50001 10.6557 4.47631 10.6135 4.43411L9.34071 3.16132C9.04534 2.86595 8.64473 2.70001 8.22701 2.70001H3.8748Z" fill="#070a1a"/>
+<path d="M3.8748 8.10001C3.00496 8.10001 2.2998 8.80516 2.2998 9.67501V13.725C2.2998 14.5949 3.00496 15.3 3.8748 15.3H15.1248C15.9947 15.3 16.6998 14.5949 16.6998 13.725V9.67501C16.6998 8.80516 15.9947 8.10001 15.1248 8.10001H3.8748Z" fill="#070a1a"/>
+</svg>
diff --git a/crates/wdl-doc/tests/output_docs/assets/folder-unselected.light.svg b/crates/wdl-doc/tests/output_docs/assets/folder-unselected.light.svg
new file mode 100644
index 00000000..01cc1adf
--- /dev/null
+++ b/crates/wdl-doc/tests/output_docs/assets/folder-unselected.light.svg
@@ -0,0 +1,4 @@
+<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.8748 2.7C3.00496 2.7 2.2998 3.40515 2.2998 4.275V7.20982C2.75444 6.91875 3.29492 6.75 3.8748 6.75H15.1248C15.7047 6.75 16.2452 6.91875 16.6998 7.20982V6.075C16.6998 5.20515 15.9947 4.5 15.1248 4.5H10.7726C10.7129 4.5 10.6557 4.47629 10.6135 4.4341L9.34071 3.1613C9.04534 2.86593 8.64473 2.7 8.22701 2.7H3.8748Z" fill="#474E69"/>
+<path d="M3.8748 8.1C3.00496 8.1 2.2998 8.80515 2.2998 9.675V13.725C2.2998 14.5948 3.00496 15.3 3.8748 15.3H15.1248C15.9947 15.3 16.6998 14.5948 16.6998 13.725V9.675C16.6998 8.80515 15.9947 8.1 15.1248 8.1H3.8748Z" fill="#474E69"/>
+</svg>
diff --git a/crates/wdl-doc/tests/output_docs/assets/information-circle.light.svg b/crates/wdl-doc/tests/output_docs/assets/information-circle.light.svg
new file mode 100644
index 00000000..8ac7733b
--- /dev/null
+++ b/crates/wdl-doc/tests/output_docs/assets/information-circle.light.svg
@@ -0,0 +1,3 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.875 9.375L9.90957 9.35771C10.3872 9.11891 10.9249 9.55029 10.7954 10.0683L10.2046 12.4317C10.0751 12.9497 10.6128 13.3811 11.0904 13.1423L11.125 13.125M18 10C18 14.1421 14.6421 17.5 10.5 17.5C6.35786 17.5 3 14.1421 3 10C3 5.85786 6.35786 2.5 10.5 2.5C14.6421 2.5 18 5.85786 18 10ZM10.5 6.875H10.5063V6.88125H10.5V6.875Z" stroke="#a16207" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/crates/wdl-doc/tests/output_docs/assets/link.light.svg b/crates/wdl-doc/tests/output_docs/assets/link.light.svg
new file mode 100644
index 00000000..36876737
--- /dev/null
+++ b/crates/wdl-doc/tests/output_docs/assets/link.light.svg
@@ -0,0 +1,4 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.75 5.5C4.33579 5.5 4 5.83579 4 6.25V14.75C4 15.1642 4.33579 15.5 4.75 15.5H13.25C13.6642 15.5 14 15.1642 14 14.75V10.75C14 10.3358 14.3358 10 14.75 10C15.1642 10 15.5 10.3358 15.5 10.75V14.75C15.5 15.9926 14.4926 17 13.25 17H4.75C3.50736 17 2.5 15.9926 2.5 14.75V6.25C2.5 5.00736 3.50736 4 4.75 4H9.75C10.1642 4 10.5 4.33579 10.5 4.75C10.5 5.16421 10.1642 5.5 9.75 5.5H4.75Z" fill="#070a1a"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.69385 12.7532C6.97175 13.0603 7.44603 13.0841 7.75319 12.8062L17 4.43999V7.25C17 7.66421 17.3358 8 17.75 8C18.1642 8 18.5 7.66421 18.5 7.25V2.75C18.5 2.33579 18.1642 2 17.75 2H13.25C12.8358 2 12.5 2.33579 12.5 2.75C12.5 3.16421 12.8358 3.5 13.25 3.5H15.8032L6.74682 11.6938C6.43966 11.9717 6.41595 12.446 6.69385 12.7532Z" fill="#070a1a"/>
+</svg>
diff --git a/crates/wdl-doc/tests/output_docs/assets/list-bullet-selected.light.svg b/crates/wdl-doc/tests/output_docs/assets/list-bullet-selected.light.svg
new file mode 100644
index 00000000..3bdb854e
--- /dev/null
+++ b/crates/wdl-doc/tests/output_docs/assets/list-bullet-selected.light.svg
@@ -0,0 +1,6 @@
+<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.90002 4.275C5.90002 3.90221 6.20223 3.6 6.57503 3.6H16.025C16.3978 3.6 16.7 3.90221 16.7 4.275C16.7 4.64779 16.3978 4.95 16.025 4.95H6.57503C6.20223 4.95 5.90002 4.64779 5.90002 4.275ZM5.90002 9C5.90002 8.62721 6.20223 8.325 6.57503 8.325H16.025C16.3978 8.325 16.7 8.62721 16.7 9C16.7 9.37279 16.3978 9.675 16.025 9.675H6.57503C6.20223 9.675 5.90002 9.37279 5.90002 9ZM5.90002 13.725C5.90002 13.3522 6.20223 13.05 6.57503 13.05H16.025C16.3978 13.05 16.7 13.3522 16.7 13.725C16.7 14.0978 16.3978 14.4 16.025 14.4H6.57503C6.20223 14.4 5.90002 14.0978 5.90002 13.725Z" fill="#070a1a"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.29102 4.275C2.29102 3.77794 2.69396 3.375 3.19102 3.375H3.20002C3.69707 3.375 4.10002 3.77794 4.10002 4.275V4.284C4.10002 4.78106 3.69707 5.184 3.20002 5.184H3.19102C2.69396 5.184 2.29102 4.78106 2.29102 4.284V4.275Z" fill="#070a1a"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.29102 13.725C2.29102 13.2279 2.69396 12.825 3.19102 12.825H3.20002C3.69707 12.825 4.10002 13.2279 4.10002 13.725V13.734C4.10002 14.2311 3.69707 14.634 3.20002 14.634H3.19102C2.69396 14.634 2.29102 14.2311 2.29102 13.734V13.725Z" fill="#070a1a"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.29102 9C2.29102 8.50294 2.69396 8.1 3.19102 8.1H3.20002C3.69707 8.1 4.10002 8.50294 4.10002 9V9.009C4.10002 9.50606 3.69707 9.909 3.20002 9.909H3.19102C2.69396 9.909 2.29102 9.50606 2.29102 9.009V9Z" fill="#070a1a"/>
+</svg>
diff --git a/crates/wdl-doc/tests/output_docs/assets/list-bullet-unselected.light.svg b/crates/wdl-doc/tests/output_docs/assets/list-bullet-unselected.light.svg
new file mode 100644
index 00000000..563b453a
--- /dev/null
+++ b/crates/wdl-doc/tests/output_docs/assets/list-bullet-unselected.light.svg
@@ -0,0 +1,6 @@
+<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.90002 4.275C5.90002 3.90221 6.20223 3.6 6.57503 3.6H16.025C16.3978 3.6 16.7 3.90221 16.7 4.275C16.7 4.64779 16.3978 4.95 16.025 4.95H6.57503C6.20223 4.95 5.90002 4.64779 5.90002 4.275ZM5.90002 9C5.90002 8.62721 6.20223 8.325 6.57503 8.325H16.025C16.3978 8.325 16.7 8.62721 16.7 9C16.7 9.37279 16.3978 9.675 16.025 9.675H6.57503C6.20223 9.675 5.90002 9.37279 5.90002 9ZM5.90002 13.725C5.90002 13.3522 6.20223 13.05 6.57503 13.05H16.025C16.3978 13.05 16.7 13.3522 16.7 13.725C16.7 14.0978 16.3978 14.4 16.025 14.4H6.57503C6.20223 14.4 5.90002 14.0978 5.90002 13.725Z" fill="#474E69"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.29102 4.275C2.29102 3.77794 2.69396 3.375 3.19102 3.375H3.20002C3.69707 3.375 4.10002 3.77794 4.10002 4.275V4.284C4.10002 4.78106 3.69707 5.184 3.20002 5.184H3.19102C2.69396 5.184 2.29102 4.78106 2.29102 4.284V4.275Z" fill="#474E69"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.29102 13.725C2.29102 13.2279 2.69396 12.825 3.19102 12.825H3.20002C3.69707 12.825 4.10002 13.2279 4.10002 13.725V13.734C4.10002 14.2311 3.69707 14.634 3.20002 14.634H3.19102C2.69396 14.634 2.29102 14.2311 2.29102 13.734V13.725Z" fill="#474E69"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.29102 9C2.29102 8.50294 2.69396 8.1 3.19102 8.1H3.20002C3.69707 8.1 4.10002 8.50294 4.10002 9V9.009C4.10002 9.50606 3.69707 9.909 3.20002 9.909H3.19102C2.69396 9.909 2.29102 9.50606 2.29102 9.009V9Z" fill="#474E69"/>
+</svg>
diff --git a/crates/wdl-doc/tests/output_docs/assets/logo.light.svg b/crates/wdl-doc/tests/output_docs/assets/logo.light.svg
new file mode 100644
index 00000000..dfa142a3
--- /dev/null
+++ b/crates/wdl-doc/tests/output_docs/assets/logo.light.svg
@@ -0,0 +1,35 @@
+<svg width="126" height="32" viewBox="0 0 126 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M47.0777 24.2151C43.9796 24.2151 41.6991 22.2574 41.3334 19.3099H43.5924C43.7 21.698 44.5605 22.4725 47.0777 22.4725C49.3582 22.4725 50.4554 21.698 50.4554 20.0414V19.1808C50.4554 17.933 49.9175 17.5888 47.2928 17.2015L46.2601 17.0509C43.5709 16.6637 41.8712 14.9856 41.8712 12.7911C41.8712 10.36 44.1302 8.3377 46.8195 8.3377C49.7669 8.3377 51.8753 10.1664 52.2626 13.0278H50.0036C49.9175 10.8118 49.1215 10.0803 46.8195 10.0803C44.8402 10.0803 43.8936 10.8118 43.8936 12.3393V13.0708C43.8936 14.4047 44.5605 14.878 46.9916 15.2437L48.0243 15.3943C51.0363 15.8461 52.4777 17.1585 52.4777 19.4605C52.4777 22.1068 50.0681 24.2151 47.0777 24.2151ZM60.0287 12.533C62.7395 12.533 65.063 15.2007 65.063 18.3203C65.063 21.5904 62.7825 24.2151 59.9426 24.2151C58.6303 24.2151 57.404 23.5697 56.5004 22.4295V28.4534H54.6071V12.7481H56.3928V14.4907C57.1888 13.329 58.6088 12.533 60.0287 12.533ZM62.9546 19.2454V17.5242C62.9546 15.2007 61.9865 14.2111 59.7275 14.2111C57.4685 14.2111 56.5004 15.2007 56.5004 17.5242V19.2454C56.5004 21.5474 57.4685 22.537 59.7275 22.537C61.9865 22.537 62.9546 21.5474 62.9546 19.2454ZM68.2382 14.8565C69.1203 13.5656 70.5617 12.7481 72.3044 12.533V14.921H70.5617C69.0342 14.921 68.3458 15.6095 68.3458 17.137V24H66.4525V12.7481H68.2382V14.8565ZM78.0162 24.2151C75.0042 24.2151 72.6807 21.655 72.6807 18.3633C72.6807 15.0716 75.0042 12.533 78.0162 12.533C81.0282 12.533 83.3517 15.0716 83.3517 18.3633C83.3517 21.655 81.0282 24.2151 78.0162 24.2151ZM78.0162 22.537C80.2752 22.537 81.2433 21.5474 81.2433 19.2239V17.5027C81.2433 15.2007 80.2752 14.2111 78.0162 14.2111C75.7572 14.2111 74.7891 15.2007 74.7891 17.5027V19.2239C74.7891 21.5474 75.7572 22.537 78.0162 22.537ZM89.6996 24.2151C86.7952 24.2151 84.5362 21.655 84.5362 18.3633C84.5362 15.0716 86.7737 12.533 89.6996 12.533C92.1092 12.533 94.2391 14.4477 94.6263 16.9649H92.604C92.4749 14.9856 91.6359 14.2111 89.6566 14.2111C87.5482 14.2111 86.6446 15.2007 86.6446 17.5027V19.2239C86.6446 21.5474 87.5482 22.537 89.6566 22.537C91.6359 22.537 92.4749 21.7625 92.604 19.7832H94.6263C94.2391 22.3004 92.1092 24.2151 89.6996 24.2151ZM96.4513 24V8.55284H98.3446V17.5673H99.8506L103.486 12.7481H105.724L101.4 18.2772L105.724 24H103.314L99.8506 19.1593H98.3446V24H96.4513ZM116.727 18.9442H108.423V19.439C108.423 21.6334 109.391 22.537 111.671 22.537C113.478 22.537 114.318 21.9346 114.49 20.5362H116.684C115.931 22.6661 113.78 24.2151 111.671 24.2151C108.595 24.2151 106.314 21.8916 106.314 18.6C106.314 15.2007 108.616 12.533 111.671 12.533C114.511 12.533 116.727 14.9856 116.727 18.1482V18.9442ZM111.693 14.2111C109.455 14.2111 108.423 15.0931 108.423 17.1155V17.3521H114.619V17.0724C114.619 15.0501 113.823 14.2111 111.693 14.2111ZM122.916 24.1076C120.873 24.1076 119.517 22.8167 119.517 20.902V14.3401H117.065V12.7481H119.517V8.55284H121.41V12.7481H124.638V14.3401H121.41V21.1171C121.41 21.9777 121.841 22.408 122.701 22.408H124.422V24.1076H122.916Z" fill="#070A1A"/>
+<mask id="mask0_3100_8065" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-1" y="0" width="32" height="32">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.6548 1.28981C12.8237 0.922363 13.191 0.686897 13.5954 0.686897H16.7464C17.1848 0.686897 17.5758 0.963109 17.7222 1.3764L18.7254 4.20727C18.8477 4.66356 19.0553 5.09099 19.3357 5.46761L19.3347 5.46822L19.59 5.80108C20.6556 7.19067 22.1084 8.23403 23.7655 8.79986L24.0174 8.88584L25.0106 5.42124L22.4683 3.57418L20.3507 4.85416L19.9509 3.88608L21.9328 2.68815C22.2892 2.47273 22.74 2.49182 23.0769 2.7366L25.6191 4.58366C25.9712 4.83948 26.1257 5.28819 26.0058 5.70655L25.2359 8.39214C24.9561 9.07675 24.8485 9.81973 24.9228 10.5559C25.0214 12.2916 25.6278 13.9615 26.6683 15.3573L26.8026 15.5374L29.523 13.2801L28.5522 10.2922L26.0157 10.1576V10.0367C26.0157 9.72956 26.0609 9.42411 26.1498 9.13014L26.1504 9.12801L28.607 9.25835C29.0348 9.28105 29.4044 9.56486 29.5368 9.97227L30.5077 12.9602C30.6387 13.3636 30.5105 13.806 30.1841 14.0769L28.3819 15.5723L28.1178 15.7655C27.6242 16.1268 27.1883 16.5593 26.8239 17.0482L26.8164 17.042L26.7526 17.1337C25.6381 18.7347 25.0821 20.6582 25.1705 22.6068L28.5475 22.2902L29.523 19.2878L27.6367 17.7227C27.8243 17.4292 28.0594 17.1696 28.3317 16.9541L30.1841 18.491C30.5105 18.7619 30.6387 19.2044 30.5077 19.6077L29.5321 22.6101C29.4045 23.003 29.0555 23.2824 28.6441 23.321L25.2631 23.638L25.2644 23.6475L25.2588 23.648C24.9137 23.6768 24.5744 23.7494 24.2489 23.8637L24.2481 23.8581L24.246 23.8589C22.3502 24.4792 20.72 25.7195 19.6165 27.3779L22.4541 28.9955L24.7099 27.2841L24.3948 24.9458C24.7158 24.8092 25.0594 24.7319 25.4087 24.7181L25.736 27.1458C25.7858 27.5155 25.6329 27.8834 25.3357 28.1089L23.0798 29.8203C22.7495 30.0709 22.3015 30.1003 21.9413 29.8949L19.4386 28.4682C18.9417 28.1584 18.4039 27.9197 17.8408 27.7591C17.5938 27.6839 17.3445 27.6198 17.0934 27.5667L16.9886 27.5401L16.9897 27.5454C15.4586 27.2406 13.8685 27.344 12.3818 27.853L13.6107 30.8457H16.7822L17.7174 28.838C18.0349 28.9793 18.3361 29.1549 18.6155 29.3617L17.7207 31.2828C17.5507 31.6477 17.1847 31.881 16.7822 31.881H13.6107C13.1908 31.881 12.8125 31.6274 12.653 31.239L11.6711 28.8478L11.6807 28.8437C11.6075 28.6435 11.5234 28.4478 11.4287 28.2573L11.4249 28.2481L11.4243 28.2484C11.2906 27.9806 11.1361 27.7233 10.9621 27.479L10.8813 27.3656L10.8824 27.365L10.8632 27.3401L10.8334 27.2983L10.8318 27.2993L10.6786 27.1002C9.55371 25.6385 8.00138 24.5634 6.23735 24.0246L6.10851 23.9852L5.35181 27.1369L7.91906 29.0021L9.97914 27.864C10.1503 28.1654 10.2974 28.4796 10.4192 28.8037L8.4197 29.9084C8.06799 30.1027 7.6356 30.0759 7.31052 29.8397L4.74327 27.9745C4.4045 27.7284 4.24735 27.3024 4.34511 26.8952L4.91544 24.5198L5.08607 24.0394C5.2411 23.603 5.29738 23.1376 5.25086 22.6768L5.18536 22.0279C5.09604 20.3673 4.54175 18.7628 3.58284 17.3991L3.38648 17.1198L0.851167 19.2829L1.83229 22.3025L3.93681 22.5749L3.93904 22.703C3.94351 22.9583 3.91672 23.2132 3.85929 23.462L3.82638 23.6046L1.69936 23.3292C1.30278 23.2779 0.971231 23.0027 0.847658 22.6224L-0.133465 19.6028C-0.262924 19.2044 -0.139501 18.7672 0.179207 18.4953L2.48868 16.5249C2.82931 16.3084 3.13435 16.0413 3.39359 15.7336L3.39516 15.7351L3.40733 15.7172C3.5571 15.5374 3.69132 15.3439 3.80799 15.1386L3.90529 14.9674L3.90373 14.9671C4.71787 13.6297 5.16521 12.0983 5.19638 10.5276L5.20503 10.092L1.82425 10.2902L0.844906 13.3043L2.56751 14.9462L2.2807 15.227C2.20068 15.3054 2.11476 15.3775 2.02372 15.4427L1.77489 15.621L0.130602 14.0537C-0.157686 13.7789 -0.262796 13.3631 -0.139726 12.9844L0.839616 9.97027C0.971345 9.56485 1.33811 9.28161 1.76366 9.25667L4.49783 9.09638L4.49795 9.09866L5.175 9.06151C5.45013 9.04641 5.72221 8.99837 5.98544 8.91858L5.98591 8.92112L6.13319 8.87182C7.94963 8.26373 9.52062 7.08435 10.6115 5.50983L10.6469 5.45883L7.89111 3.58606L5.33658 5.44203L5.77284 7.77948L4.72986 7.83414L4.31885 5.63198C4.24554 5.23921 4.4048 4.83931 4.72804 4.60446L7.28258 2.74848C7.63576 2.49187 8.11196 2.48439 8.47303 2.72977L10.5896 4.16818L10.588 4.16949L11.1174 4.54751C11.4914 4.81462 11.9151 5.00418 12.3635 5.10501L12.555 5.14808C14.2674 5.6374 16.0891 5.60069 17.7828 5.04013L17.9075 4.99887L16.7464 1.7222H13.5954L12.5857 3.91893L11.6603 3.4533L12.6548 1.28981ZM11.579 5.93132L11.4625 6.09945C10.2444 7.85762 8.49015 9.17455 6.46185 9.85357L6.24381 9.92656L6.23148 10.5482C6.19338 12.4682 5.5983 14.3358 4.5186 15.924L4.17089 16.4355L4.42974 16.8036C5.56601 18.4196 6.19348 20.3382 6.23163 22.3133L6.24381 22.944L6.53982 23.0344C8.5096 23.6362 10.243 24.8366 11.4991 26.4688L11.8609 26.9391C13.9572 26.1746 16.2507 26.1398 18.3699 26.841L18.6665 26.9391L18.6669 26.9384C19.8996 25.0194 21.7563 23.5842 23.924 22.8749L24.143 22.8032L24.1363 22.6554C24.0373 20.4789 24.6581 18.3304 25.9028 16.5423L26.0755 16.2942L25.8383 15.9761C24.6394 14.3679 23.9567 12.4337 23.8803 10.4293L23.8612 9.92651L23.431 9.77963C21.5805 9.1478 19.9583 7.98274 18.7684 6.43107L18.3852 5.9313L18.1081 6.023C16.1444 6.67292 14.0266 6.69221 12.0514 6.07816L11.579 5.93132Z" fill="#070A1A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.8461 1.73952C14.8452 1.50766 14.6565 1.32044 14.4247 1.32136L14.2291 1.32213C13.9972 1.32305 13.81 1.51179 13.8109 1.74368L13.8211 4.21623L14.8565 4.37846L14.8461 1.73952Z" fill="#070A1A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.4911 1.73952C16.4902 1.50766 16.3015 1.32044 16.0697 1.32136L15.8741 1.32213C15.6422 1.32305 15.455 1.51179 15.4559 1.74368L15.4661 4.21623L16.5015 4.37846L16.4911 1.73952Z" fill="#070A1A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.4922 30.8971C15.4922 31.129 15.6802 31.317 15.912 31.317L16.1076 31.317C16.3395 31.317 16.5275 31.129 16.5274 30.8971L16.527 28.4245L15.4923 28.2582L15.4922 30.8971Z" fill="#070A1A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.8472 30.8906C13.8472 31.1225 14.0351 31.3105 14.267 31.3105L14.4626 31.3105C14.6945 31.3105 14.8824 31.1225 14.8824 30.8906L14.882 28.418L13.8473 28.2517L13.8472 30.8906Z" fill="#070A1A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.5863 4.36606C23.7225 4.17847 23.6809 3.91593 23.4933 3.77966L23.3351 3.66471C23.1475 3.52843 22.8849 3.57007 22.7487 3.7577L21.2958 5.75844L22.0352 6.50112L23.5863 4.36606Z" fill="#070A1A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.9132 5.33808C25.0494 5.15049 25.0078 4.88794 24.8202 4.75168L24.662 4.63673C24.4744 4.50045 24.2118 4.54208 24.0756 4.72972L22.6227 6.73045L23.3622 7.47314L24.9132 5.33808Z" fill="#070A1A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.87773 28.2703C6.74071 28.4574 6.78128 28.7201 6.96833 28.8571L7.12612 28.9727C7.31319 29.1097 7.57593 29.0691 7.71292 28.882L9.17364 26.887L8.43718 26.1414L6.87773 28.2703Z" fill="#070A1A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.55449 27.2931C5.41747 27.4801 5.45804 27.7428 5.64509 27.8798L5.80288 27.9954C5.98995 28.1324 6.25268 28.0918 6.38967 27.9047L7.8504 25.9098L7.11394 25.1642L5.55449 27.2931Z" fill="#070A1A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M28.9841 11.4714C29.2042 11.3983 29.3233 11.1607 29.2503 10.9407L29.1887 10.755C29.1156 10.535 28.878 10.4158 28.6579 10.4889L26.3114 11.2683L26.4795 12.3028L28.9841 11.4714Z" fill="#070A1A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.4963 13.0346C29.7164 12.9615 29.8356 12.7239 29.7625 12.5039L29.7009 12.3183C29.6278 12.0982 29.3902 11.979 29.1701 12.0521L26.8236 12.8316L26.9917 13.866L29.4963 13.0346Z" fill="#070A1A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.47661 21.1624C1.25626 21.2346 1.13615 21.4717 1.20834 21.692L1.26923 21.8779C1.34142 22.0983 1.57859 22.2184 1.79894 22.1461L4.14851 21.376L3.98446 20.3409L1.47661 21.1624Z" fill="#070A1A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.970506 19.5972C0.750161 19.6693 0.63005 19.9065 0.702233 20.1268L0.763122 20.3127C0.835312 20.533 1.07249 20.6531 1.29284 20.5809L3.64241 19.8108L3.47836 18.7757L0.970506 19.5972Z" fill="#070A1A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.1703 20.594C29.3907 20.666 29.6278 20.5458 29.6998 20.3254L29.7606 20.1395C29.8327 19.9191 29.7124 19.682 29.492 19.61L27.1417 18.842L26.662 19.7738L29.1703 20.594Z" fill="#070A1A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M28.653 22.1555C28.8733 22.2275 29.1104 22.1073 29.1825 21.8869L29.2433 21.701C29.3153 21.4806 29.1951 21.2435 28.9746 21.1715L26.6244 20.4034L26.1447 21.3352L28.653 22.1555Z" fill="#070A1A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.28939 12.0357C1.06929 11.9628 0.831745 12.0821 0.758814 12.3022L0.697294 12.4878C0.624356 12.7079 0.74369 12.9455 0.963818 13.0184L3.31102 13.7957L3.79437 12.8659L1.28939 12.0357Z" fill="#070A1A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.81282 10.4763C1.59273 10.4034 1.35518 10.5227 1.28225 10.7428L1.22073 10.9284C1.14779 11.1485 1.26713 11.3861 1.48726 11.459L3.83446 12.2363L4.31781 11.3065L1.81282 10.4763Z" fill="#070A1A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.8509 27.9786C23.9867 28.1666 24.2491 28.2089 24.4371 28.0732L24.5956 27.9587C24.7836 27.823 24.826 27.5605 24.6902 27.3725L23.2425 25.3681L22.3062 25.8389L23.8509 27.9786Z" fill="#070A1A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.5133 28.9362C22.649 29.1242 22.9114 29.1666 23.0994 29.0308L23.258 28.9163C23.446 28.7806 23.4883 28.5181 23.3526 28.3302L21.9048 26.3257L20.9686 26.7966L22.5133 28.9362Z" fill="#070A1A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.35133 4.6473C6.21636 4.45877 5.9541 4.41537 5.76558 4.55035L5.60656 4.66421C5.41802 4.79921 5.37463 5.06149 5.50966 5.25001L6.94943 7.26015L7.88756 6.79302L6.35133 4.6473Z" fill="#070A1A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.69264 3.69497C7.55766 3.50644 7.29541 3.46303 7.10689 3.59802L6.94786 3.71188C6.75932 3.84687 6.71594 4.10916 6.85097 4.29768L8.29074 6.30782L9.22887 5.84069L7.69264 3.69497Z" fill="#070A1A"/>
+</mask>
+<g mask="url(#mask0_3100_8065)">
+<rect y="0.686714" width="30.5579" height="31.2446" fill="url(#paint0_linear_3100_8065)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_3100_8065" x1="8.17631" y1="6.35195" x2="31.6714" y2="36.3821" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F72585"/>
+<stop offset="1" stop-color="#2D00F7"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/crates/wdl-doc/tests/output_docs/assets/missing-home.light.svg b/crates/wdl-doc/tests/output_docs/assets/missing-home.light.svg
new file mode 100644
index 00000000..916d721d
--- /dev/null
+++ b/crates/wdl-doc/tests/output_docs/assets/missing-home.light.svg
@@ -0,0 +1,14 @@
+<svg width="55" height="51" viewBox="0 0 55 51" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3" y="1" width="50" height="50" rx="13" fill="#111420"/>
+<rect x="7" y="5" width="42" height="42" rx="10" fill="#22273B"/>
+<rect x="10" y="8" width="36" height="36" rx="8" fill="#333A55"/>
+<path d="M21.7188 15.125C20.9421 15.125 20.3125 15.7546 20.3125 16.5312V29.4688C20.3125 30.2454 20.9421 31 21.7187 31H27.5V32H30.5C32.5 32 33.5 30.5 33.5 29V26H32.5V23.5123C32.5 21.959 31.4283 20.75 29.875 20.75H28.4688C27.6921 20.75 27.0625 20.1204 27.0625 19.3438V17.9375C27.0625 16.3842 25.8033 15.125 24.25 15.125H21.7188Z" fill="#F8F9FC"/>
+<path d="M27.2284 15.3619C27.826 16.0524 28.1875 16.9527 28.1875 17.9375V19.3438C28.1875 19.4991 28.3134 19.625 28.4688 19.625H29.875C30.8598 19.625 31.7601 19.9865 32.4506 20.5841C31.7847 18.0349 29.7776 16.0278 27.2284 15.3619Z" fill="#F8F9FC"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.3508 26.275C29.3764 26.275 27.7758 27.8756 27.7758 29.85C27.7758 31.8245 29.3764 33.425 31.3508 33.425C32.3381 33.425 33.2312 33.0254 33.8787 32.378C34.5262 31.7305 34.9258 30.8374 34.9258 29.85C34.9258 27.8756 33.3252 26.275 31.3508 26.275ZM26.8008 29.85C26.8008 27.3372 28.8379 25.3 31.3508 25.3C33.8637 25.3 35.9008 27.3372 35.9008 29.85C35.9008 30.9307 35.5236 31.9239 34.8944 32.7042L37.058 34.8678C37.2484 35.0582 37.2484 35.3669 37.058 35.5573C36.8676 35.7476 36.5589 35.7476 36.3686 35.5573L34.205 33.3937C33.4246 34.0228 32.4314 34.4 31.3508 34.4C28.8379 34.4 26.8008 32.3629 26.8008 29.85Z" fill="#F8F9FC"/>
+<mask id="mask0_3597_17234" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="25" y="24" width="14" height="13">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.3508 26.275C29.3764 26.275 27.7758 27.8756 27.7758 29.85C27.7758 31.8245 29.3764 33.425 31.3508 33.425C32.3381 33.425 33.2312 33.0254 33.8787 32.378C34.5262 31.7305 34.9258 30.8374 34.9258 29.85C34.9258 27.8756 33.3252 26.275 31.3508 26.275ZM26.8008 29.85C26.8008 27.3372 28.8379 25.3 31.3508 25.3C33.8637 25.3 35.9008 27.3372 35.9008 29.85C35.9008 30.9307 35.5236 31.9239 34.8944 32.7042L37.058 34.8678C37.2484 35.0582 37.2484 35.3669 37.058 35.5573C36.8676 35.7476 36.5589 35.7476 36.3686 35.5573L34.205 33.3937C33.4246 34.0228 32.4314 34.4 31.3508 34.4C28.8379 34.4 26.8008 32.3629 26.8008 29.85Z" fill="#F8F9FC"/>
+</mask>
+<g mask="url(#mask0_3597_17234)">
+<path d="M25.5 24H32.5V31H25.5L25.5 24Z" fill="#22273B"/>
+</g>
+</svg>
diff --git a/crates/wdl-doc/tests/output_docs/assets/search.light.svg b/crates/wdl-doc/tests/output_docs/assets/search.light.svg
new file mode 100644
index 00000000..17fdfe1a
--- /dev/null
+++ b/crates/wdl-doc/tests/output_docs/assets/search.light.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.2001 6.8001C8.77004 6.8001 6.8001 8.77004 6.8001 11.2001C6.8001 13.6301 8.77004 15.6001 11.2001 15.6001C12.4153 15.6001 13.5145 15.1083 14.3114 14.3114C15.1083 13.5145 15.6001 12.4153 15.6001 11.2001C15.6001 8.77004 13.6301 6.8001 11.2001 6.8001ZM5.6001 11.2001C5.6001 8.1073 8.1073 5.6001 11.2001 5.6001C14.2929 5.6001 16.8001 8.1073 16.8001 11.2001C16.8001 12.5301 16.3358 13.7525 15.5615 14.7129L18.2244 17.3758C18.4587 17.6101 18.4587 17.99 18.2244 18.2244C17.99 18.4587 17.6101 18.4587 17.3758 18.2244L14.7129 15.5615C13.7525 16.3358 12.5301 16.8001 11.2001 16.8001C8.1073 16.8001 5.6001 14.2929 5.6001 11.2001Z" fill="#333a55"/>
+</svg>
diff --git a/crates/wdl-doc/tests/output_docs/assets/sidebar-icon-default.light.svg b/crates/wdl-doc/tests/output_docs/assets/sidebar-icon-default.light.svg
new file mode 100644
index 00000000..e3b37c33
--- /dev/null
+++ b/crates/wdl-doc/tests/output_docs/assets/sidebar-icon-default.light.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5 3.125L4.375 3.125C3.33947 3.125 2.5 3.96447 2.5 5V6.875V15C2.5 16.0355 3.33947 16.875 4.375 16.875H12.5M12.5 3.125L15.625 3.125C16.6605 3.125 17.5 3.96447 17.5 5V6.875V15C17.5 16.0355 16.6605 16.875 15.625 16.875H12.5M12.5 3.125V16.875" stroke="#070a1a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7 7.5L9.5 10L7 12.5" stroke="#070a1a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/crates/wdl-doc/tests/output_docs/assets/sidebar-icon-expand.light.svg b/crates/wdl-doc/tests/output_docs/assets/sidebar-icon-expand.light.svg
new file mode 100644
index 00000000..338232a2
--- /dev/null
+++ b/crates/wdl-doc/tests/output_docs/assets/sidebar-icon-expand.light.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5 3.125H4.375C3.33947 3.125 2.5 3.96447 2.5 5V6.875V15C2.5 16.0355 3.33947 16.875 4.375 16.875H12.5M12.5 3.125H15.625C16.6605 3.125 17.5 3.96447 17.5 5V6.875V15C17.5 16.0355 16.6605 16.875 15.625 16.875H12.5M12.5 3.125V16.875" stroke="#070a1a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 7.5L10.5 10L8 12.5" stroke="#070a1a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 7.5L7.5 10L5 12.5" stroke="#070a1a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/crates/wdl-doc/tests/output_docs/assets/sidebar-icon-hide.light.svg b/crates/wdl-doc/tests/output_docs/assets/sidebar-icon-hide.light.svg
new file mode 100644
index 00000000..4bd900f1
--- /dev/null
+++ b/crates/wdl-doc/tests/output_docs/assets/sidebar-icon-hide.light.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.5 3.125H4.375C3.33947 3.125 2.5 3.96447 2.5 5V6.875V15C2.5 16.0355 3.33947 16.875 4.375 16.875H7.5M7.5 3.125H15.625C16.6605 3.125 17.5 3.96447 17.5 5V6.875V15C17.5 16.0355 16.6605 16.875 15.625 16.875H7.5M7.5 3.125V16.875" stroke="#070a1a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.5 7.5L11 10L13.5 12.5" stroke="#070a1a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/crates/wdl-doc/tests/output_docs/assets/struct-selected.light.svg b/crates/wdl-doc/tests/output_docs/assets/struct-selected.light.svg
new file mode 100644
index 00000000..07f3b62f
--- /dev/null
+++ b/crates/wdl-doc/tests/output_docs/assets/struct-selected.light.svg
@@ -0,0 +1,12 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3100_8468)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.16699 2.8125C4.16699 2.63991 4.3069 2.5 4.47949 2.5H6.66699H8.22949C9.43761 2.5 10.417 3.47938 10.417 4.6875V5.9375C10.417 6.80045 11.1165 7.5 11.9795 7.5H13.2295C14.2581 7.5 15.1209 8.21 15.3546 9.16667H16.167C16.3368 9.16667 16.5032 9.18077 16.6653 9.20787C16.5763 4.79771 12.9735 1.25 8.54199 1.25H8.22949H6.66699H4.47949C3.61655 1.25 2.91699 1.94955 2.91699 2.8125V17.1875C2.91699 18.0504 3.61655 18.75 4.47949 18.75H6.66813C6.66737 18.7223 6.66699 18.6945 6.66699 18.6667V17.5H4.47949C4.3069 17.5 4.16699 17.3601 4.16699 17.1875V2.8125ZM11.667 4.6875C11.667 4.09729 11.5182 3.54183 11.2562 3.05654C12.8708 3.75102 14.166 5.04624 14.8604 6.6608C14.3752 6.39875 13.8197 6.25 13.2295 6.25H11.9795C11.8069 6.25 11.667 6.11009 11.667 5.9375V4.6875Z" fill="#070a1a"/>
+<rect x="8.33301" y="10.8333" width="9.16667" height="9.16667" rx="2" fill="#F472B6"/>
+<path d="M14.2235 16.8316C14.2235 16.683 14.1916 16.5456 14.1277 16.4194C14.0674 16.2894 13.9414 16.1724 13.7498 16.0684C13.5617 15.9607 13.2778 15.8679 12.898 15.7899C12.5786 15.7193 12.2894 15.6358 12.0303 15.5392C11.7748 15.4427 11.5566 15.3257 11.3756 15.1883C11.1981 15.0509 11.0615 14.8894 10.9657 14.7037C10.8699 14.518 10.822 14.3007 10.822 14.0519C10.822 13.8143 10.8716 13.5896 10.971 13.3779C11.0739 13.1662 11.2177 12.9787 11.4022 12.8153C11.5903 12.6519 11.8156 12.5238 12.0783 12.4309C12.3409 12.3381 12.6336 12.2917 12.9566 12.2917C13.4179 12.2917 13.8119 12.3771 14.1384 12.5479C14.4648 12.7188 14.715 12.9471 14.8889 13.2331C15.0628 13.5153 15.1498 13.8291 15.1498 14.1745H14.165C14.165 14.0074 14.1171 13.8458 14.0212 13.6899C13.929 13.5302 13.7923 13.3983 13.6114 13.2944C13.4339 13.1904 13.2157 13.1384 12.9566 13.1384C12.6833 13.1384 12.4615 13.183 12.2912 13.2721C12.1244 13.3575 12.002 13.467 11.9239 13.6007C11.8494 13.7344 11.8121 13.8755 11.8121 14.0241C11.8121 14.1355 11.8298 14.2358 11.8653 14.3249C11.9044 14.4103 11.9718 14.4901 12.0676 14.5644C12.1634 14.635 12.2983 14.7018 12.4722 14.7649C12.6461 14.8281 12.8679 14.8912 13.1376 14.9543C13.6096 15.0658 13.9982 15.1994 14.3034 15.3554C14.6086 15.5114 14.8357 15.7026 14.9848 15.9292C15.1338 16.1557 15.2083 16.4305 15.2083 16.7536C15.2083 17.0173 15.1551 17.2586 15.0486 17.4777C14.9457 17.6968 14.7949 17.8862 14.5962 18.0459C14.401 18.2019 14.1667 18.3244 13.8935 18.4136C13.6238 18.499 13.3203 18.5417 12.9832 18.5417C12.4757 18.5417 12.0463 18.447 11.695 18.2576C11.3436 18.0682 11.0775 17.8231 10.8965 17.5223C10.7155 17.2215 10.625 16.904 10.625 16.5698H11.6151C11.6293 16.852 11.7074 17.0767 11.8494 17.2438C11.9913 17.4072 12.1652 17.5242 12.371 17.5947C12.5769 17.6616 12.7809 17.695 12.9832 17.695C13.2529 17.695 13.4783 17.6578 13.6593 17.5836C13.8438 17.5093 13.984 17.4072 14.0798 17.2772C14.1756 17.1472 14.2235 16.9987 14.2235 16.8316Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_3100_8468">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/crates/wdl-doc/tests/output_docs/assets/struct-unselected.light.svg b/crates/wdl-doc/tests/output_docs/assets/struct-unselected.light.svg
new file mode 100644
index 00000000..b3205cce
--- /dev/null
+++ b/crates/wdl-doc/tests/output_docs/assets/struct-unselected.light.svg
@@ -0,0 +1,12 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3100_8934)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.16699 2.8125C4.16699 2.63991 4.3069 2.5 4.47949 2.5H6.66699H8.22949C9.43761 2.5 10.417 3.47938 10.417 4.6875V5.9375C10.417 6.80045 11.1165 7.5 11.9795 7.5H13.2295C14.2581 7.5 15.1209 8.21 15.3546 9.16667H16.167C16.3368 9.16667 16.5032 9.18077 16.6653 9.20787C16.5763 4.79771 12.9735 1.25 8.54199 1.25H8.22949H6.66699H4.47949C3.61655 1.25 2.91699 1.94955 2.91699 2.8125V17.1875C2.91699 18.0504 3.61655 18.75 4.47949 18.75H6.66813C6.66737 18.7223 6.66699 18.6945 6.66699 18.6667V17.5H4.47949C4.3069 17.5 4.16699 17.3601 4.16699 17.1875V2.8125ZM11.667 4.6875C11.667 4.09729 11.5182 3.54183 11.2562 3.05654C12.8708 3.75102 14.166 5.04624 14.8604 6.6608C14.3752 6.39875 13.8197 6.25 13.2295 6.25H11.9795C11.8069 6.25 11.667 6.11009 11.667 5.9375V4.6875Z" fill="#474e69"/>
+<rect x="8.33301" y="10.8334" width="9.16667" height="9.16667" rx="2" fill="#F472B6"/>
+<path d="M14.2235 16.8316C14.2235 16.6831 14.1916 16.5457 14.1277 16.4194C14.0674 16.2894 13.9414 16.1725 13.7498 16.0685C13.5617 15.9608 13.2778 15.868 12.898 15.79C12.5786 15.7194 12.2894 15.6359 12.0303 15.5393C11.7748 15.4427 11.5566 15.3258 11.3756 15.1884C11.1981 15.051 11.0615 14.8894 10.9657 14.7037C10.8699 14.5181 10.822 14.3008 10.822 14.052C10.822 13.8143 10.8716 13.5897 10.971 13.378C11.0739 13.1663 11.2177 12.9788 11.4022 12.8154C11.5903 12.652 11.8156 12.5238 12.0783 12.431C12.3409 12.3382 12.6336 12.2917 12.9566 12.2917C13.4179 12.2917 13.8119 12.3772 14.1384 12.548C14.4648 12.7188 14.715 12.9472 14.8889 13.2331C15.0628 13.5154 15.1498 13.8292 15.1498 14.1745H14.165C14.165 14.0074 14.1171 13.8459 14.0212 13.6899C13.929 13.5302 13.7923 13.3984 13.6114 13.2944C13.4339 13.1904 13.2157 13.1385 12.9566 13.1385C12.6833 13.1385 12.4615 13.183 12.2912 13.2721C12.1244 13.3576 12.002 13.4671 11.9239 13.6008C11.8494 13.7345 11.8121 13.8756 11.8121 14.0241C11.8121 14.1356 11.8298 14.2358 11.8653 14.3249C11.9044 14.4104 11.9718 14.4902 12.0676 14.5645C12.1634 14.635 12.2983 14.7019 12.4722 14.765C12.6461 14.8281 12.8679 14.8913 13.1376 14.9544C13.6096 15.0658 13.9982 15.1995 14.3034 15.3555C14.6086 15.5114 14.8357 15.7027 14.9848 15.9292C15.1338 16.1558 15.2083 16.4306 15.2083 16.7536C15.2083 17.0173 15.1551 17.2587 15.0486 17.4778C14.9457 17.6969 14.7949 17.8863 14.5962 18.046C14.401 18.202 14.1667 18.3245 13.8935 18.4136C13.6238 18.499 13.3203 18.5417 12.9832 18.5417C12.4757 18.5417 12.0463 18.4471 11.695 18.2577C11.3436 18.0683 11.0775 17.8232 10.8965 17.5224C10.7155 17.2216 10.625 16.904 10.625 16.5698H11.6151C11.6293 16.8521 11.7074 17.0767 11.8494 17.2438C11.9913 17.4072 12.1652 17.5242 12.371 17.5948C12.5769 17.6616 12.7809 17.695 12.9832 17.695C13.2529 17.695 13.4783 17.6579 13.6593 17.5836C13.8438 17.5094 13.984 17.4072 14.0798 17.2773C14.1756 17.1473 14.2235 16.9987 14.2235 16.8316Z" fill="#070A1A"/>
+</g>
+<defs>
+<clipPath id="clip0_3100_8934">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/crates/wdl-doc/tests/output_docs/assets/task-selected.light.svg b/crates/wdl-doc/tests/output_docs/assets/task-selected.light.svg
new file mode 100644
index 00000000..c5eb814a
--- /dev/null
+++ b/crates/wdl-doc/tests/output_docs/assets/task-selected.light.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.1665 2.8125C4.1665 2.63991 4.30641 2.5 4.479 2.5H6.6665H8.229C9.43713 2.5 10.4165 3.47938 10.4165 4.6875V5.9375C10.4165 6.80045 11.1161 7.5 11.979 7.5H13.229C14.2576 7.5 15.1205 8.21 15.3541 9.16667H16.1665C16.3363 9.16667 16.5027 9.18077 16.6648 9.20787C16.5758 4.79771 12.973 1.25 8.5415 1.25H8.229H6.6665H4.479C3.61606 1.25 2.9165 1.94955 2.9165 2.8125V17.1875C2.9165 18.0504 3.61606 18.75 4.479 18.75H6.66764C6.66688 18.7223 6.6665 18.6945 6.6665 18.6667V17.5H4.479C4.30641 17.5 4.1665 17.3601 4.1665 17.1875V2.8125ZM11.6665 4.6875C11.6665 4.09729 11.5178 3.54183 11.2557 3.05654C12.8703 3.75102 14.1655 5.04624 14.86 6.6608C14.3747 6.39875 13.8192 6.25 13.229 6.25H11.979C11.8064 6.25 11.6665 6.11009 11.6665 5.9375V4.6875Z" fill="#070a1a"/>
+<rect x="8.3335" y="10.8333" width="9.16667" height="9.16667" rx="2" fill="#A78BFA"/>
+<path d="M14.2714 13.3471V14.273H11.25V13.3471H14.2714ZM12.059 12.0508H13.3504V17.0995C13.3504 17.2555 13.3715 17.3757 13.4137 17.4601C13.456 17.5446 13.5193 17.6015 13.6038 17.6307C13.6883 17.6599 13.789 17.6746 13.9059 17.6746C13.9904 17.6746 14.0684 17.6697 14.1399 17.6599C14.2113 17.6502 14.2714 17.6405 14.3202 17.6307L14.325 18.5956C14.2178 18.6314 14.096 18.6606 13.9596 18.6833C13.8263 18.7061 13.6753 18.7174 13.5063 18.7174C13.2172 18.7174 12.9638 18.6687 12.7461 18.5712C12.5284 18.4705 12.3595 18.3097 12.2393 18.0888C12.1191 17.8646 12.059 17.569 12.059 17.2019V12.0508Z" fill="#070A1A"/>
+</svg>
diff --git a/crates/wdl-doc/tests/output_docs/assets/task-unselected.light.svg b/crates/wdl-doc/tests/output_docs/assets/task-unselected.light.svg
new file mode 100644
index 00000000..7c3e3ef1
--- /dev/null
+++ b/crates/wdl-doc/tests/output_docs/assets/task-unselected.light.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.1665 2.8125C4.1665 2.63991 4.30641 2.5 4.479 2.5H6.6665H8.229C9.43713 2.5 10.4165 3.47938 10.4165 4.6875V5.9375C10.4165 6.80045 11.1161 7.5 11.979 7.5H13.229C14.2576 7.5 15.1205 8.21 15.3541 9.16667H16.1665C16.3363 9.16667 16.5027 9.18077 16.6648 9.20787C16.5758 4.79771 12.973 1.25 8.5415 1.25H8.229H6.6665H4.479C3.61606 1.25 2.9165 1.94955 2.9165 2.8125V17.1875C2.9165 18.0504 3.61606 18.75 4.479 18.75H6.66764C6.66688 18.7223 6.6665 18.6945 6.6665 18.6667V17.5H4.479C4.30641 17.5 4.1665 17.3601 4.1665 17.1875V2.8125ZM11.6665 4.6875C11.6665 4.09729 11.5178 3.54183 11.2557 3.05654C12.8703 3.75102 14.1655 5.04624 14.86 6.6608C14.3747 6.39875 13.8192 6.25 13.229 6.25H11.979C11.8064 6.25 11.6665 6.11009 11.6665 5.9375V4.6875Z" fill="#474e69"/>
+<rect x="8.3335" y="10.8333" width="9.16667" height="9.16667" rx="2" fill="#A78BFA"/>
+<path d="M14.2714 13.3471V14.273H11.25V13.3471H14.2714ZM12.059 12.0508H13.3504V17.0995C13.3504 17.2555 13.3715 17.3757 13.4137 17.4601C13.456 17.5446 13.5193 17.6015 13.6038 17.6307C13.6883 17.6599 13.789 17.6746 13.9059 17.6746C13.9904 17.6746 14.0684 17.6697 14.1399 17.6599C14.2113 17.6502 14.2714 17.6405 14.3202 17.6307L14.325 18.5956C14.2178 18.6314 14.096 18.6606 13.9596 18.6833C13.8263 18.7061 13.6753 18.7174 13.5063 18.7174C13.2172 18.7174 12.9638 18.6687 12.7461 18.5712C12.5284 18.4705 12.3595 18.3097 12.2393 18.0888C12.1191 17.8646 12.059 17.569 12.059 17.2019V12.0508Z" fill="#070A1A"/>
+</svg>
diff --git a/crates/wdl-doc/tests/output_docs/assets/wdl-dir-selected.light.svg b/crates/wdl-doc/tests/output_docs/assets/wdl-dir-selected.light.svg
new file mode 100644
index 00000000..acf63c25
--- /dev/null
+++ b/crates/wdl-doc/tests/output_docs/assets/wdl-dir-selected.light.svg
@@ -0,0 +1,12 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3100_12975)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.98918 5.02136C2.98918 4.3947 3.49718 3.8867 4.12384 3.8867H7.38384C7.51759 3.8867 7.64586 3.93983 7.74043 4.0344L9.52338 5.81735C9.90168 6.19565 10.4148 6.40817 10.9497 6.40817H14.2097C14.7938 6.40817 15.2748 6.84943 15.3375 7.41676H2.98918V5.02136ZM16.8573 7.54283V7.63112C17.8557 8.06071 18.5259 9.08384 18.4543 10.2256C17.9786 9.66557 17.301 9.28247 16.5339 9.18889C16.3809 9.06212 16.1936 8.97447 15.9866 8.94283C15.9302 8.93421 15.8717 8.92965 15.8115 8.92965H2.52209C2.46184 8.92965 2.40342 8.93421 2.34701 8.94283C1.7449 9.03485 1.30969 9.6008 1.39883 10.2248L2.11925 15.2677C2.19911 15.8267 2.67785 16.2419 3.24251 16.2419H6.66682V17.7548H3.24251C1.92496 17.7548 0.807904 16.786 0.621574 15.4817L-0.0988478 10.4387C-0.273997 9.21268 0.416083 8.08728 1.47629 7.63112V5.02136C1.47629 3.55916 2.66164 2.37381 4.12384 2.37381H7.38384C7.91883 2.37381 8.43191 2.58633 8.8102 2.96463L10.5932 4.74758C10.6877 4.84215 10.816 4.89528 10.9497 4.89528H14.2097C15.6719 4.89528 16.8573 6.08063 16.8573 7.54283Z" fill="#070a1a"/>
+<rect x="8.3335" y="10.8333" width="9.16667" height="9.16667" rx="2.42062" fill="#4BD8FA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4193 11.7858L12.8649 12.6201V13.6908L13.9916 14.3411L15.0196 13.7478L16.4652 14.5822V16.2509L15.0196 17.0853L13.9686 16.4787L12.8649 17.1158V18.2132L11.4193 19.0476L9.97363 18.2132V16.5445L11.4193 15.7101L12.5193 16.3451L13.574 15.7363V15.0684L12.5442 14.474L11.4193 15.1233L9.97368 14.2889V12.6201L11.4193 11.7858Z" fill="#111420"/>
+</g>
+<defs>
+<clipPath id="clip0_3100_12975">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/crates/wdl-doc/tests/output_docs/assets/wdl-dir-unselected.light.svg b/crates/wdl-doc/tests/output_docs/assets/wdl-dir-unselected.light.svg
new file mode 100644
index 00000000..c8c12eb5
--- /dev/null
+++ b/crates/wdl-doc/tests/output_docs/assets/wdl-dir-unselected.light.svg
@@ -0,0 +1,12 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3100_12964)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 5C2.5 4.30964 3.05964 3.75 3.75 3.75H8.23223C8.39799 3.75 8.55696 3.81585 8.67417 3.93306L10.4419 5.70083C10.7936 6.05246 11.2705 6.25 11.7678 6.25H16.25C16.9404 6.25 17.5 6.80964 17.5 7.5V7.83446C17.1323 7.62174 16.7054 7.5 16.25 7.5H3.75C3.29464 7.5 2.86772 7.62174 2.5 7.83446V5ZM17.3523 9.41007C17.1416 9.01719 16.727 8.75 16.25 8.75H3.75C3.05964 8.75 2.5 9.30964 2.5 10V10.625V15C2.5 15.6904 3.05964 16.25 3.75 16.25H6.66667V17.5H3.75C2.36929 17.5 1.25 16.3807 1.25 15V10.625V10V5C1.25 3.61929 2.36929 2.5 3.75 2.5H8.23223C8.72951 2.5 9.20643 2.69754 9.55806 3.04917L11.3258 4.81694C11.443 4.93415 11.602 5 11.7678 5H16.25C17.6307 5 18.75 6.11929 18.75 7.5V10V10.625V10.6405C18.4277 10.0961 17.9382 9.66242 17.3523 9.41007Z" fill="#474e69"/>
+<rect x="8.3335" y="10.8333" width="9.16667" height="9.16667" rx="2.42062" fill="#4BD8FA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4193 11.7857L12.8649 12.6201V13.6908L13.9916 14.3411L15.0196 13.7478L16.4652 14.5822V16.2509L15.0196 17.0853L13.9686 16.4787L12.8649 17.1157V18.2132L11.4193 19.0476L9.97363 18.2132V16.5445L11.4193 15.7101L12.5193 16.345L13.574 15.7363V15.0684L12.5442 14.474L11.4193 15.1233L9.97368 14.2889V12.6201L11.4193 11.7857Z" fill="#111420"/>
+</g>
+<defs>
+<clipPath id="clip0_3100_12964">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/crates/wdl-doc/tests/output_docs/assets/workflow-selected.light.svg b/crates/wdl-doc/tests/output_docs/assets/workflow-selected.light.svg
new file mode 100644
index 00000000..305c40db
--- /dev/null
+++ b/crates/wdl-doc/tests/output_docs/assets/workflow-selected.light.svg
@@ -0,0 +1,12 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3100_12988)">
+<path d="M8.54199 1.25C12.9733 1.25017 16.5732 4.79792 16.6621 9.20801C16.501 9.18123 16.3357 9.16701 16.167 9.16699H15.3516C15.1179 8.21055 14.2579 7.50015 13.2295 7.5H11.9795C11.1165 7.5 10.417 6.80045 10.417 5.9375V4.6875C10.417 3.555 9.55602 2.6239 8.45312 2.51172L8.22949 2.5H4.47949C4.3069 2.5 4.16699 2.63991 4.16699 2.8125V17.1875C4.16699 17.3601 4.3069 17.5 4.47949 17.5H6.66699V18.667C6.667 18.6948 6.66819 18.7224 6.66895 18.75H4.47949C3.61655 18.75 2.91699 18.0504 2.91699 17.1875V2.8125C2.91699 1.94955 3.61655 1.25 4.47949 1.25H8.54199ZM11.2559 3.05664C11.5179 3.54191 11.667 4.09732 11.667 4.6875V5.9375C11.667 6.11009 11.8069 6.25 11.9795 6.25H13.2295C13.8191 6.25005 14.3744 6.39852 14.8594 6.66016C14.1648 5.04604 12.8701 3.75099 11.2559 3.05664Z" fill="#070a1a"/>
+<rect x="8.3335" y="10.8333" width="9.16667" height="9.16667" rx="2" fill="#34D399"/>
+<path d="M11.3761 16.7726L12.471 12.8333H13.3673L13.0162 14.1943L11.912 18.0185H11.2421L11.3761 16.7726ZM10.7708 12.8333L11.5932 16.7821L11.6671 18.0185H10.8956L9.5835 12.8333H10.7708ZM14.2636 16.7246L15.0674 12.8333H16.2502L14.9473 18.0185H14.1758L14.2636 16.7246ZM13.3673 12.8333L14.453 16.7342L14.5962 18.0185H13.9263L12.8129 14.1943L12.471 12.8333H13.3673Z" fill="#111420"/>
+</g>
+<defs>
+<clipPath id="clip0_3100_12988">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/crates/wdl-doc/tests/output_docs/assets/workflow-unselected.light.svg b/crates/wdl-doc/tests/output_docs/assets/workflow-unselected.light.svg
new file mode 100644
index 00000000..fbe007c7
--- /dev/null
+++ b/crates/wdl-doc/tests/output_docs/assets/workflow-unselected.light.svg
@@ -0,0 +1,12 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3100_12991)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.1665 2.8125C4.1665 2.63991 4.30641 2.5 4.479 2.5H6.6665H8.229C9.43713 2.5 10.4165 3.47938 10.4165 4.6875V5.9375C10.4165 6.80045 11.1161 7.5 11.979 7.5H13.229C14.2576 7.5 15.1205 8.21 15.3541 9.16667H16.1665C16.3363 9.16667 16.5027 9.18077 16.6648 9.20787C16.5758 4.79771 12.973 1.25 8.5415 1.25H8.229H6.6665H4.479C3.61606 1.25 2.9165 1.94955 2.9165 2.8125V17.1875C2.9165 18.0504 3.61606 18.75 4.479 18.75H6.66764C6.66688 18.7223 6.6665 18.6945 6.6665 18.6667V17.5H4.479C4.30641 17.5 4.1665 17.3601 4.1665 17.1875V2.8125ZM11.6665 4.6875C11.6665 4.09729 11.5178 3.54183 11.2557 3.05654C12.8703 3.75102 14.1655 5.04624 14.86 6.6608C14.3747 6.39875 13.8192 6.25 13.229 6.25H11.979C11.8064 6.25 11.6665 6.11009 11.6665 5.9375V4.6875Z" fill="#474e69"/>
+<rect x="8.3335" y="10.8333" width="9.16667" height="9.16667" rx="2" fill="#34D399"/>
+<path d="M11.3761 16.7725L12.471 12.8333H13.3673L13.0162 14.1943L11.912 18.0185H11.2421L11.3761 16.7725ZM10.7708 12.8333L11.5932 16.7821L11.6671 18.0185H10.8956L9.5835 12.8333H10.7708ZM14.2636 16.7246L15.0674 12.8333H16.2502L14.9473 18.0185H14.1758L14.2636 16.7246ZM13.3673 12.8333L14.453 16.7342L14.5962 18.0185H13.9263L12.8129 14.1943L12.471 12.8333H13.3673Z" fill="#111420"/>
+</g>
+<defs>
+<clipPath id="clip0_3100_12991">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/crates/wdl-doc/tests/output_docs/assets/x-mark.light.svg b/crates/wdl-doc/tests/output_docs/assets/x-mark.light.svg
new file mode 100644
index 00000000..1f611465
--- /dev/null
+++ b/crates/wdl-doc/tests/output_docs/assets/x-mark.light.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.02426 5.06441C4.78995 4.83009 4.41005 4.83009 4.17574 5.06441C3.94142 5.29872 3.94142 5.67862 4.17574 5.91294L7.15147 8.88867L4.17574 11.8644C3.94142 12.0987 3.94142 12.4786 4.17574 12.7129C4.41005 12.9473 4.78995 12.9473 5.02426 12.7129L8 9.7372L10.9757 12.7129C11.2101 12.9473 11.59 12.9473 11.8243 12.7129C12.0586 12.4786 12.0586 12.0987 11.8243 11.8644L8.84853 8.88867L11.8243 5.91294C12.0586 5.67862 12.0586 5.29872 11.8243 5.06441C11.59 4.83009 11.2101 4.83009 10.9757 5.06441L8 8.04014L5.02426 5.06441Z" fill="#949BB8"/>
+</svg>
diff --git a/crates/wdl-doc/tests/output_docs/data_structures/flag_filter/FlagFilter-struct.html b/crates/wdl-doc/tests/output_docs/data_structures/flag_filter/FlagFilter-struct.html
index da871e80..f7ae2178 100644
--- a/crates/wdl-doc/tests/output_docs/data_structures/flag_filter/FlagFilter-struct.html
+++ b/crates/wdl-doc/tests/output_docs/data_structures/flag_filter/FlagFilter-struct.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html class="dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>FlagFilter</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&amp;display=swap" rel="stylesheet"><script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script defer src="../../index.js"></script><link rel="stylesheet" type="text/css" href="../../style.css"></head><body class="body--base"><div class="layout__container layout__container--alt-layout" x-transition x-data="{
+<!DOCTYPE html><html x-data="{ DEFAULT_THEME: '' }" x-bind:class="(localStorage.getItem('theme') ?? DEFAULT_THEME) === 'light' ? 'light' : ''" x-cloak><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>FlagFilter</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&amp;display=swap" rel="stylesheet"><script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script defer src="../../index.js"></script><link rel="stylesheet" type="text/css" href="../../style.css"></head><body class="body--base"><div class="layout__container layout__container--alt-layout" x-transition x-data="{
                 sidebarState: $persist(window.innerWidth &lt; 768 ? 'hidden' : 'normal').using(sessionStorage),
                 get showSidebarButtons() { return this.sidebarState !== 'hidden'; },
                 get showCenterButtons() { return this.sidebarState === 'hidden'; },
@@ -16,7 +16,7 @@
                 collapseSidebar() { this.sidebarState = 'hidden'; },
                 restoreSidebar() { this.sidebarState = 'normal'; },
                 expandSidebar() { this.sidebarState = 'xl'; }
-            }" x-bind:class="containerClasses"><div class="layout__sidebar-left" x-transition><div class="absolute top-5 right-2 flex gap-1 z-10" x-cloak x-show="showSidebarButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../../assets/sidebar-icon-hide.svg" alt=""></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../../assets/sidebar-icon-default.svg" alt=""></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../../assets/sidebar-icon-expand.svg" alt=""></img></button></div><div x-data="{
+            }" x-bind:class="containerClasses"><div class="layout__sidebar-left" x-transition><div class="absolute top-5 right-2 flex gap-1 z-10" x-cloak x-show="showSidebarButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../../assets/sidebar-icon-hide.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-hide.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../../assets/sidebar-icon-default.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-default.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../../assets/sidebar-icon-expand.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-expand.light.svg" alt="" class="hidden light:block"></img></button></div><div x-data="{
                 showWorkflows: $persist(false).using(sessionStorage),
                 search: $persist('').using(sessionStorage),
                 dirOpen: '../../assets/chevron-up.svg',
@@ -68,12 +68,15 @@
                         this.showChildrenCache[n.key] = true;
                     });
                 }
-            }" x-cloak x-init="$nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__container"><div class="sticky px-4"><a href="../../index.html"><img src="../../assets/logo.svg" class="w-[120px] flex-none mb-8" alt="Logo"></a><div class="relative w-full h-10"><input id="searchbox" x-model.debounce="search" type="text" placeholder="Search..." class="left-sidebar__searchbox"><img src="../../assets/search.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none" alt="Search icon"><img src="../../assets/x-mark.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"></div><div class="left-sidebar__tabs-container mt-4"><button x-on:click="showWorkflows = true; search = ''; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="! showWorkflows ? 'opacity-40 hover:opacity-80' : ''"><img src="../../assets/list-bullet-selected.svg" class="left-sidebar__icon" alt="List icon"><p>Workflows</p></button><button x-on:click="showWorkflows = false; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="showWorkflows ? 'opacity-40 hover:opacity-80' : ''"><img src="../../assets/folder-selected.svg" class="left-sidebar__icon" alt="List icon"><p>Full Directory</p></button></div></div><div x-cloak class="left-sidebar__content-container pt-4"><ul x-show="! showWorkflows || search != ''" class="left-sidebar__content"><sprocket-tooltip content="docs" class="block"><a href="../../index.html" x-show="search === ''" aria-label="docs" class="left-sidebar__row hover:bg-slate-700"><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative shrink-0"><img src="../../assets/dir-open.svg" class="left-sidebar__icon" alt="Directory icon"></div><div class="text-slate-50">docs</div></div></a></sprocket-tooltip><template x-for="node in shownNodes"><sprocket-tooltip x-bind:content="node.display_name" class="block isolate"><a x-bind:href="node.href" x-show="showSelfCache[node.key]" x-on:click="if (node.href === null) toggleChildren(node.key)" x-bind:aria-label="node.display_name" class="left-sidebar__row" x-bind:class="`${node.current ? 'is-scrolled-to left-sidebar__row--active' : (node.href === null) ? showChildrenCache[node.key] ? 'left-sidebar__row-folder left-sidebar__row-folder--open' : 'left-sidebar__row-folder left-sidebar__row-folder--closed' : 'left-sidebar__row-page'} ${node.ancestor ? 'left-sidebar__content-item-container--ancestor' : ''}`"><template x-for="i in Array.from({ length: node.nest_level })"><div class="left-sidebar__indent -z-1"></div></template><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative left-sidebar__icon shrink-0"><img x-bind:src="node.icon || dirOpen" class="left-sidebar__icon" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"></div><div class="crop-ellipsis" x-text="node.display_name"></div></div></a></sprocket-tooltip></template><template x-for="node in searchedNodes"><li class="left-sidebar__search-result-item"><p class="text-xs text-slate-500 crop-ellipsis" x-text="node.parent"></p><div class="left-sidebar__search-result-item-container"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Node icon"><sprocket-tooltip class="crop-ellipsis" x-bind:content="node.display_name"><a x-bind:href="node.href" x-text="node.display_name"></a></sprocket-tooltip></div></li></template><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex place-content-center"><img src="../../assets/search.svg" class="size-8" alt="Search icon"></li><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex gap-1 place-content-center text-center break-words whitespace-normal text-sm text-slate-500"><span x-text="'No results found for'"></span><span x-text="`&quot;${search}&quot;`" class="text-slate-50"></span></li></ul><ul x-show="showWorkflows &amp;&amp; search === ''" class="left-sidebar__content"><li class=""><div class="left-sidebar__row"><img src="../../assets/category-selected.svg" class="left-sidebar__icon" alt="Category icon"><p class="text-slate-50">Other</p></div><ul class=""><a href="validate_flag_filter-workflow.html" x-data="{
+            }" x-cloak x-init="$nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__container"><div class="sticky px-4"><a href="../../index.html"><img src="../../assets/logo.svg" class="w-[120px] flex-none mb-8 block light:hidden" alt="Logo"><img src="../../assets/logo.light.svg" class="w-[120px] flex-none mb-8 hidden light:block" alt="Logo"></a><div class="relative w-full h-10"><input id="searchbox" x-model.debounce="search" type="text" placeholder="Search..." class="left-sidebar__searchbox"><img src="../../assets/search.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none block light:hidden" alt="Search icon"><img src="../../assets/search.light.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none hidden light:block" alt="Search icon"><img src="../../assets/x-mark.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer block light:hidden" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"><img src="../../assets/x-mark.light.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer hidden light:block" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"></div><div class="left-sidebar__tabs-container mt-4"><button x-on:click="showWorkflows = true; search = ''; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="! showWorkflows ? 'opacity-40 light:opacity-60 hover:opacity-80' : ''"><img src="../../assets/list-bullet-selected.svg" class="left-sidebar__icon block light:hidden" alt="List icon"><img src="../../assets/list-bullet-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="List icon"><p>Workflows</p></button><button x-on:click="showWorkflows = false; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="showWorkflows ? 'opacity-50 light:opacity-60 hover:opacity-80' : ''"><img src="../../assets/folder-selected.svg" class="left-sidebar__icon block light:hidden" alt="List icon"><img src="../../assets/folder-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="List icon"><p>Full Directory</p></button></div></div><div x-cloak class="left-sidebar__content-container pt-4"><ul x-show="! showWorkflows || search != ''" class="left-sidebar__content"><sprocket-tooltip content="docs" class="block"><a href="../../index.html" x-show="search === ''" aria-label="docs" class="left-sidebar__row hover:bg-slate-700"><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative shrink-0"><img src="../../assets/dir-open.svg" class="left-sidebar__icon block light:hidden" alt="Directory icon"><img src="../../assets/dir-open.light.svg" class="left-sidebar__icon hidden light:block" alt="Directory icon"></div><div class="text-slate-50">docs</div></div></a></sprocket-tooltip><template x-for="node in shownNodes"><sprocket-tooltip x-bind:content="node.display_name" class="block isolate"><a x-bind:href="node.href" x-show="showSelfCache[node.key]" x-on:click="if (node.href === null) toggleChildren(node.key)" x-bind:aria-label="node.display_name" class="left-sidebar__row" x-bind:class="`${node.current ? 'is-scrolled-to left-sidebar__row--active' : (node.href === null) ? showChildrenCache[node.key] ? 'left-sidebar__row-folder left-sidebar__row-folder--open' : 'left-sidebar__row-folder left-sidebar__row-folder--closed' : 'left-sidebar__row-page'} ${node.ancestor ? 'left-sidebar__content-item-container--ancestor' : ''}`"><template x-for="i in Array.from({ length: node.nest_level })"><div class="left-sidebar__indent -z-1"></div></template><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative left-sidebar__icon shrink-0"><img x-bind:src="node.icon || dirOpen" class="left-sidebar__icon block light:hidden" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"><img x-bind:src="(node.icon || dirOpen).replace('.svg', '.light.svg')" class="left-sidebar__icon hidden light:block" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"></div><div class="crop-ellipsis" x-text="node.display_name"></div></div></a></sprocket-tooltip></template><template x-for="node in searchedNodes"><li class="left-sidebar__search-result-item"><p class="text-xs text-slate-500 crop-ellipsis" x-text="node.parent"></p><div class="left-sidebar__search-result-item-container"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Node icon"><sprocket-tooltip class="crop-ellipsis" x-bind:content="node.display_name"><a x-bind:href="node.href" x-text="node.display_name"></a></sprocket-tooltip></div></li></template><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex place-content-center"><img src="../../assets/search.svg" class="size-8 block light:hidden" alt="Search icon"><img src="../../assets/search.light.svg" class="size-8 hidden light:block" alt="Search icon"></li><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex gap-1 place-content-center text-center break-words whitespace-normal text-sm text-slate-500"><span x-text="'No results found for'"></span><span x-text="`&quot;${search}&quot;`" class="text-slate-50"></span></li></ul><ul x-show="showWorkflows &amp;&amp; search === ''" class="left-sidebar__content"><li class=""><div class="left-sidebar__row"><img src="../../assets/category-selected.svg" class="left-sidebar__icon block light:hidden" alt="Category icon"><img src="../../assets/category-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="Category icon"><p class="text-slate-50">Other</p></div><ul class=""><a href="validate_flag_filter-workflow.html" x-data="{
                                     node: {
                                         current: false,
                                         icon: '../../assets/workflow-unselected.svg',
                                     }
-                                }" class="left-sidebar__row" x-bind:class="node.current ? 'bg-slate-700/50 is-scrolled-to' : 'hover:bg-slate-800'"><div class="left-sidebar__indent -1"></div><div class="left-sidebar__content-item-container crop-ellipsis"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Workflow icon"><sprocket-tooltip content="validate_flag_filter" class="crop-ellipsis" x-bind:class="node.current ? 'text-slate-50' : 'group-hover:text-slate-50'"><span>validate_flag_filter</span></sprocket-tooltip></div></a></ul></li></ul></div></div></div><div class="layout__main-center"><div class="layout__main-center-content"><div><div class="flex gap-1 mb-3" x-show="showCenterButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../../assets/sidebar-icon-hide.svg" alt=""></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../../assets/sidebar-icon-default.svg" alt=""></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../../assets/sidebar-icon-expand.svg" alt=""></img></button></div><div class="layout__breadcrumbs"><div class="layout__breadcrumb-container"><a class="layout__breadcrumb-clickable" href="../../index.html">docs</a><span> / </span><span class="layout__breadcrumb-inactive">data_structures</span><span> / </span><a href="index.html" class="layout__breadcrumb-clickable">flag_filter</a><span> / </span><span class="layout__breadcrumb-inactive">FlagFilter</span></div></div></div><div class="main__container"><p class="text-pink-400">Struct</p><h1 id="title" class="main__title"><code>FlagFilter</code></h1><div class="main__badge-container"><div class="main__badge"><span class="main__badge-text">WDL Version</span><div class="main__badge-inner"><span class="main__badge-inner-text">1.1</span></div></div></div><div class="main__section"><sprocket-code language="wdl">struct FlagFilter {
+                                }" class="left-sidebar__row" x-bind:class="node.current ? 'bg-slate-700/50 is-scrolled-to' : 'hover:bg-slate-800'"><div class="left-sidebar__indent -1"></div><div class="left-sidebar__content-item-container crop-ellipsis"><img x-bind:src="node.icon?.replace('.svg', '.light.svg')" class="left-sidebar__icon" alt="Workflow icon"><sprocket-tooltip content="validate_flag_filter" class="crop-ellipsis" x-bind:class="node.current ? 'text-slate-50' : 'group-hover:text-slate-50'"><span>validate_flag_filter</span></sprocket-tooltip></div></a></ul></li></ul></div></div></div><div class="layout__main-center"><div class="layout__main-center-content"><div><div class="flex gap-1 mb-3" x-show="showCenterButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../../assets/sidebar-icon-hide.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-hide.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../../assets/sidebar-icon-default.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-default.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../../assets/sidebar-icon-expand.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-expand.light.svg" alt="" class="hidden light:block"></img></button></div><div class="flex flex-row-reverse items-start justify-between"><button x-on:click="
+                                document.documentElement.classList.toggle('light')
+                                localStorage.setItem('theme', document.documentElement.classList.contains('light') ? 'light' : 'dark')
+                                " class="border border-slate-700 rounded-md h-8 flex items-center justify-center text-slate-300 text-lg w-8 cursor-pointer hover:border-slate-500">☀︎</button><div class="layout__breadcrumbs"><div class="layout__breadcrumb-container"><a class="layout__breadcrumb-clickable" href="../../index.html">docs</a><span> / </span><span class="layout__breadcrumb-inactive">data_structures</span><span> / </span><a href="index.html" class="layout__breadcrumb-clickable">flag_filter</a><span> / </span><span class="layout__breadcrumb-inactive">FlagFilter</span></div></div></div></div><div class="main__container"><p class="text-brand-pink-400">Struct</p><h1 id="title" class="main__title"><code>FlagFilter</code></h1><div class="main__badge-container"><div class="main__badge"><span class="main__badge-text">WDL Version</span><div class="main__badge-inner"><span class="main__badge-inner-text">1.1</span></div></div></div><div class="main__section"><sprocket-code language="wdl">struct FlagFilter {
     String include_if_all  # samtools -f
     String exclude_if_any  # samtools -F
     String include_if_any  # samtools --rf
diff --git a/crates/wdl-doc/tests/output_docs/data_structures/flag_filter/index.html b/crates/wdl-doc/tests/output_docs/data_structures/flag_filter/index.html
index 4af9445a..c7b52c89 100644
--- a/crates/wdl-doc/tests/output_docs/data_structures/flag_filter/index.html
+++ b/crates/wdl-doc/tests/output_docs/data_structures/flag_filter/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html class="dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flag_filter</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&amp;display=swap" rel="stylesheet"><script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script defer src="../../index.js"></script><link rel="stylesheet" type="text/css" href="../../style.css"></head><body class="body--base"><div class="layout__container layout__container--alt-layout" x-transition x-data="{
+<!DOCTYPE html><html x-data="{ DEFAULT_THEME: '' }" x-bind:class="(localStorage.getItem('theme') ?? DEFAULT_THEME) === 'light' ? 'light' : ''" x-cloak><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flag_filter</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&amp;display=swap" rel="stylesheet"><script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script defer src="../../index.js"></script><link rel="stylesheet" type="text/css" href="../../style.css"></head><body class="body--base"><div class="layout__container layout__container--alt-layout" x-transition x-data="{
                 sidebarState: $persist(window.innerWidth &lt; 768 ? 'hidden' : 'normal').using(sessionStorage),
                 get showSidebarButtons() { return this.sidebarState !== 'hidden'; },
                 get showCenterButtons() { return this.sidebarState === 'hidden'; },
@@ -16,7 +16,7 @@
                 collapseSidebar() { this.sidebarState = 'hidden'; },
                 restoreSidebar() { this.sidebarState = 'normal'; },
                 expandSidebar() { this.sidebarState = 'xl'; }
-            }" x-bind:class="containerClasses"><div class="layout__sidebar-left" x-transition><div class="absolute top-5 right-2 flex gap-1 z-10" x-cloak x-show="showSidebarButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../../assets/sidebar-icon-hide.svg" alt=""></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../../assets/sidebar-icon-default.svg" alt=""></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../../assets/sidebar-icon-expand.svg" alt=""></img></button></div><div x-data="{
+            }" x-bind:class="containerClasses"><div class="layout__sidebar-left" x-transition><div class="absolute top-5 right-2 flex gap-1 z-10" x-cloak x-show="showSidebarButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../../assets/sidebar-icon-hide.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-hide.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../../assets/sidebar-icon-default.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-default.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../../assets/sidebar-icon-expand.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-expand.light.svg" alt="" class="hidden light:block"></img></button></div><div x-data="{
                 showWorkflows: $persist(false).using(sessionStorage),
                 search: $persist('').using(sessionStorage),
                 dirOpen: '../../assets/chevron-up.svg',
@@ -68,12 +68,15 @@
                         this.showChildrenCache[n.key] = true;
                     });
                 }
-            }" x-cloak x-init="$nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__container"><div class="sticky px-4"><a href="../../index.html"><img src="../../assets/logo.svg" class="w-[120px] flex-none mb-8" alt="Logo"></a><div class="relative w-full h-10"><input id="searchbox" x-model.debounce="search" type="text" placeholder="Search..." class="left-sidebar__searchbox"><img src="../../assets/search.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none" alt="Search icon"><img src="../../assets/x-mark.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"></div><div class="left-sidebar__tabs-container mt-4"><button x-on:click="showWorkflows = true; search = ''; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="! showWorkflows ? 'opacity-40 hover:opacity-80' : ''"><img src="../../assets/list-bullet-selected.svg" class="left-sidebar__icon" alt="List icon"><p>Workflows</p></button><button x-on:click="showWorkflows = false; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="showWorkflows ? 'opacity-40 hover:opacity-80' : ''"><img src="../../assets/folder-selected.svg" class="left-sidebar__icon" alt="List icon"><p>Full Directory</p></button></div></div><div x-cloak class="left-sidebar__content-container pt-4"><ul x-show="! showWorkflows || search != ''" class="left-sidebar__content"><sprocket-tooltip content="docs" class="block"><a href="../../index.html" x-show="search === ''" aria-label="docs" class="left-sidebar__row hover:bg-slate-700"><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative shrink-0"><img src="../../assets/dir-open.svg" class="left-sidebar__icon" alt="Directory icon"></div><div class="text-slate-50">docs</div></div></a></sprocket-tooltip><template x-for="node in shownNodes"><sprocket-tooltip x-bind:content="node.display_name" class="block isolate"><a x-bind:href="node.href" x-show="showSelfCache[node.key]" x-on:click="if (node.href === null) toggleChildren(node.key)" x-bind:aria-label="node.display_name" class="left-sidebar__row" x-bind:class="`${node.current ? 'is-scrolled-to left-sidebar__row--active' : (node.href === null) ? showChildrenCache[node.key] ? 'left-sidebar__row-folder left-sidebar__row-folder--open' : 'left-sidebar__row-folder left-sidebar__row-folder--closed' : 'left-sidebar__row-page'} ${node.ancestor ? 'left-sidebar__content-item-container--ancestor' : ''}`"><template x-for="i in Array.from({ length: node.nest_level })"><div class="left-sidebar__indent -z-1"></div></template><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative left-sidebar__icon shrink-0"><img x-bind:src="node.icon || dirOpen" class="left-sidebar__icon" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"></div><div class="crop-ellipsis" x-text="node.display_name"></div></div></a></sprocket-tooltip></template><template x-for="node in searchedNodes"><li class="left-sidebar__search-result-item"><p class="text-xs text-slate-500 crop-ellipsis" x-text="node.parent"></p><div class="left-sidebar__search-result-item-container"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Node icon"><sprocket-tooltip class="crop-ellipsis" x-bind:content="node.display_name"><a x-bind:href="node.href" x-text="node.display_name"></a></sprocket-tooltip></div></li></template><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex place-content-center"><img src="../../assets/search.svg" class="size-8" alt="Search icon"></li><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex gap-1 place-content-center text-center break-words whitespace-normal text-sm text-slate-500"><span x-text="'No results found for'"></span><span x-text="`&quot;${search}&quot;`" class="text-slate-50"></span></li></ul><ul x-show="showWorkflows &amp;&amp; search === ''" class="left-sidebar__content"><li class=""><div class="left-sidebar__row"><img src="../../assets/category-selected.svg" class="left-sidebar__icon" alt="Category icon"><p class="text-slate-50">Other</p></div><ul class=""><a href="validate_flag_filter-workflow.html" x-data="{
+            }" x-cloak x-init="$nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__container"><div class="sticky px-4"><a href="../../index.html"><img src="../../assets/logo.svg" class="w-[120px] flex-none mb-8 block light:hidden" alt="Logo"><img src="../../assets/logo.light.svg" class="w-[120px] flex-none mb-8 hidden light:block" alt="Logo"></a><div class="relative w-full h-10"><input id="searchbox" x-model.debounce="search" type="text" placeholder="Search..." class="left-sidebar__searchbox"><img src="../../assets/search.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none block light:hidden" alt="Search icon"><img src="../../assets/search.light.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none hidden light:block" alt="Search icon"><img src="../../assets/x-mark.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer block light:hidden" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"><img src="../../assets/x-mark.light.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer hidden light:block" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"></div><div class="left-sidebar__tabs-container mt-4"><button x-on:click="showWorkflows = true; search = ''; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="! showWorkflows ? 'opacity-40 light:opacity-60 hover:opacity-80' : ''"><img src="../../assets/list-bullet-selected.svg" class="left-sidebar__icon block light:hidden" alt="List icon"><img src="../../assets/list-bullet-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="List icon"><p>Workflows</p></button><button x-on:click="showWorkflows = false; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="showWorkflows ? 'opacity-50 light:opacity-60 hover:opacity-80' : ''"><img src="../../assets/folder-selected.svg" class="left-sidebar__icon block light:hidden" alt="List icon"><img src="../../assets/folder-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="List icon"><p>Full Directory</p></button></div></div><div x-cloak class="left-sidebar__content-container pt-4"><ul x-show="! showWorkflows || search != ''" class="left-sidebar__content"><sprocket-tooltip content="docs" class="block"><a href="../../index.html" x-show="search === ''" aria-label="docs" class="left-sidebar__row hover:bg-slate-700"><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative shrink-0"><img src="../../assets/dir-open.svg" class="left-sidebar__icon block light:hidden" alt="Directory icon"><img src="../../assets/dir-open.light.svg" class="left-sidebar__icon hidden light:block" alt="Directory icon"></div><div class="text-slate-50">docs</div></div></a></sprocket-tooltip><template x-for="node in shownNodes"><sprocket-tooltip x-bind:content="node.display_name" class="block isolate"><a x-bind:href="node.href" x-show="showSelfCache[node.key]" x-on:click="if (node.href === null) toggleChildren(node.key)" x-bind:aria-label="node.display_name" class="left-sidebar__row" x-bind:class="`${node.current ? 'is-scrolled-to left-sidebar__row--active' : (node.href === null) ? showChildrenCache[node.key] ? 'left-sidebar__row-folder left-sidebar__row-folder--open' : 'left-sidebar__row-folder left-sidebar__row-folder--closed' : 'left-sidebar__row-page'} ${node.ancestor ? 'left-sidebar__content-item-container--ancestor' : ''}`"><template x-for="i in Array.from({ length: node.nest_level })"><div class="left-sidebar__indent -z-1"></div></template><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative left-sidebar__icon shrink-0"><img x-bind:src="node.icon || dirOpen" class="left-sidebar__icon block light:hidden" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"><img x-bind:src="(node.icon || dirOpen).replace('.svg', '.light.svg')" class="left-sidebar__icon hidden light:block" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"></div><div class="crop-ellipsis" x-text="node.display_name"></div></div></a></sprocket-tooltip></template><template x-for="node in searchedNodes"><li class="left-sidebar__search-result-item"><p class="text-xs text-slate-500 crop-ellipsis" x-text="node.parent"></p><div class="left-sidebar__search-result-item-container"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Node icon"><sprocket-tooltip class="crop-ellipsis" x-bind:content="node.display_name"><a x-bind:href="node.href" x-text="node.display_name"></a></sprocket-tooltip></div></li></template><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex place-content-center"><img src="../../assets/search.svg" class="size-8 block light:hidden" alt="Search icon"><img src="../../assets/search.light.svg" class="size-8 hidden light:block" alt="Search icon"></li><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex gap-1 place-content-center text-center break-words whitespace-normal text-sm text-slate-500"><span x-text="'No results found for'"></span><span x-text="`&quot;${search}&quot;`" class="text-slate-50"></span></li></ul><ul x-show="showWorkflows &amp;&amp; search === ''" class="left-sidebar__content"><li class=""><div class="left-sidebar__row"><img src="../../assets/category-selected.svg" class="left-sidebar__icon block light:hidden" alt="Category icon"><img src="../../assets/category-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="Category icon"><p class="text-slate-50">Other</p></div><ul class=""><a href="validate_flag_filter-workflow.html" x-data="{
                                     node: {
                                         current: false,
                                         icon: '../../assets/workflow-unselected.svg',
                                     }
-                                }" class="left-sidebar__row" x-bind:class="node.current ? 'bg-slate-700/50 is-scrolled-to' : 'hover:bg-slate-800'"><div class="left-sidebar__indent -1"></div><div class="left-sidebar__content-item-container crop-ellipsis"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Workflow icon"><sprocket-tooltip content="validate_flag_filter" class="crop-ellipsis" x-bind:class="node.current ? 'text-slate-50' : 'group-hover:text-slate-50'"><span>validate_flag_filter</span></sprocket-tooltip></div></a></ul></li></ul></div></div></div><div class="layout__main-center"><div class="layout__main-center-content"><div><div class="flex gap-1 mb-3" x-show="showCenterButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../../assets/sidebar-icon-hide.svg" alt=""></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../../assets/sidebar-icon-default.svg" alt=""></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../../assets/sidebar-icon-expand.svg" alt=""></img></button></div><div class="layout__breadcrumbs"><div class="layout__breadcrumb-container"><a class="layout__breadcrumb-clickable" href="../../index.html">docs</a><span> / </span><span class="layout__breadcrumb-inactive">data_structures</span><span> / </span><span class="layout__breadcrumb-inactive">flag_filter</span></div></div></div><div class="main__container"><h1 id="title" class="main__title">flag_filter</h1><div class="main__badge-container"><div class="main__badge"><span class="main__badge-text">WDL Version</span><div class="main__badge-inner"><span class="main__badge-inner-text">1.1</span></div></div></div><div id="preamble" class="main__section"><div class="markdown-body"><h1>FlagFilter</h1>
+                                }" class="left-sidebar__row" x-bind:class="node.current ? 'bg-slate-700/50 is-scrolled-to' : 'hover:bg-slate-800'"><div class="left-sidebar__indent -1"></div><div class="left-sidebar__content-item-container crop-ellipsis"><img x-bind:src="node.icon?.replace('.svg', '.light.svg')" class="left-sidebar__icon" alt="Workflow icon"><sprocket-tooltip content="validate_flag_filter" class="crop-ellipsis" x-bind:class="node.current ? 'text-slate-50' : 'group-hover:text-slate-50'"><span>validate_flag_filter</span></sprocket-tooltip></div></a></ul></li></ul></div></div></div><div class="layout__main-center"><div class="layout__main-center-content"><div><div class="flex gap-1 mb-3" x-show="showCenterButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../../assets/sidebar-icon-hide.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-hide.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../../assets/sidebar-icon-default.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-default.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../../assets/sidebar-icon-expand.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-expand.light.svg" alt="" class="hidden light:block"></img></button></div><div class="flex flex-row-reverse items-start justify-between"><button x-on:click="
+                                document.documentElement.classList.toggle('light')
+                                localStorage.setItem('theme', document.documentElement.classList.contains('light') ? 'light' : 'dark')
+                                " class="border border-slate-700 rounded-md h-8 flex items-center justify-center text-slate-300 text-lg w-8 cursor-pointer hover:border-slate-500">☀︎</button><div class="layout__breadcrumbs"><div class="layout__breadcrumb-container"><a class="layout__breadcrumb-clickable" href="../../index.html">docs</a><span> / </span><span class="layout__breadcrumb-inactive">data_structures</span><span> / </span><span class="layout__breadcrumb-inactive">flag_filter</span></div></div></div></div><div class="main__container"><h1 id="title" class="main__title">flag_filter</h1><div class="main__badge-container"><div class="main__badge"><span class="main__badge-text">WDL Version</span><div class="main__badge-inner"><span class="main__badge-inner-text">1.1</span></div></div></div><div id="preamble" class="main__section"><div class="markdown-body"><h1>FlagFilter</h1>
 <p>A struct to represent the filtering flags used in various <code>samtools</code> commands.
 The order of precedence is <code>include_if_all</code>, <code>exclude_if_any</code>, <code>include_if_any</code>,
 and <code>exclude_if_all</code>.
@@ -123,4 +126,4 @@ <h3>Explanation</h3>
 In short, those are all flags corresponding to the quality of the read
 and them being <code>true</code> may indicate that the read is of low quality and
 should be excluded.</p>
-</div></div><div class="main__section"><h2 id="toc" class="main__section-header">Table of Contents</h2><div class="main__grid-container"><div class="main__grid-toc-container"><div class="main__grid-header-cell">Page</div><div class="main__grid-header-cell">Type</div><div class="main__grid-header-cell">Description</div><div class="main__grid-header-separator"></div><div class="main__grid-row" x-data="{ description_expanded: false }"><div class="main__grid-cell"><a class="text-pink-400 hover:text-pink-300" href="FlagFilter-struct.html">FlagFilter</a></div><div class="main__grid-cell"><code>struct</code></div><div class="main__grid-cell">N/A</div><div x-show="description_expanded" class="main__grid-full-width-cell">ERROR</div></div><div class="main__grid-row-separator"></div><div class="main__grid-row" x-data="{ description_expanded: false }"><div class="main__grid-cell"><a class="text-violet-400 hover:text-violet-300" href="validate_string_is_12bit_oct_dec_or_hex-task.html">validate_string_is_12bit_oct_dec_or_hex</a></div><div class="main__grid-cell"><code>task</code></div><div class="main__grid-cell">Validates that a string is a octal, decimal, or hexadecimal number and less than 2^12.</div><div x-show="description_expanded" class="main__grid-full-width-cell">Validates that a string is a octal, decimal, or hexadecimal number and less than 2^12.</div></div><div class="main__grid-row-separator"></div><div class="main__grid-row" x-data="{ description_expanded: false }"><div class="main__grid-cell"><a class="text-emerald-400 hover:text-emerald-300" href="validate_flag_filter-workflow.html">validate_flag_filter</a></div><div class="main__grid-cell"><code>workflow</code></div><div class="main__grid-cell">Validates a FlagFilter struct.</div><div x-show="description_expanded" class="main__grid-full-width-cell">Validates a FlagFilter struct.</div></div></div></div></div></div></div></div><div class="layout__sidebar-right"><div class="right-sidebar__container"><div class="right-sidebar__header">ON THIS PAGE</div><a href="#preamble" class="right-sidebar__section-header">Preamble</a><a href="#toc" class="right-sidebar__section-header">Table of Contents</a><div class="right-sidebar__back-to-top-container"><a href="#title" class="right-sidebar__back-to-top"><span class="right-sidebar__back-to-top-icon">↑</span><span class="right-sidebar__back-to-top-text">Back to top</span></a></div></div></div></div></body></html>
\ No newline at end of file
+</div></div><div class="main__section"><h2 id="toc" class="main__section-header">Table of Contents</h2><div class="main__grid-container"><div class="main__grid-toc-container"><div class="main__grid-header-cell">Page</div><div class="main__grid-header-cell">Type</div><div class="main__grid-header-cell">Description</div><div class="main__grid-header-separator"></div><div class="main__grid-row" x-data="{ description_expanded: false }"><div class="main__grid-cell"><a class="text-brand-pink-400 hover:text-pink-200" href="FlagFilter-struct.html">FlagFilter</a></div><div class="main__grid-cell"><code>struct</code></div><div class="main__grid-cell">N/A</div><div x-show="description_expanded" class="main__grid-full-width-cell">ERROR</div></div><div class="main__grid-row-separator"></div><div class="main__grid-row" x-data="{ description_expanded: false }"><div class="main__grid-cell"><a class="text-brand-violet-400 hover:text-violet-200" href="validate_string_is_12bit_oct_dec_or_hex-task.html">validate_string_is_12bit_oct_dec_or_hex</a></div><div class="main__grid-cell"><code>task</code></div><div class="main__grid-cell">Validates that a string is a octal, decimal, or hexadecimal number and less than 2^12.</div><div x-show="description_expanded" class="main__grid-full-width-cell">Validates that a string is a octal, decimal, or hexadecimal number and less than 2^12.</div></div><div class="main__grid-row-separator"></div><div class="main__grid-row" x-data="{ description_expanded: false }"><div class="main__grid-cell"><a class="text-brand-emerald-400 hover:text-brand-emerald-200" href="validate_flag_filter-workflow.html">validate_flag_filter</a></div><div class="main__grid-cell"><code>workflow</code></div><div class="main__grid-cell">Validates a FlagFilter struct.</div><div x-show="description_expanded" class="main__grid-full-width-cell">Validates a FlagFilter struct.</div></div></div></div></div></div></div></div><div class="layout__sidebar-right"><div class="right-sidebar__container"><div class="right-sidebar__header">ON THIS PAGE</div><a href="#preamble" class="right-sidebar__section-header">Preamble</a><a href="#toc" class="right-sidebar__section-header">Table of Contents</a><div class="right-sidebar__back-to-top-container"><a href="#title" class="right-sidebar__back-to-top"><span class="right-sidebar__back-to-top-icon">↑</span><span class="right-sidebar__back-to-top-text">Back to top</span></a></div></div></div></div></body></html>
\ No newline at end of file
diff --git a/crates/wdl-doc/tests/output_docs/data_structures/flag_filter/validate_flag_filter-workflow.html b/crates/wdl-doc/tests/output_docs/data_structures/flag_filter/validate_flag_filter-workflow.html
index 33fc6a75..194b0433 100644
--- a/crates/wdl-doc/tests/output_docs/data_structures/flag_filter/validate_flag_filter-workflow.html
+++ b/crates/wdl-doc/tests/output_docs/data_structures/flag_filter/validate_flag_filter-workflow.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html class="dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>validate_flag_filter</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&amp;display=swap" rel="stylesheet"><script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script defer src="../../index.js"></script><link rel="stylesheet" type="text/css" href="../../style.css"></head><body class="body--base"><div class="layout__container layout__container--alt-layout" x-transition x-data="{
+<!DOCTYPE html><html x-data="{ DEFAULT_THEME: '' }" x-bind:class="(localStorage.getItem('theme') ?? DEFAULT_THEME) === 'light' ? 'light' : ''" x-cloak><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>validate_flag_filter</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&amp;display=swap" rel="stylesheet"><script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script defer src="../../index.js"></script><link rel="stylesheet" type="text/css" href="../../style.css"></head><body class="body--base"><div class="layout__container layout__container--alt-layout" x-transition x-data="{
                 sidebarState: $persist(window.innerWidth &lt; 768 ? 'hidden' : 'normal').using(sessionStorage),
                 get showSidebarButtons() { return this.sidebarState !== 'hidden'; },
                 get showCenterButtons() { return this.sidebarState === 'hidden'; },
@@ -16,7 +16,7 @@
                 collapseSidebar() { this.sidebarState = 'hidden'; },
                 restoreSidebar() { this.sidebarState = 'normal'; },
                 expandSidebar() { this.sidebarState = 'xl'; }
-            }" x-bind:class="containerClasses"><div class="layout__sidebar-left" x-transition><div class="absolute top-5 right-2 flex gap-1 z-10" x-cloak x-show="showSidebarButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../../assets/sidebar-icon-hide.svg" alt=""></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../../assets/sidebar-icon-default.svg" alt=""></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../../assets/sidebar-icon-expand.svg" alt=""></img></button></div><div x-data="{
+            }" x-bind:class="containerClasses"><div class="layout__sidebar-left" x-transition><div class="absolute top-5 right-2 flex gap-1 z-10" x-cloak x-show="showSidebarButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../../assets/sidebar-icon-hide.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-hide.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../../assets/sidebar-icon-default.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-default.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../../assets/sidebar-icon-expand.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-expand.light.svg" alt="" class="hidden light:block"></img></button></div><div x-data="{
                 showWorkflows: $persist(false).using(sessionStorage),
                 search: $persist('').using(sessionStorage),
                 dirOpen: '../../assets/chevron-up.svg',
@@ -68,9 +68,12 @@
                         this.showChildrenCache[n.key] = true;
                     });
                 }
-            }" x-cloak x-init="$nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__container"><div class="sticky px-4"><a href="../../index.html"><img src="../../assets/logo.svg" class="w-[120px] flex-none mb-8" alt="Logo"></a><div class="relative w-full h-10"><input id="searchbox" x-model.debounce="search" type="text" placeholder="Search..." class="left-sidebar__searchbox"><img src="../../assets/search.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none" alt="Search icon"><img src="../../assets/x-mark.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"></div><div class="left-sidebar__tabs-container mt-4"><button x-on:click="showWorkflows = true; search = ''; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="! showWorkflows ? 'opacity-40 hover:opacity-80' : ''"><img src="../../assets/list-bullet-selected.svg" class="left-sidebar__icon" alt="List icon"><p>Workflows</p></button><button x-on:click="showWorkflows = false; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="showWorkflows ? 'opacity-40 hover:opacity-80' : ''"><img src="../../assets/folder-selected.svg" class="left-sidebar__icon" alt="List icon"><p>Full Directory</p></button></div></div><div x-cloak class="left-sidebar__content-container pt-4"><ul x-show="! showWorkflows || search != ''" class="left-sidebar__content"><sprocket-tooltip content="docs" class="block"><a href="../../index.html" x-show="search === ''" aria-label="docs" class="left-sidebar__row hover:bg-slate-700"><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative shrink-0"><img src="../../assets/dir-open.svg" class="left-sidebar__icon" alt="Directory icon"></div><div class="text-slate-50">docs</div></div></a></sprocket-tooltip><template x-for="node in shownNodes"><sprocket-tooltip x-bind:content="node.display_name" class="block isolate"><a x-bind:href="node.href" x-show="showSelfCache[node.key]" x-on:click="if (node.href === null) toggleChildren(node.key)" x-bind:aria-label="node.display_name" class="left-sidebar__row" x-bind:class="`${node.current ? 'is-scrolled-to left-sidebar__row--active' : (node.href === null) ? showChildrenCache[node.key] ? 'left-sidebar__row-folder left-sidebar__row-folder--open' : 'left-sidebar__row-folder left-sidebar__row-folder--closed' : 'left-sidebar__row-page'} ${node.ancestor ? 'left-sidebar__content-item-container--ancestor' : ''}`"><template x-for="i in Array.from({ length: node.nest_level })"><div class="left-sidebar__indent -z-1"></div></template><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative left-sidebar__icon shrink-0"><img x-bind:src="node.icon || dirOpen" class="left-sidebar__icon" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"></div><div class="crop-ellipsis" x-text="node.display_name"></div></div></a></sprocket-tooltip></template><template x-for="node in searchedNodes"><li class="left-sidebar__search-result-item"><p class="text-xs text-slate-500 crop-ellipsis" x-text="node.parent"></p><div class="left-sidebar__search-result-item-container"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Node icon"><sprocket-tooltip class="crop-ellipsis" x-bind:content="node.display_name"><a x-bind:href="node.href" x-text="node.display_name"></a></sprocket-tooltip></div></li></template><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex place-content-center"><img src="../../assets/search.svg" class="size-8" alt="Search icon"></li><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex gap-1 place-content-center text-center break-words whitespace-normal text-sm text-slate-500"><span x-text="'No results found for'"></span><span x-text="`&quot;${search}&quot;`" class="text-slate-50"></span></li></ul><ul x-show="showWorkflows &amp;&amp; search === ''" class="left-sidebar__content"><li class=""><div class="left-sidebar__row"><img src="../../assets/category-selected.svg" class="left-sidebar__icon" alt="Category icon"><p class="text-slate-50">Other</p></div><ul class=""><a href="validate_flag_filter-workflow.html" x-data="{
+            }" x-cloak x-init="$nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__container"><div class="sticky px-4"><a href="../../index.html"><img src="../../assets/logo.svg" class="w-[120px] flex-none mb-8 block light:hidden" alt="Logo"><img src="../../assets/logo.light.svg" class="w-[120px] flex-none mb-8 hidden light:block" alt="Logo"></a><div class="relative w-full h-10"><input id="searchbox" x-model.debounce="search" type="text" placeholder="Search..." class="left-sidebar__searchbox"><img src="../../assets/search.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none block light:hidden" alt="Search icon"><img src="../../assets/search.light.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none hidden light:block" alt="Search icon"><img src="../../assets/x-mark.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer block light:hidden" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"><img src="../../assets/x-mark.light.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer hidden light:block" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"></div><div class="left-sidebar__tabs-container mt-4"><button x-on:click="showWorkflows = true; search = ''; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="! showWorkflows ? 'opacity-40 light:opacity-60 hover:opacity-80' : ''"><img src="../../assets/list-bullet-selected.svg" class="left-sidebar__icon block light:hidden" alt="List icon"><img src="../../assets/list-bullet-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="List icon"><p>Workflows</p></button><button x-on:click="showWorkflows = false; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="showWorkflows ? 'opacity-50 light:opacity-60 hover:opacity-80' : ''"><img src="../../assets/folder-selected.svg" class="left-sidebar__icon block light:hidden" alt="List icon"><img src="../../assets/folder-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="List icon"><p>Full Directory</p></button></div></div><div x-cloak class="left-sidebar__content-container pt-4"><ul x-show="! showWorkflows || search != ''" class="left-sidebar__content"><sprocket-tooltip content="docs" class="block"><a href="../../index.html" x-show="search === ''" aria-label="docs" class="left-sidebar__row hover:bg-slate-700"><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative shrink-0"><img src="../../assets/dir-open.svg" class="left-sidebar__icon block light:hidden" alt="Directory icon"><img src="../../assets/dir-open.light.svg" class="left-sidebar__icon hidden light:block" alt="Directory icon"></div><div class="text-slate-50">docs</div></div></a></sprocket-tooltip><template x-for="node in shownNodes"><sprocket-tooltip x-bind:content="node.display_name" class="block isolate"><a x-bind:href="node.href" x-show="showSelfCache[node.key]" x-on:click="if (node.href === null) toggleChildren(node.key)" x-bind:aria-label="node.display_name" class="left-sidebar__row" x-bind:class="`${node.current ? 'is-scrolled-to left-sidebar__row--active' : (node.href === null) ? showChildrenCache[node.key] ? 'left-sidebar__row-folder left-sidebar__row-folder--open' : 'left-sidebar__row-folder left-sidebar__row-folder--closed' : 'left-sidebar__row-page'} ${node.ancestor ? 'left-sidebar__content-item-container--ancestor' : ''}`"><template x-for="i in Array.from({ length: node.nest_level })"><div class="left-sidebar__indent -z-1"></div></template><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative left-sidebar__icon shrink-0"><img x-bind:src="node.icon || dirOpen" class="left-sidebar__icon block light:hidden" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"><img x-bind:src="(node.icon || dirOpen).replace('.svg', '.light.svg')" class="left-sidebar__icon hidden light:block" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"></div><div class="crop-ellipsis" x-text="node.display_name"></div></div></a></sprocket-tooltip></template><template x-for="node in searchedNodes"><li class="left-sidebar__search-result-item"><p class="text-xs text-slate-500 crop-ellipsis" x-text="node.parent"></p><div class="left-sidebar__search-result-item-container"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Node icon"><sprocket-tooltip class="crop-ellipsis" x-bind:content="node.display_name"><a x-bind:href="node.href" x-text="node.display_name"></a></sprocket-tooltip></div></li></template><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex place-content-center"><img src="../../assets/search.svg" class="size-8 block light:hidden" alt="Search icon"><img src="../../assets/search.light.svg" class="size-8 hidden light:block" alt="Search icon"></li><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex gap-1 place-content-center text-center break-words whitespace-normal text-sm text-slate-500"><span x-text="'No results found for'"></span><span x-text="`&quot;${search}&quot;`" class="text-slate-50"></span></li></ul><ul x-show="showWorkflows &amp;&amp; search === ''" class="left-sidebar__content"><li class=""><div class="left-sidebar__row"><img src="../../assets/category-selected.svg" class="left-sidebar__icon block light:hidden" alt="Category icon"><img src="../../assets/category-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="Category icon"><p class="text-slate-50">Other</p></div><ul class=""><a href="validate_flag_filter-workflow.html" x-data="{
                                     node: {
                                         current: true,
                                         icon: '../../assets/workflow-selected.svg',
                                     }
-                                }" class="left-sidebar__row" x-bind:class="node.current ? 'bg-slate-700/50 is-scrolled-to' : 'hover:bg-slate-800'"><div class="left-sidebar__indent -1"></div><div class="left-sidebar__content-item-container crop-ellipsis"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Workflow icon"><sprocket-tooltip content="validate_flag_filter" class="crop-ellipsis" x-bind:class="node.current ? 'text-slate-50' : 'group-hover:text-slate-50'"><span>validate_flag_filter</span></sprocket-tooltip></div></a></ul></li></ul></div></div></div><div class="layout__main-center"><div class="layout__main-center-content"><div><div class="flex gap-1 mb-3" x-show="showCenterButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../../assets/sidebar-icon-hide.svg" alt=""></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../../assets/sidebar-icon-default.svg" alt=""></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../../assets/sidebar-icon-expand.svg" alt=""></img></button></div><div class="layout__breadcrumbs"><div class="layout__breadcrumb-container"><a class="layout__breadcrumb-clickable" href="../../index.html">docs</a><span> / </span><span class="layout__breadcrumb-inactive">data_structures</span><span> / </span><a href="index.html" class="layout__breadcrumb-clickable">flag_filter</a><span> / </span><span class="layout__breadcrumb-inactive">validate_flag_filter</span></div></div></div><div class="main__container"><span class="text-emerald-400">Workflow</span><h1 id="title" class="main__title">validate_flag_filter</h1><div class="markdown-body mb-4">Validates a FlagFilter struct.</div><div class="main__badge-container"><div class="main__badge"><span class="main__badge-text">WDL Version</span><div class="main__badge-inner"><span class="main__badge-inner-text">1.1</span></div></div><div class="main__badge main__badge--disabled"><span class="main__badge-text">Nested Inputs Not Allowed</span></div></div><div x-data="{ unix: true }" class="main__run-with-container"><div class="main__run-with-label"><span class="main__run-with-label-text">RUN WITH</span><button x-on:click="unix = !unix" class="main__run-with-toggle"><div x-bind:class="unix ? 'main__run-with-toggle-label--active' : 'main__run-with-toggle-label--inactive'">Unix</div><div x-bind:class="!unix ? 'main__run-with-toggle-label--active' : 'main__run-with-toggle-label--inactive'">Windows</div></button></div><div class="main__run-with-content"><p class="main__run-with-content-text">sprocket run --entrypoint validate_flag_filter <span x-show="unix">data_structures/flag_filter.wdl</span><span x-show="!unix">data_structures\flag_filter.wdl</span> [INPUTS]...</p></div></div><div class="main__section"></div><div class="main__section"><h2 id="inputs" class="main__section-header">Inputs</h2><h3 id="required-inputs" class="main__section-subheader">Required Inputs</h3><div class="main__grid-container"><div class="main__grid-req-inputs-container"><div class="main__grid-header-cell">Name</div><div class="main__grid-header-cell">Type</div><div class="main__grid-header-cell">Description</div><div class="main__grid-header-separator"></div><div class="main__grid-row" x-data="{ description_expanded: false }"><div class="main__grid-cell"><code>flags</code></div><div class="main__grid-cell"><code>FlagFilter</code></div><div class="main__grid-cell">FlagFilter struct to validate</div><div x-show="description_expanded" class="main__grid-full-width-cell">FlagFilter struct to validate</div></div></div></div></div><div class="main__section"><h2 id="outputs" class="main__section-header">Outputs</h2><div class="main__grid-container"><div class="main__grid-non-req-param-container"><div class="main__grid-header-cell">Name</div><div class="main__grid-header-cell">Type</div><div class="main__grid-header-cell">Expression</div><div class="main__grid-header-cell">Description</div><div class="main__grid-header-separator"></div><div class="main__grid-row" x-data="{ description_expanded: false, expr_expanded: false }"><div class="main__grid-cell"><code>check</code></div><div class="main__grid-cell"><code>String</code></div><div class="main__grid-cell"><code>&quot;passed&quot;</code></div><div class="main__grid-cell">Dummy output to enable caching.</div><div x-show="description_expanded" class="main__grid-full-width-cell">Dummy output to enable caching.</div><div x-show="expr_expanded" class="main__grid-full-width-cell"><sprocket-code language="wdl">&quot;passed&quot;</sprocket-code></div></div></div></div></div></div></div></div><div class="layout__sidebar-right"><div class="right-sidebar__container"><div class="right-sidebar__header">ON THIS PAGE</div><a href="#inputs" class="right-sidebar__section-header">Inputs</a><div class="right-sidebar__section-items"><a href="#required-inputs" class="right-sidebar__section-item">Required Inputs</a></div><a href="#outputs" class="right-sidebar__section-header">Outputs</a><div class="right-sidebar__back-to-top-container"><a href="#title" class="right-sidebar__back-to-top"><span class="right-sidebar__back-to-top-icon">↑</span><span class="right-sidebar__back-to-top-text">Back to top</span></a></div></div></div></div></body></html>
\ No newline at end of file
+                                }" class="left-sidebar__row" x-bind:class="node.current ? 'bg-slate-700/50 is-scrolled-to' : 'hover:bg-slate-800'"><div class="left-sidebar__indent -1"></div><div class="left-sidebar__content-item-container crop-ellipsis"><img x-bind:src="node.icon?.replace('.svg', '.light.svg')" class="left-sidebar__icon" alt="Workflow icon"><sprocket-tooltip content="validate_flag_filter" class="crop-ellipsis" x-bind:class="node.current ? 'text-slate-50' : 'group-hover:text-slate-50'"><span>validate_flag_filter</span></sprocket-tooltip></div></a></ul></li></ul></div></div></div><div class="layout__main-center"><div class="layout__main-center-content"><div><div class="flex gap-1 mb-3" x-show="showCenterButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../../assets/sidebar-icon-hide.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-hide.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../../assets/sidebar-icon-default.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-default.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../../assets/sidebar-icon-expand.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-expand.light.svg" alt="" class="hidden light:block"></img></button></div><div class="flex flex-row-reverse items-start justify-between"><button x-on:click="
+                                document.documentElement.classList.toggle('light')
+                                localStorage.setItem('theme', document.documentElement.classList.contains('light') ? 'light' : 'dark')
+                                " class="border border-slate-700 rounded-md h-8 flex items-center justify-center text-slate-300 text-lg w-8 cursor-pointer hover:border-slate-500">☀︎</button><div class="layout__breadcrumbs"><div class="layout__breadcrumb-container"><a class="layout__breadcrumb-clickable" href="../../index.html">docs</a><span> / </span><span class="layout__breadcrumb-inactive">data_structures</span><span> / </span><a href="index.html" class="layout__breadcrumb-clickable">flag_filter</a><span> / </span><span class="layout__breadcrumb-inactive">validate_flag_filter</span></div></div></div></div><div class="main__container"><span class="text-brand-emerald-400">Workflow</span><h1 id="title" class="main__title">validate_flag_filter</h1><div class="markdown-body mb-4">Validates a FlagFilter struct.</div><div class="main__badge-container"><div class="main__badge"><span class="main__badge-text">WDL Version</span><div class="main__badge-inner"><span class="main__badge-inner-text">1.1</span></div></div><div class="main__badge main__badge--disabled"><span class="main__badge-text">Nested Inputs Not Allowed</span></div></div><div x-data="{ unix: true }" class="main__run-with-container"><div class="main__run-with-label"><span class="main__run-with-label-text">RUN WITH</span><button x-on:click="unix = !unix" class="main__run-with-toggle"><div x-bind:class="unix ? 'main__run-with-toggle-label--active' : 'main__run-with-toggle-label--inactive'">Unix</div><div x-bind:class="!unix ? 'main__run-with-toggle-label--active' : 'main__run-with-toggle-label--inactive'">Windows</div></button></div><div class="main__run-with-content"><p class="main__run-with-content-text">sprocket run --entrypoint validate_flag_filter <span x-show="unix">data_structures/flag_filter.wdl</span><span x-show="!unix">data_structures\flag_filter.wdl</span> [INPUTS]...</p></div></div><div class="main__section"></div><div class="main__section"><h2 id="inputs" class="main__section-header">Inputs</h2><h3 id="required-inputs" class="main__section-subheader">Required Inputs</h3><div class="main__grid-container"><div class="main__grid-req-inputs-container"><div class="main__grid-header-cell">Name</div><div class="main__grid-header-cell">Type</div><div class="main__grid-header-cell">Description</div><div class="main__grid-header-separator"></div><div class="main__grid-row" x-data="{ description_expanded: false }"><div class="main__grid-cell"><code>flags</code></div><div class="main__grid-cell"><code>FlagFilter</code></div><div class="main__grid-cell">FlagFilter struct to validate</div><div x-show="description_expanded" class="main__grid-full-width-cell">FlagFilter struct to validate</div></div></div></div></div><div class="main__section"><h2 id="outputs" class="main__section-header">Outputs</h2><div class="main__grid-container"><div class="main__grid-non-req-param-container"><div class="main__grid-header-cell">Name</div><div class="main__grid-header-cell">Type</div><div class="main__grid-header-cell">Expression</div><div class="main__grid-header-cell">Description</div><div class="main__grid-header-separator"></div><div class="main__grid-row" x-data="{ description_expanded: false, expr_expanded: false }"><div class="main__grid-cell"><code>check</code></div><div class="main__grid-cell"><code>String</code></div><div class="main__grid-cell"><code>&quot;passed&quot;</code></div><div class="main__grid-cell">Dummy output to enable caching.</div><div x-show="description_expanded" class="main__grid-full-width-cell">Dummy output to enable caching.</div><div x-show="expr_expanded" class="main__grid-full-width-cell"><sprocket-code language="wdl">&quot;passed&quot;</sprocket-code></div></div></div></div></div></div></div></div><div class="layout__sidebar-right"><div class="right-sidebar__container"><div class="right-sidebar__header">ON THIS PAGE</div><a href="#inputs" class="right-sidebar__section-header">Inputs</a><div class="right-sidebar__section-items"><a href="#required-inputs" class="right-sidebar__section-item">Required Inputs</a></div><a href="#outputs" class="right-sidebar__section-header">Outputs</a><div class="right-sidebar__back-to-top-container"><a href="#title" class="right-sidebar__back-to-top"><span class="right-sidebar__back-to-top-icon">↑</span><span class="right-sidebar__back-to-top-text">Back to top</span></a></div></div></div></div></body></html>
\ No newline at end of file
diff --git a/crates/wdl-doc/tests/output_docs/data_structures/flag_filter/validate_string_is_12bit_oct_dec_or_hex-task.html b/crates/wdl-doc/tests/output_docs/data_structures/flag_filter/validate_string_is_12bit_oct_dec_or_hex-task.html
index 813bb499..327771c7 100644
--- a/crates/wdl-doc/tests/output_docs/data_structures/flag_filter/validate_string_is_12bit_oct_dec_or_hex-task.html
+++ b/crates/wdl-doc/tests/output_docs/data_structures/flag_filter/validate_string_is_12bit_oct_dec_or_hex-task.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html class="dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>validate_string_is_12bit_oct_dec_or_hex</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&amp;display=swap" rel="stylesheet"><script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script defer src="../../index.js"></script><link rel="stylesheet" type="text/css" href="../../style.css"></head><body class="body--base"><div class="layout__container layout__container--alt-layout" x-transition x-data="{
+<!DOCTYPE html><html x-data="{ DEFAULT_THEME: '' }" x-bind:class="(localStorage.getItem('theme') ?? DEFAULT_THEME) === 'light' ? 'light' : ''" x-cloak><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>validate_string_is_12bit_oct_dec_or_hex</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&amp;display=swap" rel="stylesheet"><script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script defer src="../../index.js"></script><link rel="stylesheet" type="text/css" href="../../style.css"></head><body class="body--base"><div class="layout__container layout__container--alt-layout" x-transition x-data="{
                 sidebarState: $persist(window.innerWidth &lt; 768 ? 'hidden' : 'normal').using(sessionStorage),
                 get showSidebarButtons() { return this.sidebarState !== 'hidden'; },
                 get showCenterButtons() { return this.sidebarState === 'hidden'; },
@@ -16,7 +16,7 @@
                 collapseSidebar() { this.sidebarState = 'hidden'; },
                 restoreSidebar() { this.sidebarState = 'normal'; },
                 expandSidebar() { this.sidebarState = 'xl'; }
-            }" x-bind:class="containerClasses"><div class="layout__sidebar-left" x-transition><div class="absolute top-5 right-2 flex gap-1 z-10" x-cloak x-show="showSidebarButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../../assets/sidebar-icon-hide.svg" alt=""></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../../assets/sidebar-icon-default.svg" alt=""></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../../assets/sidebar-icon-expand.svg" alt=""></img></button></div><div x-data="{
+            }" x-bind:class="containerClasses"><div class="layout__sidebar-left" x-transition><div class="absolute top-5 right-2 flex gap-1 z-10" x-cloak x-show="showSidebarButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../../assets/sidebar-icon-hide.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-hide.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../../assets/sidebar-icon-default.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-default.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../../assets/sidebar-icon-expand.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-expand.light.svg" alt="" class="hidden light:block"></img></button></div><div x-data="{
                 showWorkflows: $persist(false).using(sessionStorage),
                 search: $persist('').using(sessionStorage),
                 dirOpen: '../../assets/chevron-up.svg',
@@ -68,12 +68,15 @@
                         this.showChildrenCache[n.key] = true;
                     });
                 }
-            }" x-cloak x-init="$nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__container"><div class="sticky px-4"><a href="../../index.html"><img src="../../assets/logo.svg" class="w-[120px] flex-none mb-8" alt="Logo"></a><div class="relative w-full h-10"><input id="searchbox" x-model.debounce="search" type="text" placeholder="Search..." class="left-sidebar__searchbox"><img src="../../assets/search.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none" alt="Search icon"><img src="../../assets/x-mark.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"></div><div class="left-sidebar__tabs-container mt-4"><button x-on:click="showWorkflows = true; search = ''; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="! showWorkflows ? 'opacity-40 hover:opacity-80' : ''"><img src="../../assets/list-bullet-selected.svg" class="left-sidebar__icon" alt="List icon"><p>Workflows</p></button><button x-on:click="showWorkflows = false; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="showWorkflows ? 'opacity-40 hover:opacity-80' : ''"><img src="../../assets/folder-selected.svg" class="left-sidebar__icon" alt="List icon"><p>Full Directory</p></button></div></div><div x-cloak class="left-sidebar__content-container pt-4"><ul x-show="! showWorkflows || search != ''" class="left-sidebar__content"><sprocket-tooltip content="docs" class="block"><a href="../../index.html" x-show="search === ''" aria-label="docs" class="left-sidebar__row hover:bg-slate-700"><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative shrink-0"><img src="../../assets/dir-open.svg" class="left-sidebar__icon" alt="Directory icon"></div><div class="text-slate-50">docs</div></div></a></sprocket-tooltip><template x-for="node in shownNodes"><sprocket-tooltip x-bind:content="node.display_name" class="block isolate"><a x-bind:href="node.href" x-show="showSelfCache[node.key]" x-on:click="if (node.href === null) toggleChildren(node.key)" x-bind:aria-label="node.display_name" class="left-sidebar__row" x-bind:class="`${node.current ? 'is-scrolled-to left-sidebar__row--active' : (node.href === null) ? showChildrenCache[node.key] ? 'left-sidebar__row-folder left-sidebar__row-folder--open' : 'left-sidebar__row-folder left-sidebar__row-folder--closed' : 'left-sidebar__row-page'} ${node.ancestor ? 'left-sidebar__content-item-container--ancestor' : ''}`"><template x-for="i in Array.from({ length: node.nest_level })"><div class="left-sidebar__indent -z-1"></div></template><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative left-sidebar__icon shrink-0"><img x-bind:src="node.icon || dirOpen" class="left-sidebar__icon" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"></div><div class="crop-ellipsis" x-text="node.display_name"></div></div></a></sprocket-tooltip></template><template x-for="node in searchedNodes"><li class="left-sidebar__search-result-item"><p class="text-xs text-slate-500 crop-ellipsis" x-text="node.parent"></p><div class="left-sidebar__search-result-item-container"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Node icon"><sprocket-tooltip class="crop-ellipsis" x-bind:content="node.display_name"><a x-bind:href="node.href" x-text="node.display_name"></a></sprocket-tooltip></div></li></template><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex place-content-center"><img src="../../assets/search.svg" class="size-8" alt="Search icon"></li><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex gap-1 place-content-center text-center break-words whitespace-normal text-sm text-slate-500"><span x-text="'No results found for'"></span><span x-text="`&quot;${search}&quot;`" class="text-slate-50"></span></li></ul><ul x-show="showWorkflows &amp;&amp; search === ''" class="left-sidebar__content"><li class=""><div class="left-sidebar__row"><img src="../../assets/category-selected.svg" class="left-sidebar__icon" alt="Category icon"><p class="text-slate-50">Other</p></div><ul class=""><a href="validate_flag_filter-workflow.html" x-data="{
+            }" x-cloak x-init="$nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__container"><div class="sticky px-4"><a href="../../index.html"><img src="../../assets/logo.svg" class="w-[120px] flex-none mb-8 block light:hidden" alt="Logo"><img src="../../assets/logo.light.svg" class="w-[120px] flex-none mb-8 hidden light:block" alt="Logo"></a><div class="relative w-full h-10"><input id="searchbox" x-model.debounce="search" type="text" placeholder="Search..." class="left-sidebar__searchbox"><img src="../../assets/search.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none block light:hidden" alt="Search icon"><img src="../../assets/search.light.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none hidden light:block" alt="Search icon"><img src="../../assets/x-mark.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer block light:hidden" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"><img src="../../assets/x-mark.light.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer hidden light:block" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"></div><div class="left-sidebar__tabs-container mt-4"><button x-on:click="showWorkflows = true; search = ''; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="! showWorkflows ? 'opacity-40 light:opacity-60 hover:opacity-80' : ''"><img src="../../assets/list-bullet-selected.svg" class="left-sidebar__icon block light:hidden" alt="List icon"><img src="../../assets/list-bullet-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="List icon"><p>Workflows</p></button><button x-on:click="showWorkflows = false; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="showWorkflows ? 'opacity-50 light:opacity-60 hover:opacity-80' : ''"><img src="../../assets/folder-selected.svg" class="left-sidebar__icon block light:hidden" alt="List icon"><img src="../../assets/folder-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="List icon"><p>Full Directory</p></button></div></div><div x-cloak class="left-sidebar__content-container pt-4"><ul x-show="! showWorkflows || search != ''" class="left-sidebar__content"><sprocket-tooltip content="docs" class="block"><a href="../../index.html" x-show="search === ''" aria-label="docs" class="left-sidebar__row hover:bg-slate-700"><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative shrink-0"><img src="../../assets/dir-open.svg" class="left-sidebar__icon block light:hidden" alt="Directory icon"><img src="../../assets/dir-open.light.svg" class="left-sidebar__icon hidden light:block" alt="Directory icon"></div><div class="text-slate-50">docs</div></div></a></sprocket-tooltip><template x-for="node in shownNodes"><sprocket-tooltip x-bind:content="node.display_name" class="block isolate"><a x-bind:href="node.href" x-show="showSelfCache[node.key]" x-on:click="if (node.href === null) toggleChildren(node.key)" x-bind:aria-label="node.display_name" class="left-sidebar__row" x-bind:class="`${node.current ? 'is-scrolled-to left-sidebar__row--active' : (node.href === null) ? showChildrenCache[node.key] ? 'left-sidebar__row-folder left-sidebar__row-folder--open' : 'left-sidebar__row-folder left-sidebar__row-folder--closed' : 'left-sidebar__row-page'} ${node.ancestor ? 'left-sidebar__content-item-container--ancestor' : ''}`"><template x-for="i in Array.from({ length: node.nest_level })"><div class="left-sidebar__indent -z-1"></div></template><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative left-sidebar__icon shrink-0"><img x-bind:src="node.icon || dirOpen" class="left-sidebar__icon block light:hidden" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"><img x-bind:src="(node.icon || dirOpen).replace('.svg', '.light.svg')" class="left-sidebar__icon hidden light:block" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"></div><div class="crop-ellipsis" x-text="node.display_name"></div></div></a></sprocket-tooltip></template><template x-for="node in searchedNodes"><li class="left-sidebar__search-result-item"><p class="text-xs text-slate-500 crop-ellipsis" x-text="node.parent"></p><div class="left-sidebar__search-result-item-container"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Node icon"><sprocket-tooltip class="crop-ellipsis" x-bind:content="node.display_name"><a x-bind:href="node.href" x-text="node.display_name"></a></sprocket-tooltip></div></li></template><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex place-content-center"><img src="../../assets/search.svg" class="size-8 block light:hidden" alt="Search icon"><img src="../../assets/search.light.svg" class="size-8 hidden light:block" alt="Search icon"></li><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex gap-1 place-content-center text-center break-words whitespace-normal text-sm text-slate-500"><span x-text="'No results found for'"></span><span x-text="`&quot;${search}&quot;`" class="text-slate-50"></span></li></ul><ul x-show="showWorkflows &amp;&amp; search === ''" class="left-sidebar__content"><li class=""><div class="left-sidebar__row"><img src="../../assets/category-selected.svg" class="left-sidebar__icon block light:hidden" alt="Category icon"><img src="../../assets/category-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="Category icon"><p class="text-slate-50">Other</p></div><ul class=""><a href="validate_flag_filter-workflow.html" x-data="{
                                     node: {
                                         current: false,
                                         icon: '../../assets/workflow-unselected.svg',
                                     }
-                                }" class="left-sidebar__row" x-bind:class="node.current ? 'bg-slate-700/50 is-scrolled-to' : 'hover:bg-slate-800'"><div class="left-sidebar__indent -1"></div><div class="left-sidebar__content-item-container crop-ellipsis"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Workflow icon"><sprocket-tooltip content="validate_flag_filter" class="crop-ellipsis" x-bind:class="node.current ? 'text-slate-50' : 'group-hover:text-slate-50'"><span>validate_flag_filter</span></sprocket-tooltip></div></a></ul></li></ul></div></div></div><div class="layout__main-center"><div class="layout__main-center-content"><div><div class="flex gap-1 mb-3" x-show="showCenterButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../../assets/sidebar-icon-hide.svg" alt=""></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../../assets/sidebar-icon-default.svg" alt=""></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../../assets/sidebar-icon-expand.svg" alt=""></img></button></div><div class="layout__breadcrumbs"><div class="layout__breadcrumb-container"><a class="layout__breadcrumb-clickable" href="../../index.html">docs</a><span> / </span><span class="layout__breadcrumb-inactive">data_structures</span><span> / </span><a href="index.html" class="layout__breadcrumb-clickable">flag_filter</a><span> / </span><span class="layout__breadcrumb-inactive">validate_string_is_12bit_oct_dec_or_hex</span></div></div></div><div class="main__container"><span class="text-violet-400">Task</span><h1 id="title" class="main__title"><code>validate_string_is_12bit_oct_dec_or_hex</code></h1><div class="markdown-body mb-4">Validates that a string is a octal, decimal, or hexadecimal number and less than 2^12.</div><div class="main__badge-container"><div class="main__badge"><span class="main__badge-text">WDL Version</span><div class="main__badge-inner"><span class="main__badge-inner-text">1.1</span></div></div></div><div x-data="{ unix: true }" class="main__run-with-container"><div class="main__run-with-label"><span class="main__run-with-label-text">RUN WITH</span><button x-on:click="unix = !unix" class="main__run-with-toggle"><div x-bind:class="unix ? 'main__run-with-toggle-label--active' : 'main__run-with-toggle-label--inactive'">Unix</div><div x-bind:class="!unix ? 'main__run-with-toggle-label--active' : 'main__run-with-toggle-label--inactive'">Windows</div></button></div><div class="main__run-with-content"><p class="main__run-with-content-text">sprocket run --entrypoint validate_string_is_12bit_oct_dec_or_hex <span x-show="unix">data_structures/flag_filter.wdl</span><span x-show="!unix">data_structures\flag_filter.wdl</span> [INPUTS]...</p></div></div><div class="main__section"><div class="markdown-body">Hexadecimal numbers must be prefixed with '0x' and only contain the characters [0-9A-F] to be valid (i.e. [a-f] is not allowed). Octal number must start with '0' and only contain the characters [0-7] to be valid. And decimal numbers must start with a digit between 1-9 and only contain the characters [0-9] to be valid.</div></div><div class="main__section"><h2 id="inputs" class="main__section-header">Inputs</h2><h3 id="required-inputs" class="main__section-subheader">Required Inputs</h3><div class="main__grid-container"><div class="main__grid-req-inputs-container"><div class="main__grid-header-cell">Name</div><div class="main__grid-header-cell">Type</div><div class="main__grid-header-cell">Description</div><div class="main__grid-header-separator"></div><div class="main__grid-row" x-data="{ description_expanded: false }"><div class="main__grid-cell"><code>number</code></div><div class="main__grid-cell"><code>String</code></div><div class="main__grid-cell">The number to validate. See task <code>meta.help</code> for accepted formats.</div><div x-show="description_expanded" class="main__grid-full-width-cell">The number to validate. See task <code>meta.help</code> for accepted formats.</div></div></div></div></div><div class="main__section"><h2 id="outputs" class="main__section-header">Outputs</h2><div class="main__grid-container"><div class="main__grid-non-req-param-container"><div class="main__grid-header-cell">Name</div><div class="main__grid-header-cell">Type</div><div class="main__grid-header-cell">Expression</div><div class="main__grid-header-cell">Description</div><div class="main__grid-header-separator"></div><div class="main__grid-row" x-data="{ description_expanded: false, expr_expanded: false }"><div class="main__grid-cell"><code>check</code></div><div class="main__grid-cell"><code>String</code></div><div class="main__grid-cell"><code>&quot;passed&quot;</code></div><div class="main__grid-cell">Dummy output to enable caching.</div><div x-show="description_expanded" class="main__grid-full-width-cell">Dummy output to enable caching.</div><div x-show="expr_expanded" class="main__grid-full-width-cell"><sprocket-code language="wdl">&quot;passed&quot;</sprocket-code></div></div></div></div></div><div class="main__section"><h2 id="runtime" class="main__section-header">Default Runtime Attributes</h2><div class="main__grid-container"><div class="main__grid-runtime-container"><div class="main__grid-header-cell">Attribute</div><div class="main__grid-header-cell">Value</div><div class="main__grid-header-separator"></div><div class="main__grid-row"><div class="main__grid-cell"><code>memory</code></div><div class="main__grid-cell"><code>&quot;4 GB&quot;</code></div></div><div class="main__grid-row-separator"></div><div class="main__grid-row"><div class="main__grid-cell"><code>disks</code></div><div class="main__grid-cell"><code>&quot;10 GB&quot;</code></div></div><div class="main__grid-row-separator"></div><div class="main__grid-row"><div class="main__grid-cell"><code>container</code></div><div class="main__grid-cell"><code>&quot;ghcr.io/stjudecloud/util:1.4.0&quot;</code></div></div><div class="main__grid-row-separator"></div><div class="main__grid-row"><div class="main__grid-cell"><code>maxRetries</code></div><div class="main__grid-cell"><code>1</code></div></div></div></div></div><div class="main__section"><h2 id="command" class="main__section-header">Command</h2><sprocket-code language="wdl" class="pt-8">if [[ &quot;~{number}&quot; =~ ^[1-9][0-9]+$ ]]; then
+                                }" class="left-sidebar__row" x-bind:class="node.current ? 'bg-slate-700/50 is-scrolled-to' : 'hover:bg-slate-800'"><div class="left-sidebar__indent -1"></div><div class="left-sidebar__content-item-container crop-ellipsis"><img x-bind:src="node.icon?.replace('.svg', '.light.svg')" class="left-sidebar__icon" alt="Workflow icon"><sprocket-tooltip content="validate_flag_filter" class="crop-ellipsis" x-bind:class="node.current ? 'text-slate-50' : 'group-hover:text-slate-50'"><span>validate_flag_filter</span></sprocket-tooltip></div></a></ul></li></ul></div></div></div><div class="layout__main-center"><div class="layout__main-center-content"><div><div class="flex gap-1 mb-3" x-show="showCenterButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../../assets/sidebar-icon-hide.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-hide.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../../assets/sidebar-icon-default.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-default.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../../assets/sidebar-icon-expand.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-expand.light.svg" alt="" class="hidden light:block"></img></button></div><div class="flex flex-row-reverse items-start justify-between"><button x-on:click="
+                                document.documentElement.classList.toggle('light')
+                                localStorage.setItem('theme', document.documentElement.classList.contains('light') ? 'light' : 'dark')
+                                " class="border border-slate-700 rounded-md h-8 flex items-center justify-center text-slate-300 text-lg w-8 cursor-pointer hover:border-slate-500">☀︎</button><div class="layout__breadcrumbs"><div class="layout__breadcrumb-container"><a class="layout__breadcrumb-clickable" href="../../index.html">docs</a><span> / </span><span class="layout__breadcrumb-inactive">data_structures</span><span> / </span><a href="index.html" class="layout__breadcrumb-clickable">flag_filter</a><span> / </span><span class="layout__breadcrumb-inactive">validate_string_is_12bit_oct_dec_or_hex</span></div></div></div></div><div class="main__container"><span class="text-brand-violet-400">Task</span><h1 id="title" class="main__title"><code>validate_string_is_12bit_oct_dec_or_hex</code></h1><div class="markdown-body mb-4">Validates that a string is a octal, decimal, or hexadecimal number and less than 2^12.</div><div class="main__badge-container"><div class="main__badge"><span class="main__badge-text">WDL Version</span><div class="main__badge-inner"><span class="main__badge-inner-text">1.1</span></div></div></div><div x-data="{ unix: true }" class="main__run-with-container"><div class="main__run-with-label"><span class="main__run-with-label-text">RUN WITH</span><button x-on:click="unix = !unix" class="main__run-with-toggle"><div x-bind:class="unix ? 'main__run-with-toggle-label--active' : 'main__run-with-toggle-label--inactive'">Unix</div><div x-bind:class="!unix ? 'main__run-with-toggle-label--active' : 'main__run-with-toggle-label--inactive'">Windows</div></button></div><div class="main__run-with-content"><p class="main__run-with-content-text">sprocket run --entrypoint validate_string_is_12bit_oct_dec_or_hex <span x-show="unix">data_structures/flag_filter.wdl</span><span x-show="!unix">data_structures\flag_filter.wdl</span> [INPUTS]...</p></div></div><div class="main__section"><div class="markdown-body">Hexadecimal numbers must be prefixed with '0x' and only contain the characters [0-9A-F] to be valid (i.e. [a-f] is not allowed). Octal number must start with '0' and only contain the characters [0-7] to be valid. And decimal numbers must start with a digit between 1-9 and only contain the characters [0-9] to be valid.</div></div><div class="main__section"><h2 id="inputs" class="main__section-header">Inputs</h2><h3 id="required-inputs" class="main__section-subheader">Required Inputs</h3><div class="main__grid-container"><div class="main__grid-req-inputs-container"><div class="main__grid-header-cell">Name</div><div class="main__grid-header-cell">Type</div><div class="main__grid-header-cell">Description</div><div class="main__grid-header-separator"></div><div class="main__grid-row" x-data="{ description_expanded: false }"><div class="main__grid-cell"><code>number</code></div><div class="main__grid-cell"><code>String</code></div><div class="main__grid-cell">The number to validate. See task <code>meta.help</code> for accepted formats.</div><div x-show="description_expanded" class="main__grid-full-width-cell">The number to validate. See task <code>meta.help</code> for accepted formats.</div></div></div></div></div><div class="main__section"><h2 id="outputs" class="main__section-header">Outputs</h2><div class="main__grid-container"><div class="main__grid-non-req-param-container"><div class="main__grid-header-cell">Name</div><div class="main__grid-header-cell">Type</div><div class="main__grid-header-cell">Expression</div><div class="main__grid-header-cell">Description</div><div class="main__grid-header-separator"></div><div class="main__grid-row" x-data="{ description_expanded: false, expr_expanded: false }"><div class="main__grid-cell"><code>check</code></div><div class="main__grid-cell"><code>String</code></div><div class="main__grid-cell"><code>&quot;passed&quot;</code></div><div class="main__grid-cell">Dummy output to enable caching.</div><div x-show="description_expanded" class="main__grid-full-width-cell">Dummy output to enable caching.</div><div x-show="expr_expanded" class="main__grid-full-width-cell"><sprocket-code language="wdl">&quot;passed&quot;</sprocket-code></div></div></div></div></div><div class="main__section"><h2 id="runtime" class="main__section-header">Default Runtime Attributes</h2><div class="main__grid-container"><div class="main__grid-runtime-container"><div class="main__grid-header-cell">Attribute</div><div class="main__grid-header-cell">Value</div><div class="main__grid-header-separator"></div><div class="main__grid-row"><div class="main__grid-cell"><code>memory</code></div><div class="main__grid-cell"><code>&quot;4 GB&quot;</code></div></div><div class="main__grid-row-separator"></div><div class="main__grid-row"><div class="main__grid-cell"><code>disks</code></div><div class="main__grid-cell"><code>&quot;10 GB&quot;</code></div></div><div class="main__grid-row-separator"></div><div class="main__grid-row"><div class="main__grid-cell"><code>container</code></div><div class="main__grid-cell"><code>&quot;ghcr.io/stjudecloud/util:1.4.0&quot;</code></div></div><div class="main__grid-row-separator"></div><div class="main__grid-row"><div class="main__grid-cell"><code>maxRetries</code></div><div class="main__grid-cell"><code>1</code></div></div></div></div></div><div class="main__section"><h2 id="command" class="main__section-header">Command</h2><sprocket-code language="wdl" class="pt-8">if [[ &quot;~{number}&quot; =~ ^[1-9][0-9]+$ ]]; then
     # number is in decimal
     if [ &quot;~{number}&quot; -lt 4096 ]; then
         &gt;&amp;2 echo &quot;Input number (~{number}) is valid&quot;
diff --git a/crates/wdl-doc/tests/output_docs/data_structures/read_group/ReadGroup-struct.html b/crates/wdl-doc/tests/output_docs/data_structures/read_group/ReadGroup-struct.html
index 46c2c3fd..15249917 100644
--- a/crates/wdl-doc/tests/output_docs/data_structures/read_group/ReadGroup-struct.html
+++ b/crates/wdl-doc/tests/output_docs/data_structures/read_group/ReadGroup-struct.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html class="dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ReadGroup</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&amp;display=swap" rel="stylesheet"><script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script defer src="../../index.js"></script><link rel="stylesheet" type="text/css" href="../../style.css"></head><body class="body--base"><div class="layout__container layout__container--alt-layout" x-transition x-data="{
+<!DOCTYPE html><html x-data="{ DEFAULT_THEME: '' }" x-bind:class="(localStorage.getItem('theme') ?? DEFAULT_THEME) === 'light' ? 'light' : ''" x-cloak><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ReadGroup</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&amp;display=swap" rel="stylesheet"><script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script defer src="../../index.js"></script><link rel="stylesheet" type="text/css" href="../../style.css"></head><body class="body--base"><div class="layout__container layout__container--alt-layout" x-transition x-data="{
                 sidebarState: $persist(window.innerWidth &lt; 768 ? 'hidden' : 'normal').using(sessionStorage),
                 get showSidebarButtons() { return this.sidebarState !== 'hidden'; },
                 get showCenterButtons() { return this.sidebarState === 'hidden'; },
@@ -16,7 +16,7 @@
                 collapseSidebar() { this.sidebarState = 'hidden'; },
                 restoreSidebar() { this.sidebarState = 'normal'; },
                 expandSidebar() { this.sidebarState = 'xl'; }
-            }" x-bind:class="containerClasses"><div class="layout__sidebar-left" x-transition><div class="absolute top-5 right-2 flex gap-1 z-10" x-cloak x-show="showSidebarButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../../assets/sidebar-icon-hide.svg" alt=""></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../../assets/sidebar-icon-default.svg" alt=""></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../../assets/sidebar-icon-expand.svg" alt=""></img></button></div><div x-data="{
+            }" x-bind:class="containerClasses"><div class="layout__sidebar-left" x-transition><div class="absolute top-5 right-2 flex gap-1 z-10" x-cloak x-show="showSidebarButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../../assets/sidebar-icon-hide.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-hide.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../../assets/sidebar-icon-default.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-default.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../../assets/sidebar-icon-expand.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-expand.light.svg" alt="" class="hidden light:block"></img></button></div><div x-data="{
                 showWorkflows: $persist(false).using(sessionStorage),
                 search: $persist('').using(sessionStorage),
                 dirOpen: '../../assets/chevron-up.svg',
@@ -68,12 +68,15 @@
                         this.showChildrenCache[n.key] = true;
                     });
                 }
-            }" x-cloak x-init="$nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__container"><div class="sticky px-4"><a href="../../index.html"><img src="../../assets/logo.svg" class="w-[120px] flex-none mb-8" alt="Logo"></a><div class="relative w-full h-10"><input id="searchbox" x-model.debounce="search" type="text" placeholder="Search..." class="left-sidebar__searchbox"><img src="../../assets/search.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none" alt="Search icon"><img src="../../assets/x-mark.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"></div><div class="left-sidebar__tabs-container mt-4"><button x-on:click="showWorkflows = true; search = ''; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="! showWorkflows ? 'opacity-40 hover:opacity-80' : ''"><img src="../../assets/list-bullet-selected.svg" class="left-sidebar__icon" alt="List icon"><p>Workflows</p></button><button x-on:click="showWorkflows = false; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="showWorkflows ? 'opacity-40 hover:opacity-80' : ''"><img src="../../assets/folder-selected.svg" class="left-sidebar__icon" alt="List icon"><p>Full Directory</p></button></div></div><div x-cloak class="left-sidebar__content-container pt-4"><ul x-show="! showWorkflows || search != ''" class="left-sidebar__content"><sprocket-tooltip content="docs" class="block"><a href="../../index.html" x-show="search === ''" aria-label="docs" class="left-sidebar__row hover:bg-slate-700"><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative shrink-0"><img src="../../assets/dir-open.svg" class="left-sidebar__icon" alt="Directory icon"></div><div class="text-slate-50">docs</div></div></a></sprocket-tooltip><template x-for="node in shownNodes"><sprocket-tooltip x-bind:content="node.display_name" class="block isolate"><a x-bind:href="node.href" x-show="showSelfCache[node.key]" x-on:click="if (node.href === null) toggleChildren(node.key)" x-bind:aria-label="node.display_name" class="left-sidebar__row" x-bind:class="`${node.current ? 'is-scrolled-to left-sidebar__row--active' : (node.href === null) ? showChildrenCache[node.key] ? 'left-sidebar__row-folder left-sidebar__row-folder--open' : 'left-sidebar__row-folder left-sidebar__row-folder--closed' : 'left-sidebar__row-page'} ${node.ancestor ? 'left-sidebar__content-item-container--ancestor' : ''}`"><template x-for="i in Array.from({ length: node.nest_level })"><div class="left-sidebar__indent -z-1"></div></template><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative left-sidebar__icon shrink-0"><img x-bind:src="node.icon || dirOpen" class="left-sidebar__icon" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"></div><div class="crop-ellipsis" x-text="node.display_name"></div></div></a></sprocket-tooltip></template><template x-for="node in searchedNodes"><li class="left-sidebar__search-result-item"><p class="text-xs text-slate-500 crop-ellipsis" x-text="node.parent"></p><div class="left-sidebar__search-result-item-container"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Node icon"><sprocket-tooltip class="crop-ellipsis" x-bind:content="node.display_name"><a x-bind:href="node.href" x-text="node.display_name"></a></sprocket-tooltip></div></li></template><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex place-content-center"><img src="../../assets/search.svg" class="size-8" alt="Search icon"></li><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex gap-1 place-content-center text-center break-words whitespace-normal text-sm text-slate-500"><span x-text="'No results found for'"></span><span x-text="`&quot;${search}&quot;`" class="text-slate-50"></span></li></ul><ul x-show="showWorkflows &amp;&amp; search === ''" class="left-sidebar__content"><li class=""><div class="left-sidebar__row"><img src="../../assets/category-selected.svg" class="left-sidebar__icon" alt="Category icon"><p class="text-slate-50">Other</p></div><ul class=""><a href="../flag_filter/validate_flag_filter-workflow.html" x-data="{
+            }" x-cloak x-init="$nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__container"><div class="sticky px-4"><a href="../../index.html"><img src="../../assets/logo.svg" class="w-[120px] flex-none mb-8 block light:hidden" alt="Logo"><img src="../../assets/logo.light.svg" class="w-[120px] flex-none mb-8 hidden light:block" alt="Logo"></a><div class="relative w-full h-10"><input id="searchbox" x-model.debounce="search" type="text" placeholder="Search..." class="left-sidebar__searchbox"><img src="../../assets/search.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none block light:hidden" alt="Search icon"><img src="../../assets/search.light.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none hidden light:block" alt="Search icon"><img src="../../assets/x-mark.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer block light:hidden" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"><img src="../../assets/x-mark.light.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer hidden light:block" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"></div><div class="left-sidebar__tabs-container mt-4"><button x-on:click="showWorkflows = true; search = ''; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="! showWorkflows ? 'opacity-40 light:opacity-60 hover:opacity-80' : ''"><img src="../../assets/list-bullet-selected.svg" class="left-sidebar__icon block light:hidden" alt="List icon"><img src="../../assets/list-bullet-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="List icon"><p>Workflows</p></button><button x-on:click="showWorkflows = false; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="showWorkflows ? 'opacity-50 light:opacity-60 hover:opacity-80' : ''"><img src="../../assets/folder-selected.svg" class="left-sidebar__icon block light:hidden" alt="List icon"><img src="../../assets/folder-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="List icon"><p>Full Directory</p></button></div></div><div x-cloak class="left-sidebar__content-container pt-4"><ul x-show="! showWorkflows || search != ''" class="left-sidebar__content"><sprocket-tooltip content="docs" class="block"><a href="../../index.html" x-show="search === ''" aria-label="docs" class="left-sidebar__row hover:bg-slate-700"><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative shrink-0"><img src="../../assets/dir-open.svg" class="left-sidebar__icon block light:hidden" alt="Directory icon"><img src="../../assets/dir-open.light.svg" class="left-sidebar__icon hidden light:block" alt="Directory icon"></div><div class="text-slate-50">docs</div></div></a></sprocket-tooltip><template x-for="node in shownNodes"><sprocket-tooltip x-bind:content="node.display_name" class="block isolate"><a x-bind:href="node.href" x-show="showSelfCache[node.key]" x-on:click="if (node.href === null) toggleChildren(node.key)" x-bind:aria-label="node.display_name" class="left-sidebar__row" x-bind:class="`${node.current ? 'is-scrolled-to left-sidebar__row--active' : (node.href === null) ? showChildrenCache[node.key] ? 'left-sidebar__row-folder left-sidebar__row-folder--open' : 'left-sidebar__row-folder left-sidebar__row-folder--closed' : 'left-sidebar__row-page'} ${node.ancestor ? 'left-sidebar__content-item-container--ancestor' : ''}`"><template x-for="i in Array.from({ length: node.nest_level })"><div class="left-sidebar__indent -z-1"></div></template><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative left-sidebar__icon shrink-0"><img x-bind:src="node.icon || dirOpen" class="left-sidebar__icon block light:hidden" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"><img x-bind:src="(node.icon || dirOpen).replace('.svg', '.light.svg')" class="left-sidebar__icon hidden light:block" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"></div><div class="crop-ellipsis" x-text="node.display_name"></div></div></a></sprocket-tooltip></template><template x-for="node in searchedNodes"><li class="left-sidebar__search-result-item"><p class="text-xs text-slate-500 crop-ellipsis" x-text="node.parent"></p><div class="left-sidebar__search-result-item-container"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Node icon"><sprocket-tooltip class="crop-ellipsis" x-bind:content="node.display_name"><a x-bind:href="node.href" x-text="node.display_name"></a></sprocket-tooltip></div></li></template><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex place-content-center"><img src="../../assets/search.svg" class="size-8 block light:hidden" alt="Search icon"><img src="../../assets/search.light.svg" class="size-8 hidden light:block" alt="Search icon"></li><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex gap-1 place-content-center text-center break-words whitespace-normal text-sm text-slate-500"><span x-text="'No results found for'"></span><span x-text="`&quot;${search}&quot;`" class="text-slate-50"></span></li></ul><ul x-show="showWorkflows &amp;&amp; search === ''" class="left-sidebar__content"><li class=""><div class="left-sidebar__row"><img src="../../assets/category-selected.svg" class="left-sidebar__icon block light:hidden" alt="Category icon"><img src="../../assets/category-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="Category icon"><p class="text-slate-50">Other</p></div><ul class=""><a href="../flag_filter/validate_flag_filter-workflow.html" x-data="{
                                     node: {
                                         current: false,
                                         icon: '../../assets/workflow-unselected.svg',
                                     }
-                                }" class="left-sidebar__row" x-bind:class="node.current ? 'bg-slate-700/50 is-scrolled-to' : 'hover:bg-slate-800'"><div class="left-sidebar__indent -1"></div><div class="left-sidebar__content-item-container crop-ellipsis"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Workflow icon"><sprocket-tooltip content="validate_flag_filter" class="crop-ellipsis" x-bind:class="node.current ? 'text-slate-50' : 'group-hover:text-slate-50'"><span>validate_flag_filter</span></sprocket-tooltip></div></a></ul></li></ul></div></div></div><div class="layout__main-center"><div class="layout__main-center-content"><div><div class="flex gap-1 mb-3" x-show="showCenterButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../../assets/sidebar-icon-hide.svg" alt=""></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../../assets/sidebar-icon-default.svg" alt=""></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../../assets/sidebar-icon-expand.svg" alt=""></img></button></div><div class="layout__breadcrumbs"><div class="layout__breadcrumb-container"><a class="layout__breadcrumb-clickable" href="../../index.html">docs</a><span> / </span><span class="layout__breadcrumb-inactive">data_structures</span><span> / </span><a href="index.html" class="layout__breadcrumb-clickable">read_group</a><span> / </span><span class="layout__breadcrumb-inactive">ReadGroup</span></div></div></div><div class="main__container"><p class="text-pink-400">Struct</p><h1 id="title" class="main__title"><code>ReadGroup</code></h1><div class="main__badge-container"><div class="main__badge"><span class="main__badge-text">WDL Version</span><div class="main__badge-inner"><span class="main__badge-inner-text">1.1</span></div></div></div><div class="main__section"><sprocket-code language="wdl">struct ReadGroup {
+                                }" class="left-sidebar__row" x-bind:class="node.current ? 'bg-slate-700/50 is-scrolled-to' : 'hover:bg-slate-800'"><div class="left-sidebar__indent -1"></div><div class="left-sidebar__content-item-container crop-ellipsis"><img x-bind:src="node.icon?.replace('.svg', '.light.svg')" class="left-sidebar__icon" alt="Workflow icon"><sprocket-tooltip content="validate_flag_filter" class="crop-ellipsis" x-bind:class="node.current ? 'text-slate-50' : 'group-hover:text-slate-50'"><span>validate_flag_filter</span></sprocket-tooltip></div></a></ul></li></ul></div></div></div><div class="layout__main-center"><div class="layout__main-center-content"><div><div class="flex gap-1 mb-3" x-show="showCenterButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../../assets/sidebar-icon-hide.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-hide.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../../assets/sidebar-icon-default.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-default.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../../assets/sidebar-icon-expand.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-expand.light.svg" alt="" class="hidden light:block"></img></button></div><div class="flex flex-row-reverse items-start justify-between"><button x-on:click="
+                                document.documentElement.classList.toggle('light')
+                                localStorage.setItem('theme', document.documentElement.classList.contains('light') ? 'light' : 'dark')
+                                " class="border border-slate-700 rounded-md h-8 flex items-center justify-center text-slate-300 text-lg w-8 cursor-pointer hover:border-slate-500">☀︎</button><div class="layout__breadcrumbs"><div class="layout__breadcrumb-container"><a class="layout__breadcrumb-clickable" href="../../index.html">docs</a><span> / </span><span class="layout__breadcrumb-inactive">data_structures</span><span> / </span><a href="index.html" class="layout__breadcrumb-clickable">read_group</a><span> / </span><span class="layout__breadcrumb-inactive">ReadGroup</span></div></div></div></div><div class="main__container"><p class="text-brand-pink-400">Struct</p><h1 id="title" class="main__title"><code>ReadGroup</code></h1><div class="main__badge-container"><div class="main__badge"><span class="main__badge-text">WDL Version</span><div class="main__badge-inner"><span class="main__badge-inner-text">1.1</span></div></div></div><div class="main__section"><sprocket-code language="wdl">struct ReadGroup {
     String ID
     String? BC
     String? CN
diff --git a/crates/wdl-doc/tests/output_docs/data_structures/read_group/get_read_groups-task.html b/crates/wdl-doc/tests/output_docs/data_structures/read_group/get_read_groups-task.html
index 417c2023..6703a33e 100644
--- a/crates/wdl-doc/tests/output_docs/data_structures/read_group/get_read_groups-task.html
+++ b/crates/wdl-doc/tests/output_docs/data_structures/read_group/get_read_groups-task.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html class="dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>get_read_groups</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&amp;display=swap" rel="stylesheet"><script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script defer src="../../index.js"></script><link rel="stylesheet" type="text/css" href="../../style.css"></head><body class="body--base"><div class="layout__container layout__container--alt-layout" x-transition x-data="{
+<!DOCTYPE html><html x-data="{ DEFAULT_THEME: '' }" x-bind:class="(localStorage.getItem('theme') ?? DEFAULT_THEME) === 'light' ? 'light' : ''" x-cloak><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>get_read_groups</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&amp;display=swap" rel="stylesheet"><script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script defer src="../../index.js"></script><link rel="stylesheet" type="text/css" href="../../style.css"></head><body class="body--base"><div class="layout__container layout__container--alt-layout" x-transition x-data="{
                 sidebarState: $persist(window.innerWidth &lt; 768 ? 'hidden' : 'normal').using(sessionStorage),
                 get showSidebarButtons() { return this.sidebarState !== 'hidden'; },
                 get showCenterButtons() { return this.sidebarState === 'hidden'; },
@@ -16,7 +16,7 @@
                 collapseSidebar() { this.sidebarState = 'hidden'; },
                 restoreSidebar() { this.sidebarState = 'normal'; },
                 expandSidebar() { this.sidebarState = 'xl'; }
-            }" x-bind:class="containerClasses"><div class="layout__sidebar-left" x-transition><div class="absolute top-5 right-2 flex gap-1 z-10" x-cloak x-show="showSidebarButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../../assets/sidebar-icon-hide.svg" alt=""></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../../assets/sidebar-icon-default.svg" alt=""></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../../assets/sidebar-icon-expand.svg" alt=""></img></button></div><div x-data="{
+            }" x-bind:class="containerClasses"><div class="layout__sidebar-left" x-transition><div class="absolute top-5 right-2 flex gap-1 z-10" x-cloak x-show="showSidebarButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../../assets/sidebar-icon-hide.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-hide.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../../assets/sidebar-icon-default.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-default.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../../assets/sidebar-icon-expand.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-expand.light.svg" alt="" class="hidden light:block"></img></button></div><div x-data="{
                 showWorkflows: $persist(false).using(sessionStorage),
                 search: $persist('').using(sessionStorage),
                 dirOpen: '../../assets/chevron-up.svg',
@@ -68,12 +68,15 @@
                         this.showChildrenCache[n.key] = true;
                     });
                 }
-            }" x-cloak x-init="$nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__container"><div class="sticky px-4"><a href="../../index.html"><img src="../../assets/logo.svg" class="w-[120px] flex-none mb-8" alt="Logo"></a><div class="relative w-full h-10"><input id="searchbox" x-model.debounce="search" type="text" placeholder="Search..." class="left-sidebar__searchbox"><img src="../../assets/search.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none" alt="Search icon"><img src="../../assets/x-mark.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"></div><div class="left-sidebar__tabs-container mt-4"><button x-on:click="showWorkflows = true; search = ''; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="! showWorkflows ? 'opacity-40 hover:opacity-80' : ''"><img src="../../assets/list-bullet-selected.svg" class="left-sidebar__icon" alt="List icon"><p>Workflows</p></button><button x-on:click="showWorkflows = false; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="showWorkflows ? 'opacity-40 hover:opacity-80' : ''"><img src="../../assets/folder-selected.svg" class="left-sidebar__icon" alt="List icon"><p>Full Directory</p></button></div></div><div x-cloak class="left-sidebar__content-container pt-4"><ul x-show="! showWorkflows || search != ''" class="left-sidebar__content"><sprocket-tooltip content="docs" class="block"><a href="../../index.html" x-show="search === ''" aria-label="docs" class="left-sidebar__row hover:bg-slate-700"><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative shrink-0"><img src="../../assets/dir-open.svg" class="left-sidebar__icon" alt="Directory icon"></div><div class="text-slate-50">docs</div></div></a></sprocket-tooltip><template x-for="node in shownNodes"><sprocket-tooltip x-bind:content="node.display_name" class="block isolate"><a x-bind:href="node.href" x-show="showSelfCache[node.key]" x-on:click="if (node.href === null) toggleChildren(node.key)" x-bind:aria-label="node.display_name" class="left-sidebar__row" x-bind:class="`${node.current ? 'is-scrolled-to left-sidebar__row--active' : (node.href === null) ? showChildrenCache[node.key] ? 'left-sidebar__row-folder left-sidebar__row-folder--open' : 'left-sidebar__row-folder left-sidebar__row-folder--closed' : 'left-sidebar__row-page'} ${node.ancestor ? 'left-sidebar__content-item-container--ancestor' : ''}`"><template x-for="i in Array.from({ length: node.nest_level })"><div class="left-sidebar__indent -z-1"></div></template><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative left-sidebar__icon shrink-0"><img x-bind:src="node.icon || dirOpen" class="left-sidebar__icon" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"></div><div class="crop-ellipsis" x-text="node.display_name"></div></div></a></sprocket-tooltip></template><template x-for="node in searchedNodes"><li class="left-sidebar__search-result-item"><p class="text-xs text-slate-500 crop-ellipsis" x-text="node.parent"></p><div class="left-sidebar__search-result-item-container"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Node icon"><sprocket-tooltip class="crop-ellipsis" x-bind:content="node.display_name"><a x-bind:href="node.href" x-text="node.display_name"></a></sprocket-tooltip></div></li></template><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex place-content-center"><img src="../../assets/search.svg" class="size-8" alt="Search icon"></li><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex gap-1 place-content-center text-center break-words whitespace-normal text-sm text-slate-500"><span x-text="'No results found for'"></span><span x-text="`&quot;${search}&quot;`" class="text-slate-50"></span></li></ul><ul x-show="showWorkflows &amp;&amp; search === ''" class="left-sidebar__content"><li class=""><div class="left-sidebar__row"><img src="../../assets/category-selected.svg" class="left-sidebar__icon" alt="Category icon"><p class="text-slate-50">Other</p></div><ul class=""><a href="../flag_filter/validate_flag_filter-workflow.html" x-data="{
+            }" x-cloak x-init="$nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__container"><div class="sticky px-4"><a href="../../index.html"><img src="../../assets/logo.svg" class="w-[120px] flex-none mb-8 block light:hidden" alt="Logo"><img src="../../assets/logo.light.svg" class="w-[120px] flex-none mb-8 hidden light:block" alt="Logo"></a><div class="relative w-full h-10"><input id="searchbox" x-model.debounce="search" type="text" placeholder="Search..." class="left-sidebar__searchbox"><img src="../../assets/search.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none block light:hidden" alt="Search icon"><img src="../../assets/search.light.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none hidden light:block" alt="Search icon"><img src="../../assets/x-mark.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer block light:hidden" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"><img src="../../assets/x-mark.light.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer hidden light:block" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"></div><div class="left-sidebar__tabs-container mt-4"><button x-on:click="showWorkflows = true; search = ''; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="! showWorkflows ? 'opacity-40 light:opacity-60 hover:opacity-80' : ''"><img src="../../assets/list-bullet-selected.svg" class="left-sidebar__icon block light:hidden" alt="List icon"><img src="../../assets/list-bullet-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="List icon"><p>Workflows</p></button><button x-on:click="showWorkflows = false; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="showWorkflows ? 'opacity-50 light:opacity-60 hover:opacity-80' : ''"><img src="../../assets/folder-selected.svg" class="left-sidebar__icon block light:hidden" alt="List icon"><img src="../../assets/folder-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="List icon"><p>Full Directory</p></button></div></div><div x-cloak class="left-sidebar__content-container pt-4"><ul x-show="! showWorkflows || search != ''" class="left-sidebar__content"><sprocket-tooltip content="docs" class="block"><a href="../../index.html" x-show="search === ''" aria-label="docs" class="left-sidebar__row hover:bg-slate-700"><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative shrink-0"><img src="../../assets/dir-open.svg" class="left-sidebar__icon block light:hidden" alt="Directory icon"><img src="../../assets/dir-open.light.svg" class="left-sidebar__icon hidden light:block" alt="Directory icon"></div><div class="text-slate-50">docs</div></div></a></sprocket-tooltip><template x-for="node in shownNodes"><sprocket-tooltip x-bind:content="node.display_name" class="block isolate"><a x-bind:href="node.href" x-show="showSelfCache[node.key]" x-on:click="if (node.href === null) toggleChildren(node.key)" x-bind:aria-label="node.display_name" class="left-sidebar__row" x-bind:class="`${node.current ? 'is-scrolled-to left-sidebar__row--active' : (node.href === null) ? showChildrenCache[node.key] ? 'left-sidebar__row-folder left-sidebar__row-folder--open' : 'left-sidebar__row-folder left-sidebar__row-folder--closed' : 'left-sidebar__row-page'} ${node.ancestor ? 'left-sidebar__content-item-container--ancestor' : ''}`"><template x-for="i in Array.from({ length: node.nest_level })"><div class="left-sidebar__indent -z-1"></div></template><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative left-sidebar__icon shrink-0"><img x-bind:src="node.icon || dirOpen" class="left-sidebar__icon block light:hidden" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"><img x-bind:src="(node.icon || dirOpen).replace('.svg', '.light.svg')" class="left-sidebar__icon hidden light:block" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"></div><div class="crop-ellipsis" x-text="node.display_name"></div></div></a></sprocket-tooltip></template><template x-for="node in searchedNodes"><li class="left-sidebar__search-result-item"><p class="text-xs text-slate-500 crop-ellipsis" x-text="node.parent"></p><div class="left-sidebar__search-result-item-container"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Node icon"><sprocket-tooltip class="crop-ellipsis" x-bind:content="node.display_name"><a x-bind:href="node.href" x-text="node.display_name"></a></sprocket-tooltip></div></li></template><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex place-content-center"><img src="../../assets/search.svg" class="size-8 block light:hidden" alt="Search icon"><img src="../../assets/search.light.svg" class="size-8 hidden light:block" alt="Search icon"></li><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex gap-1 place-content-center text-center break-words whitespace-normal text-sm text-slate-500"><span x-text="'No results found for'"></span><span x-text="`&quot;${search}&quot;`" class="text-slate-50"></span></li></ul><ul x-show="showWorkflows &amp;&amp; search === ''" class="left-sidebar__content"><li class=""><div class="left-sidebar__row"><img src="../../assets/category-selected.svg" class="left-sidebar__icon block light:hidden" alt="Category icon"><img src="../../assets/category-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="Category icon"><p class="text-slate-50">Other</p></div><ul class=""><a href="../flag_filter/validate_flag_filter-workflow.html" x-data="{
                                     node: {
                                         current: false,
                                         icon: '../../assets/workflow-unselected.svg',
                                     }
-                                }" class="left-sidebar__row" x-bind:class="node.current ? 'bg-slate-700/50 is-scrolled-to' : 'hover:bg-slate-800'"><div class="left-sidebar__indent -1"></div><div class="left-sidebar__content-item-container crop-ellipsis"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Workflow icon"><sprocket-tooltip content="validate_flag_filter" class="crop-ellipsis" x-bind:class="node.current ? 'text-slate-50' : 'group-hover:text-slate-50'"><span>validate_flag_filter</span></sprocket-tooltip></div></a></ul></li></ul></div></div></div><div class="layout__main-center"><div class="layout__main-center-content"><div><div class="flex gap-1 mb-3" x-show="showCenterButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../../assets/sidebar-icon-hide.svg" alt=""></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../../assets/sidebar-icon-default.svg" alt=""></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../../assets/sidebar-icon-expand.svg" alt=""></img></button></div><div class="layout__breadcrumbs"><div class="layout__breadcrumb-container"><a class="layout__breadcrumb-clickable" href="../../index.html">docs</a><span> / </span><span class="layout__breadcrumb-inactive">data_structures</span><span> / </span><a href="index.html" class="layout__breadcrumb-clickable">read_group</a><span> / </span><span class="layout__breadcrumb-inactive">get_read_groups</span></div></div></div><div class="main__container"><span class="text-violet-400">Task</span><h1 id="title" class="main__title"><code>get_read_groups</code></h1><div class="markdown-body mb-4">Gets read group information from a BAM file and writes it out as JSON which is converted to a WDL struct.</div><div class="main__badge-container"><div class="main__badge"><span class="main__badge-text">WDL Version</span><div class="main__badge-inner"><span class="main__badge-inner-text">1.1</span></div></div></div><div x-data="{ unix: true }" class="main__run-with-container"><div class="main__run-with-label"><span class="main__run-with-label-text">RUN WITH</span><button x-on:click="unix = !unix" class="main__run-with-toggle"><div x-bind:class="unix ? 'main__run-with-toggle-label--active' : 'main__run-with-toggle-label--inactive'">Unix</div><div x-bind:class="!unix ? 'main__run-with-toggle-label--active' : 'main__run-with-toggle-label--inactive'">Windows</div></button></div><div class="main__run-with-content"><p class="main__run-with-content-text">sprocket run --entrypoint get_read_groups <span x-show="unix">data_structures/read_group.wdl</span><span x-show="!unix">data_structures\read_group.wdl</span> [INPUTS]...</p></div></div><div class="main__section"><h2 id="inputs" class="main__section-header">Inputs</h2><h3 id="required-inputs" class="main__section-subheader">Required Inputs</h3><div class="main__grid-container"><div class="main__grid-req-inputs-container"><div class="main__grid-header-cell">Name</div><div class="main__grid-header-cell">Type</div><div class="main__grid-header-cell">Description</div><div class="main__grid-header-separator"></div><div class="main__grid-row" x-data="{ description_expanded: false }"><div class="main__grid-cell"><code>bam</code></div><div class="main__grid-cell"><code>File</code></div><div class="main__grid-cell">Input BAM format file to get read groups from</div><div x-show="description_expanded" class="main__grid-full-width-cell">Input BAM format file to get read groups from</div></div></div></div><h3 id="other-inputs" class="main__section-subheader">Other Inputs</h3><div class="main__grid-container"><div class="main__grid-non-req-param-container"><div class="main__grid-header-cell">Name</div><div class="main__grid-header-cell">Type</div><div class="main__grid-header-cell">Default</div><div class="main__grid-header-cell">Description</div><div class="main__grid-header-separator"></div><div class="main__grid-row" x-data="{ description_expanded: false, expr_expanded: false }"><div class="main__grid-cell"><code>modify_disk_size_gb</code></div><div class="main__grid-cell"><code>Int</code></div><div class="main__grid-cell"><code>0</code></div><div class="main__grid-cell">Add to or subtract from dynamic disk space allocation. Default disk size is determined by the size of the inputs. Specified in GB.</div><div x-show="description_expanded" class="main__grid-full-width-cell">Add to or subtract from dynamic disk space allocation. Default disk size is determined by the size of the inputs. Specified in GB.</div><div x-show="expr_expanded" class="main__grid-full-width-cell"><sprocket-code language="wdl">0</sprocket-code></div></div></div></div></div><div class="main__section"><h2 id="outputs" class="main__section-header">Outputs</h2><div class="main__grid-container"><div class="main__grid-non-req-param-container"><div class="main__grid-header-cell">Name</div><div class="main__grid-header-cell">Type</div><div class="main__grid-header-cell">Expression</div><div class="main__grid-header-cell">Description</div><div class="main__grid-header-separator"></div><div class="main__grid-row" x-data="{ description_expanded: false, expr_expanded: false }"><div class="main__grid-cell"><code>read_groups</code></div><div class="main__grid-cell"><code>Array[ReadGroup]</code></div><div class="main__grid-cell"><code>read_json(&quot;read_groups.json&quot;)</code></div><div class="main__grid-cell">An array of ReadGroup structs containing read group information.</div><div x-show="description_expanded" class="main__grid-full-width-cell">An array of ReadGroup structs containing read group information.</div><div x-show="expr_expanded" class="main__grid-full-width-cell"><sprocket-code language="wdl">read_json(&quot;read_groups.json&quot;)</sprocket-code></div></div></div></div></div><div class="main__section"><h2 id="runtime" class="main__section-header">Default Runtime Attributes</h2><div class="main__grid-container"><div class="main__grid-runtime-container"><div class="main__grid-header-cell">Attribute</div><div class="main__grid-header-cell">Value</div><div class="main__grid-header-separator"></div><div class="main__grid-row"><div class="main__grid-cell"><code>memory</code></div><div class="main__grid-cell"><code>&quot;4 GB&quot;</code></div></div><div class="main__grid-row-separator"></div><div class="main__grid-row"><div class="main__grid-cell"><code>disks</code></div><div class="main__grid-cell"><code>&quot;~{disk_size_gb} GB&quot;</code></div></div><div class="main__grid-row-separator"></div><div class="main__grid-row"><div class="main__grid-cell"><code>container</code></div><div class="main__grid-cell"><code>&quot;quay.io/biocontainers/pysam:0.22.0--py38h15b938a_1&quot;</code></div></div><div class="main__grid-row-separator"></div><div class="main__grid-row"><div class="main__grid-cell"><code>maxRetries</code></div><div class="main__grid-cell"><code>1</code></div></div></div></div></div><div class="main__section"><h2 id="command" class="main__section-header">Command</h2><sprocket-code language="wdl" class="pt-8">set -euo pipefail
+                                }" class="left-sidebar__row" x-bind:class="node.current ? 'bg-slate-700/50 is-scrolled-to' : 'hover:bg-slate-800'"><div class="left-sidebar__indent -1"></div><div class="left-sidebar__content-item-container crop-ellipsis"><img x-bind:src="node.icon?.replace('.svg', '.light.svg')" class="left-sidebar__icon" alt="Workflow icon"><sprocket-tooltip content="validate_flag_filter" class="crop-ellipsis" x-bind:class="node.current ? 'text-slate-50' : 'group-hover:text-slate-50'"><span>validate_flag_filter</span></sprocket-tooltip></div></a></ul></li></ul></div></div></div><div class="layout__main-center"><div class="layout__main-center-content"><div><div class="flex gap-1 mb-3" x-show="showCenterButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../../assets/sidebar-icon-hide.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-hide.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../../assets/sidebar-icon-default.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-default.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../../assets/sidebar-icon-expand.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-expand.light.svg" alt="" class="hidden light:block"></img></button></div><div class="flex flex-row-reverse items-start justify-between"><button x-on:click="
+                                document.documentElement.classList.toggle('light')
+                                localStorage.setItem('theme', document.documentElement.classList.contains('light') ? 'light' : 'dark')
+                                " class="border border-slate-700 rounded-md h-8 flex items-center justify-center text-slate-300 text-lg w-8 cursor-pointer hover:border-slate-500">☀︎</button><div class="layout__breadcrumbs"><div class="layout__breadcrumb-container"><a class="layout__breadcrumb-clickable" href="../../index.html">docs</a><span> / </span><span class="layout__breadcrumb-inactive">data_structures</span><span> / </span><a href="index.html" class="layout__breadcrumb-clickable">read_group</a><span> / </span><span class="layout__breadcrumb-inactive">get_read_groups</span></div></div></div></div><div class="main__container"><span class="text-brand-violet-400">Task</span><h1 id="title" class="main__title"><code>get_read_groups</code></h1><div class="markdown-body mb-4">Gets read group information from a BAM file and writes it out as JSON which is converted to a WDL struct.</div><div class="main__badge-container"><div class="main__badge"><span class="main__badge-text">WDL Version</span><div class="main__badge-inner"><span class="main__badge-inner-text">1.1</span></div></div></div><div x-data="{ unix: true }" class="main__run-with-container"><div class="main__run-with-label"><span class="main__run-with-label-text">RUN WITH</span><button x-on:click="unix = !unix" class="main__run-with-toggle"><div x-bind:class="unix ? 'main__run-with-toggle-label--active' : 'main__run-with-toggle-label--inactive'">Unix</div><div x-bind:class="!unix ? 'main__run-with-toggle-label--active' : 'main__run-with-toggle-label--inactive'">Windows</div></button></div><div class="main__run-with-content"><p class="main__run-with-content-text">sprocket run --entrypoint get_read_groups <span x-show="unix">data_structures/read_group.wdl</span><span x-show="!unix">data_structures\read_group.wdl</span> [INPUTS]...</p></div></div><div class="main__section"><h2 id="inputs" class="main__section-header">Inputs</h2><h3 id="required-inputs" class="main__section-subheader">Required Inputs</h3><div class="main__grid-container"><div class="main__grid-req-inputs-container"><div class="main__grid-header-cell">Name</div><div class="main__grid-header-cell">Type</div><div class="main__grid-header-cell">Description</div><div class="main__grid-header-separator"></div><div class="main__grid-row" x-data="{ description_expanded: false }"><div class="main__grid-cell"><code>bam</code></div><div class="main__grid-cell"><code>File</code></div><div class="main__grid-cell">Input BAM format file to get read groups from</div><div x-show="description_expanded" class="main__grid-full-width-cell">Input BAM format file to get read groups from</div></div></div></div><h3 id="other-inputs" class="main__section-subheader">Other Inputs</h3><div class="main__grid-container"><div class="main__grid-non-req-param-container"><div class="main__grid-header-cell">Name</div><div class="main__grid-header-cell">Type</div><div class="main__grid-header-cell">Default</div><div class="main__grid-header-cell">Description</div><div class="main__grid-header-separator"></div><div class="main__grid-row" x-data="{ description_expanded: false, expr_expanded: false }"><div class="main__grid-cell"><code>modify_disk_size_gb</code></div><div class="main__grid-cell"><code>Int</code></div><div class="main__grid-cell"><code>0</code></div><div class="main__grid-cell">Add to or subtract from dynamic disk space allocation. Default disk size is determined by the size of the inputs. Specified in GB.</div><div x-show="description_expanded" class="main__grid-full-width-cell">Add to or subtract from dynamic disk space allocation. Default disk size is determined by the size of the inputs. Specified in GB.</div><div x-show="expr_expanded" class="main__grid-full-width-cell"><sprocket-code language="wdl">0</sprocket-code></div></div></div></div></div><div class="main__section"><h2 id="outputs" class="main__section-header">Outputs</h2><div class="main__grid-container"><div class="main__grid-non-req-param-container"><div class="main__grid-header-cell">Name</div><div class="main__grid-header-cell">Type</div><div class="main__grid-header-cell">Expression</div><div class="main__grid-header-cell">Description</div><div class="main__grid-header-separator"></div><div class="main__grid-row" x-data="{ description_expanded: false, expr_expanded: false }"><div class="main__grid-cell"><code>read_groups</code></div><div class="main__grid-cell"><code>Array[ReadGroup]</code></div><div class="main__grid-cell"><code>read_json(&quot;read_groups.json&quot;)</code></div><div class="main__grid-cell">An array of ReadGroup structs containing read group information.</div><div x-show="description_expanded" class="main__grid-full-width-cell">An array of ReadGroup structs containing read group information.</div><div x-show="expr_expanded" class="main__grid-full-width-cell"><sprocket-code language="wdl">read_json(&quot;read_groups.json&quot;)</sprocket-code></div></div></div></div></div><div class="main__section"><h2 id="runtime" class="main__section-header">Default Runtime Attributes</h2><div class="main__grid-container"><div class="main__grid-runtime-container"><div class="main__grid-header-cell">Attribute</div><div class="main__grid-header-cell">Value</div><div class="main__grid-header-separator"></div><div class="main__grid-row"><div class="main__grid-cell"><code>memory</code></div><div class="main__grid-cell"><code>&quot;4 GB&quot;</code></div></div><div class="main__grid-row-separator"></div><div class="main__grid-row"><div class="main__grid-cell"><code>disks</code></div><div class="main__grid-cell"><code>&quot;~{disk_size_gb} GB&quot;</code></div></div><div class="main__grid-row-separator"></div><div class="main__grid-row"><div class="main__grid-cell"><code>container</code></div><div class="main__grid-cell"><code>&quot;quay.io/biocontainers/pysam:0.22.0--py38h15b938a_1&quot;</code></div></div><div class="main__grid-row-separator"></div><div class="main__grid-row"><div class="main__grid-cell"><code>maxRetries</code></div><div class="main__grid-cell"><code>1</code></div></div></div></div></div><div class="main__section"><h2 id="command" class="main__section-header">Command</h2><sprocket-code language="wdl" class="pt-8">set -euo pipefail
 BAM=&quot;~{bam}&quot; OUTFILE=&quot;read_groups.json&quot; python - &lt;&lt;END
 import os  # lint-check: ignore
 import pysam  # lint-check: ignore
diff --git a/crates/wdl-doc/tests/output_docs/data_structures/read_group/index.html b/crates/wdl-doc/tests/output_docs/data_structures/read_group/index.html
index e3ceea71..2144ede3 100644
--- a/crates/wdl-doc/tests/output_docs/data_structures/read_group/index.html
+++ b/crates/wdl-doc/tests/output_docs/data_structures/read_group/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html class="dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>read_group</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&amp;display=swap" rel="stylesheet"><script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script defer src="../../index.js"></script><link rel="stylesheet" type="text/css" href="../../style.css"></head><body class="body--base"><div class="layout__container layout__container--alt-layout" x-transition x-data="{
+<!DOCTYPE html><html x-data="{ DEFAULT_THEME: '' }" x-bind:class="(localStorage.getItem('theme') ?? DEFAULT_THEME) === 'light' ? 'light' : ''" x-cloak><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>read_group</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&amp;display=swap" rel="stylesheet"><script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script defer src="../../index.js"></script><link rel="stylesheet" type="text/css" href="../../style.css"></head><body class="body--base"><div class="layout__container layout__container--alt-layout" x-transition x-data="{
                 sidebarState: $persist(window.innerWidth &lt; 768 ? 'hidden' : 'normal').using(sessionStorage),
                 get showSidebarButtons() { return this.sidebarState !== 'hidden'; },
                 get showCenterButtons() { return this.sidebarState === 'hidden'; },
@@ -16,7 +16,7 @@
                 collapseSidebar() { this.sidebarState = 'hidden'; },
                 restoreSidebar() { this.sidebarState = 'normal'; },
                 expandSidebar() { this.sidebarState = 'xl'; }
-            }" x-bind:class="containerClasses"><div class="layout__sidebar-left" x-transition><div class="absolute top-5 right-2 flex gap-1 z-10" x-cloak x-show="showSidebarButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../../assets/sidebar-icon-hide.svg" alt=""></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../../assets/sidebar-icon-default.svg" alt=""></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../../assets/sidebar-icon-expand.svg" alt=""></img></button></div><div x-data="{
+            }" x-bind:class="containerClasses"><div class="layout__sidebar-left" x-transition><div class="absolute top-5 right-2 flex gap-1 z-10" x-cloak x-show="showSidebarButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../../assets/sidebar-icon-hide.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-hide.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../../assets/sidebar-icon-default.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-default.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../../assets/sidebar-icon-expand.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-expand.light.svg" alt="" class="hidden light:block"></img></button></div><div x-data="{
                 showWorkflows: $persist(false).using(sessionStorage),
                 search: $persist('').using(sessionStorage),
                 dirOpen: '../../assets/chevron-up.svg',
@@ -68,12 +68,15 @@
                         this.showChildrenCache[n.key] = true;
                     });
                 }
-            }" x-cloak x-init="$nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__container"><div class="sticky px-4"><a href="../../index.html"><img src="../../assets/logo.svg" class="w-[120px] flex-none mb-8" alt="Logo"></a><div class="relative w-full h-10"><input id="searchbox" x-model.debounce="search" type="text" placeholder="Search..." class="left-sidebar__searchbox"><img src="../../assets/search.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none" alt="Search icon"><img src="../../assets/x-mark.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"></div><div class="left-sidebar__tabs-container mt-4"><button x-on:click="showWorkflows = true; search = ''; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="! showWorkflows ? 'opacity-40 hover:opacity-80' : ''"><img src="../../assets/list-bullet-selected.svg" class="left-sidebar__icon" alt="List icon"><p>Workflows</p></button><button x-on:click="showWorkflows = false; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="showWorkflows ? 'opacity-40 hover:opacity-80' : ''"><img src="../../assets/folder-selected.svg" class="left-sidebar__icon" alt="List icon"><p>Full Directory</p></button></div></div><div x-cloak class="left-sidebar__content-container pt-4"><ul x-show="! showWorkflows || search != ''" class="left-sidebar__content"><sprocket-tooltip content="docs" class="block"><a href="../../index.html" x-show="search === ''" aria-label="docs" class="left-sidebar__row hover:bg-slate-700"><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative shrink-0"><img src="../../assets/dir-open.svg" class="left-sidebar__icon" alt="Directory icon"></div><div class="text-slate-50">docs</div></div></a></sprocket-tooltip><template x-for="node in shownNodes"><sprocket-tooltip x-bind:content="node.display_name" class="block isolate"><a x-bind:href="node.href" x-show="showSelfCache[node.key]" x-on:click="if (node.href === null) toggleChildren(node.key)" x-bind:aria-label="node.display_name" class="left-sidebar__row" x-bind:class="`${node.current ? 'is-scrolled-to left-sidebar__row--active' : (node.href === null) ? showChildrenCache[node.key] ? 'left-sidebar__row-folder left-sidebar__row-folder--open' : 'left-sidebar__row-folder left-sidebar__row-folder--closed' : 'left-sidebar__row-page'} ${node.ancestor ? 'left-sidebar__content-item-container--ancestor' : ''}`"><template x-for="i in Array.from({ length: node.nest_level })"><div class="left-sidebar__indent -z-1"></div></template><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative left-sidebar__icon shrink-0"><img x-bind:src="node.icon || dirOpen" class="left-sidebar__icon" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"></div><div class="crop-ellipsis" x-text="node.display_name"></div></div></a></sprocket-tooltip></template><template x-for="node in searchedNodes"><li class="left-sidebar__search-result-item"><p class="text-xs text-slate-500 crop-ellipsis" x-text="node.parent"></p><div class="left-sidebar__search-result-item-container"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Node icon"><sprocket-tooltip class="crop-ellipsis" x-bind:content="node.display_name"><a x-bind:href="node.href" x-text="node.display_name"></a></sprocket-tooltip></div></li></template><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex place-content-center"><img src="../../assets/search.svg" class="size-8" alt="Search icon"></li><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex gap-1 place-content-center text-center break-words whitespace-normal text-sm text-slate-500"><span x-text="'No results found for'"></span><span x-text="`&quot;${search}&quot;`" class="text-slate-50"></span></li></ul><ul x-show="showWorkflows &amp;&amp; search === ''" class="left-sidebar__content"><li class=""><div class="left-sidebar__row"><img src="../../assets/category-selected.svg" class="left-sidebar__icon" alt="Category icon"><p class="text-slate-50">Other</p></div><ul class=""><a href="../flag_filter/validate_flag_filter-workflow.html" x-data="{
+            }" x-cloak x-init="$nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__container"><div class="sticky px-4"><a href="../../index.html"><img src="../../assets/logo.svg" class="w-[120px] flex-none mb-8 block light:hidden" alt="Logo"><img src="../../assets/logo.light.svg" class="w-[120px] flex-none mb-8 hidden light:block" alt="Logo"></a><div class="relative w-full h-10"><input id="searchbox" x-model.debounce="search" type="text" placeholder="Search..." class="left-sidebar__searchbox"><img src="../../assets/search.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none block light:hidden" alt="Search icon"><img src="../../assets/search.light.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none hidden light:block" alt="Search icon"><img src="../../assets/x-mark.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer block light:hidden" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"><img src="../../assets/x-mark.light.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer hidden light:block" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"></div><div class="left-sidebar__tabs-container mt-4"><button x-on:click="showWorkflows = true; search = ''; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="! showWorkflows ? 'opacity-40 light:opacity-60 hover:opacity-80' : ''"><img src="../../assets/list-bullet-selected.svg" class="left-sidebar__icon block light:hidden" alt="List icon"><img src="../../assets/list-bullet-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="List icon"><p>Workflows</p></button><button x-on:click="showWorkflows = false; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="showWorkflows ? 'opacity-50 light:opacity-60 hover:opacity-80' : ''"><img src="../../assets/folder-selected.svg" class="left-sidebar__icon block light:hidden" alt="List icon"><img src="../../assets/folder-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="List icon"><p>Full Directory</p></button></div></div><div x-cloak class="left-sidebar__content-container pt-4"><ul x-show="! showWorkflows || search != ''" class="left-sidebar__content"><sprocket-tooltip content="docs" class="block"><a href="../../index.html" x-show="search === ''" aria-label="docs" class="left-sidebar__row hover:bg-slate-700"><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative shrink-0"><img src="../../assets/dir-open.svg" class="left-sidebar__icon block light:hidden" alt="Directory icon"><img src="../../assets/dir-open.light.svg" class="left-sidebar__icon hidden light:block" alt="Directory icon"></div><div class="text-slate-50">docs</div></div></a></sprocket-tooltip><template x-for="node in shownNodes"><sprocket-tooltip x-bind:content="node.display_name" class="block isolate"><a x-bind:href="node.href" x-show="showSelfCache[node.key]" x-on:click="if (node.href === null) toggleChildren(node.key)" x-bind:aria-label="node.display_name" class="left-sidebar__row" x-bind:class="`${node.current ? 'is-scrolled-to left-sidebar__row--active' : (node.href === null) ? showChildrenCache[node.key] ? 'left-sidebar__row-folder left-sidebar__row-folder--open' : 'left-sidebar__row-folder left-sidebar__row-folder--closed' : 'left-sidebar__row-page'} ${node.ancestor ? 'left-sidebar__content-item-container--ancestor' : ''}`"><template x-for="i in Array.from({ length: node.nest_level })"><div class="left-sidebar__indent -z-1"></div></template><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative left-sidebar__icon shrink-0"><img x-bind:src="node.icon || dirOpen" class="left-sidebar__icon block light:hidden" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"><img x-bind:src="(node.icon || dirOpen).replace('.svg', '.light.svg')" class="left-sidebar__icon hidden light:block" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"></div><div class="crop-ellipsis" x-text="node.display_name"></div></div></a></sprocket-tooltip></template><template x-for="node in searchedNodes"><li class="left-sidebar__search-result-item"><p class="text-xs text-slate-500 crop-ellipsis" x-text="node.parent"></p><div class="left-sidebar__search-result-item-container"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Node icon"><sprocket-tooltip class="crop-ellipsis" x-bind:content="node.display_name"><a x-bind:href="node.href" x-text="node.display_name"></a></sprocket-tooltip></div></li></template><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex place-content-center"><img src="../../assets/search.svg" class="size-8 block light:hidden" alt="Search icon"><img src="../../assets/search.light.svg" class="size-8 hidden light:block" alt="Search icon"></li><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex gap-1 place-content-center text-center break-words whitespace-normal text-sm text-slate-500"><span x-text="'No results found for'"></span><span x-text="`&quot;${search}&quot;`" class="text-slate-50"></span></li></ul><ul x-show="showWorkflows &amp;&amp; search === ''" class="left-sidebar__content"><li class=""><div class="left-sidebar__row"><img src="../../assets/category-selected.svg" class="left-sidebar__icon block light:hidden" alt="Category icon"><img src="../../assets/category-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="Category icon"><p class="text-slate-50">Other</p></div><ul class=""><a href="../flag_filter/validate_flag_filter-workflow.html" x-data="{
                                     node: {
                                         current: false,
                                         icon: '../../assets/workflow-unselected.svg',
                                     }
-                                }" class="left-sidebar__row" x-bind:class="node.current ? 'bg-slate-700/50 is-scrolled-to' : 'hover:bg-slate-800'"><div class="left-sidebar__indent -1"></div><div class="left-sidebar__content-item-container crop-ellipsis"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Workflow icon"><sprocket-tooltip content="validate_flag_filter" class="crop-ellipsis" x-bind:class="node.current ? 'text-slate-50' : 'group-hover:text-slate-50'"><span>validate_flag_filter</span></sprocket-tooltip></div></a></ul></li></ul></div></div></div><div class="layout__main-center"><div class="layout__main-center-content"><div><div class="flex gap-1 mb-3" x-show="showCenterButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../../assets/sidebar-icon-hide.svg" alt=""></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../../assets/sidebar-icon-default.svg" alt=""></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../../assets/sidebar-icon-expand.svg" alt=""></img></button></div><div class="layout__breadcrumbs"><div class="layout__breadcrumb-container"><a class="layout__breadcrumb-clickable" href="../../index.html">docs</a><span> / </span><span class="layout__breadcrumb-inactive">data_structures</span><span> / </span><span class="layout__breadcrumb-inactive">read_group</span></div></div></div><div class="main__container"><h1 id="title" class="main__title">read_group</h1><div class="main__badge-container"><div class="main__badge"><span class="main__badge-text">WDL Version</span><div class="main__badge-inner"><span class="main__badge-inner-text">1.1</span></div></div></div><div id="preamble" class="main__section"><div class="markdown-body"><p>Read groups are defined in the SAM spec</p>
+                                }" class="left-sidebar__row" x-bind:class="node.current ? 'bg-slate-700/50 is-scrolled-to' : 'hover:bg-slate-800'"><div class="left-sidebar__indent -1"></div><div class="left-sidebar__content-item-container crop-ellipsis"><img x-bind:src="node.icon?.replace('.svg', '.light.svg')" class="left-sidebar__icon" alt="Workflow icon"><sprocket-tooltip content="validate_flag_filter" class="crop-ellipsis" x-bind:class="node.current ? 'text-slate-50' : 'group-hover:text-slate-50'"><span>validate_flag_filter</span></sprocket-tooltip></div></a></ul></li></ul></div></div></div><div class="layout__main-center"><div class="layout__main-center-content"><div><div class="flex gap-1 mb-3" x-show="showCenterButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../../assets/sidebar-icon-hide.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-hide.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../../assets/sidebar-icon-default.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-default.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../../assets/sidebar-icon-expand.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-expand.light.svg" alt="" class="hidden light:block"></img></button></div><div class="flex flex-row-reverse items-start justify-between"><button x-on:click="
+                                document.documentElement.classList.toggle('light')
+                                localStorage.setItem('theme', document.documentElement.classList.contains('light') ? 'light' : 'dark')
+                                " class="border border-slate-700 rounded-md h-8 flex items-center justify-center text-slate-300 text-lg w-8 cursor-pointer hover:border-slate-500">☀︎</button><div class="layout__breadcrumbs"><div class="layout__breadcrumb-container"><a class="layout__breadcrumb-clickable" href="../../index.html">docs</a><span> / </span><span class="layout__breadcrumb-inactive">data_structures</span><span> / </span><span class="layout__breadcrumb-inactive">read_group</span></div></div></div></div><div class="main__container"><h1 id="title" class="main__title">read_group</h1><div class="main__badge-container"><div class="main__badge"><span class="main__badge-text">WDL Version</span><div class="main__badge-inner"><span class="main__badge-inner-text">1.1</span></div></div></div><div id="preamble" class="main__section"><div class="markdown-body"><p>Read groups are defined in the SAM spec</p>
 <ul>
 <li>ID: Read group identifier. Each Read Group must have a unique ID.
 The value of ID is used in the RG tags of alignment records.</li>
@@ -115,4 +118,4 @@
     }
 }
 </code></pre>
-</div></div><div class="main__section"><h2 id="toc" class="main__section-header">Table of Contents</h2><div class="main__grid-container"><div class="main__grid-toc-container"><div class="main__grid-header-cell">Page</div><div class="main__grid-header-cell">Type</div><div class="main__grid-header-cell">Description</div><div class="main__grid-header-separator"></div><div class="main__grid-row" x-data="{ description_expanded: false }"><div class="main__grid-cell"><a class="text-pink-400 hover:text-pink-300" href="ReadGroup-struct.html">ReadGroup</a></div><div class="main__grid-cell"><code>struct</code></div><div class="main__grid-cell">N/A</div><div x-show="description_expanded" class="main__grid-full-width-cell">ERROR</div></div><div class="main__grid-row-separator"></div><div class="main__grid-row" x-data="{ description_expanded: false }"><div class="main__grid-cell"><a class="text-violet-400 hover:text-violet-300" href="read_group_to_string-task.html">read_group_to_string</a></div><div class="main__grid-cell"><code>task</code></div><div class="main__grid-cell">Stringifies a ReadGroup struct</div><div x-show="description_expanded" class="main__grid-full-width-cell">Stringifies a ReadGroup struct</div></div><div class="main__grid-row-separator"></div><div class="main__grid-row" x-data="{ description_expanded: false }"><div class="main__grid-cell"><a class="text-violet-400 hover:text-violet-300" href="get_read_groups-task.html">get_read_groups</a></div><div class="main__grid-cell"><code>task</code></div><div class="main__grid-cell">Gets read group information from a BAM file and writes it out as JSON which is converted to a WDL struct.</div><div x-show="description_expanded" class="main__grid-full-width-cell">Gets read group information from a BAM file and writes it out as JSON which is converted to a WDL struct.</div></div><div class="main__grid-row-separator"></div><div class="main__grid-row" x-data="{ description_expanded: false }"><div class="main__grid-cell"><a class="text-violet-400 hover:text-violet-300" href="validate_read_group-task.html">validate_read_group</a></div><div class="main__grid-cell"><code>task</code></div><div class="main__grid-cell">Validate a ReadGroup struct's fields are defined</div><div x-show="description_expanded" class="main__grid-full-width-cell">Validate a ReadGroup struct's fields are defined</div></div></div></div></div></div></div></div><div class="layout__sidebar-right"><div class="right-sidebar__container"><div class="right-sidebar__header">ON THIS PAGE</div><a href="#preamble" class="right-sidebar__section-header">Preamble</a><a href="#toc" class="right-sidebar__section-header">Table of Contents</a><div class="right-sidebar__back-to-top-container"><a href="#title" class="right-sidebar__back-to-top"><span class="right-sidebar__back-to-top-icon">↑</span><span class="right-sidebar__back-to-top-text">Back to top</span></a></div></div></div></div></body></html>
\ No newline at end of file
+</div></div><div class="main__section"><h2 id="toc" class="main__section-header">Table of Contents</h2><div class="main__grid-container"><div class="main__grid-toc-container"><div class="main__grid-header-cell">Page</div><div class="main__grid-header-cell">Type</div><div class="main__grid-header-cell">Description</div><div class="main__grid-header-separator"></div><div class="main__grid-row" x-data="{ description_expanded: false }"><div class="main__grid-cell"><a class="text-brand-pink-400 hover:text-pink-200" href="ReadGroup-struct.html">ReadGroup</a></div><div class="main__grid-cell"><code>struct</code></div><div class="main__grid-cell">N/A</div><div x-show="description_expanded" class="main__grid-full-width-cell">ERROR</div></div><div class="main__grid-row-separator"></div><div class="main__grid-row" x-data="{ description_expanded: false }"><div class="main__grid-cell"><a class="text-brand-violet-400 hover:text-violet-200" href="read_group_to_string-task.html">read_group_to_string</a></div><div class="main__grid-cell"><code>task</code></div><div class="main__grid-cell">Stringifies a ReadGroup struct</div><div x-show="description_expanded" class="main__grid-full-width-cell">Stringifies a ReadGroup struct</div></div><div class="main__grid-row-separator"></div><div class="main__grid-row" x-data="{ description_expanded: false }"><div class="main__grid-cell"><a class="text-brand-violet-400 hover:text-violet-200" href="get_read_groups-task.html">get_read_groups</a></div><div class="main__grid-cell"><code>task</code></div><div class="main__grid-cell">Gets read group information from a BAM file and writes it out as JSON which is converted to a WDL struct.</div><div x-show="description_expanded" class="main__grid-full-width-cell">Gets read group information from a BAM file and writes it out as JSON which is converted to a WDL struct.</div></div><div class="main__grid-row-separator"></div><div class="main__grid-row" x-data="{ description_expanded: false }"><div class="main__grid-cell"><a class="text-brand-violet-400 hover:text-violet-200" href="validate_read_group-task.html">validate_read_group</a></div><div class="main__grid-cell"><code>task</code></div><div class="main__grid-cell">Validate a ReadGroup struct's fields are defined</div><div x-show="description_expanded" class="main__grid-full-width-cell">Validate a ReadGroup struct's fields are defined</div></div></div></div></div></div></div></div><div class="layout__sidebar-right"><div class="right-sidebar__container"><div class="right-sidebar__header">ON THIS PAGE</div><a href="#preamble" class="right-sidebar__section-header">Preamble</a><a href="#toc" class="right-sidebar__section-header">Table of Contents</a><div class="right-sidebar__back-to-top-container"><a href="#title" class="right-sidebar__back-to-top"><span class="right-sidebar__back-to-top-icon">↑</span><span class="right-sidebar__back-to-top-text">Back to top</span></a></div></div></div></div></body></html>
\ No newline at end of file
diff --git a/crates/wdl-doc/tests/output_docs/data_structures/read_group/read_group_to_string-task.html b/crates/wdl-doc/tests/output_docs/data_structures/read_group/read_group_to_string-task.html
index 9e1a232a..5c44397b 100644
--- a/crates/wdl-doc/tests/output_docs/data_structures/read_group/read_group_to_string-task.html
+++ b/crates/wdl-doc/tests/output_docs/data_structures/read_group/read_group_to_string-task.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html class="dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>read_group_to_string</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&amp;display=swap" rel="stylesheet"><script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script defer src="../../index.js"></script><link rel="stylesheet" type="text/css" href="../../style.css"></head><body class="body--base"><div class="layout__container layout__container--alt-layout" x-transition x-data="{
+<!DOCTYPE html><html x-data="{ DEFAULT_THEME: '' }" x-bind:class="(localStorage.getItem('theme') ?? DEFAULT_THEME) === 'light' ? 'light' : ''" x-cloak><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>read_group_to_string</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&amp;display=swap" rel="stylesheet"><script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script defer src="../../index.js"></script><link rel="stylesheet" type="text/css" href="../../style.css"></head><body class="body--base"><div class="layout__container layout__container--alt-layout" x-transition x-data="{
                 sidebarState: $persist(window.innerWidth &lt; 768 ? 'hidden' : 'normal').using(sessionStorage),
                 get showSidebarButtons() { return this.sidebarState !== 'hidden'; },
                 get showCenterButtons() { return this.sidebarState === 'hidden'; },
@@ -16,7 +16,7 @@
                 collapseSidebar() { this.sidebarState = 'hidden'; },
                 restoreSidebar() { this.sidebarState = 'normal'; },
                 expandSidebar() { this.sidebarState = 'xl'; }
-            }" x-bind:class="containerClasses"><div class="layout__sidebar-left" x-transition><div class="absolute top-5 right-2 flex gap-1 z-10" x-cloak x-show="showSidebarButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../../assets/sidebar-icon-hide.svg" alt=""></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../../assets/sidebar-icon-default.svg" alt=""></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../../assets/sidebar-icon-expand.svg" alt=""></img></button></div><div x-data="{
+            }" x-bind:class="containerClasses"><div class="layout__sidebar-left" x-transition><div class="absolute top-5 right-2 flex gap-1 z-10" x-cloak x-show="showSidebarButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../../assets/sidebar-icon-hide.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-hide.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../../assets/sidebar-icon-default.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-default.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../../assets/sidebar-icon-expand.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-expand.light.svg" alt="" class="hidden light:block"></img></button></div><div x-data="{
                 showWorkflows: $persist(false).using(sessionStorage),
                 search: $persist('').using(sessionStorage),
                 dirOpen: '../../assets/chevron-up.svg',
@@ -68,12 +68,15 @@
                         this.showChildrenCache[n.key] = true;
                     });
                 }
-            }" x-cloak x-init="$nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__container"><div class="sticky px-4"><a href="../../index.html"><img src="../../assets/logo.svg" class="w-[120px] flex-none mb-8" alt="Logo"></a><div class="relative w-full h-10"><input id="searchbox" x-model.debounce="search" type="text" placeholder="Search..." class="left-sidebar__searchbox"><img src="../../assets/search.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none" alt="Search icon"><img src="../../assets/x-mark.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"></div><div class="left-sidebar__tabs-container mt-4"><button x-on:click="showWorkflows = true; search = ''; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="! showWorkflows ? 'opacity-40 hover:opacity-80' : ''"><img src="../../assets/list-bullet-selected.svg" class="left-sidebar__icon" alt="List icon"><p>Workflows</p></button><button x-on:click="showWorkflows = false; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="showWorkflows ? 'opacity-40 hover:opacity-80' : ''"><img src="../../assets/folder-selected.svg" class="left-sidebar__icon" alt="List icon"><p>Full Directory</p></button></div></div><div x-cloak class="left-sidebar__content-container pt-4"><ul x-show="! showWorkflows || search != ''" class="left-sidebar__content"><sprocket-tooltip content="docs" class="block"><a href="../../index.html" x-show="search === ''" aria-label="docs" class="left-sidebar__row hover:bg-slate-700"><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative shrink-0"><img src="../../assets/dir-open.svg" class="left-sidebar__icon" alt="Directory icon"></div><div class="text-slate-50">docs</div></div></a></sprocket-tooltip><template x-for="node in shownNodes"><sprocket-tooltip x-bind:content="node.display_name" class="block isolate"><a x-bind:href="node.href" x-show="showSelfCache[node.key]" x-on:click="if (node.href === null) toggleChildren(node.key)" x-bind:aria-label="node.display_name" class="left-sidebar__row" x-bind:class="`${node.current ? 'is-scrolled-to left-sidebar__row--active' : (node.href === null) ? showChildrenCache[node.key] ? 'left-sidebar__row-folder left-sidebar__row-folder--open' : 'left-sidebar__row-folder left-sidebar__row-folder--closed' : 'left-sidebar__row-page'} ${node.ancestor ? 'left-sidebar__content-item-container--ancestor' : ''}`"><template x-for="i in Array.from({ length: node.nest_level })"><div class="left-sidebar__indent -z-1"></div></template><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative left-sidebar__icon shrink-0"><img x-bind:src="node.icon || dirOpen" class="left-sidebar__icon" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"></div><div class="crop-ellipsis" x-text="node.display_name"></div></div></a></sprocket-tooltip></template><template x-for="node in searchedNodes"><li class="left-sidebar__search-result-item"><p class="text-xs text-slate-500 crop-ellipsis" x-text="node.parent"></p><div class="left-sidebar__search-result-item-container"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Node icon"><sprocket-tooltip class="crop-ellipsis" x-bind:content="node.display_name"><a x-bind:href="node.href" x-text="node.display_name"></a></sprocket-tooltip></div></li></template><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex place-content-center"><img src="../../assets/search.svg" class="size-8" alt="Search icon"></li><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex gap-1 place-content-center text-center break-words whitespace-normal text-sm text-slate-500"><span x-text="'No results found for'"></span><span x-text="`&quot;${search}&quot;`" class="text-slate-50"></span></li></ul><ul x-show="showWorkflows &amp;&amp; search === ''" class="left-sidebar__content"><li class=""><div class="left-sidebar__row"><img src="../../assets/category-selected.svg" class="left-sidebar__icon" alt="Category icon"><p class="text-slate-50">Other</p></div><ul class=""><a href="../flag_filter/validate_flag_filter-workflow.html" x-data="{
+            }" x-cloak x-init="$nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__container"><div class="sticky px-4"><a href="../../index.html"><img src="../../assets/logo.svg" class="w-[120px] flex-none mb-8 block light:hidden" alt="Logo"><img src="../../assets/logo.light.svg" class="w-[120px] flex-none mb-8 hidden light:block" alt="Logo"></a><div class="relative w-full h-10"><input id="searchbox" x-model.debounce="search" type="text" placeholder="Search..." class="left-sidebar__searchbox"><img src="../../assets/search.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none block light:hidden" alt="Search icon"><img src="../../assets/search.light.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none hidden light:block" alt="Search icon"><img src="../../assets/x-mark.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer block light:hidden" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"><img src="../../assets/x-mark.light.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer hidden light:block" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"></div><div class="left-sidebar__tabs-container mt-4"><button x-on:click="showWorkflows = true; search = ''; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="! showWorkflows ? 'opacity-40 light:opacity-60 hover:opacity-80' : ''"><img src="../../assets/list-bullet-selected.svg" class="left-sidebar__icon block light:hidden" alt="List icon"><img src="../../assets/list-bullet-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="List icon"><p>Workflows</p></button><button x-on:click="showWorkflows = false; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="showWorkflows ? 'opacity-50 light:opacity-60 hover:opacity-80' : ''"><img src="../../assets/folder-selected.svg" class="left-sidebar__icon block light:hidden" alt="List icon"><img src="../../assets/folder-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="List icon"><p>Full Directory</p></button></div></div><div x-cloak class="left-sidebar__content-container pt-4"><ul x-show="! showWorkflows || search != ''" class="left-sidebar__content"><sprocket-tooltip content="docs" class="block"><a href="../../index.html" x-show="search === ''" aria-label="docs" class="left-sidebar__row hover:bg-slate-700"><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative shrink-0"><img src="../../assets/dir-open.svg" class="left-sidebar__icon block light:hidden" alt="Directory icon"><img src="../../assets/dir-open.light.svg" class="left-sidebar__icon hidden light:block" alt="Directory icon"></div><div class="text-slate-50">docs</div></div></a></sprocket-tooltip><template x-for="node in shownNodes"><sprocket-tooltip x-bind:content="node.display_name" class="block isolate"><a x-bind:href="node.href" x-show="showSelfCache[node.key]" x-on:click="if (node.href === null) toggleChildren(node.key)" x-bind:aria-label="node.display_name" class="left-sidebar__row" x-bind:class="`${node.current ? 'is-scrolled-to left-sidebar__row--active' : (node.href === null) ? showChildrenCache[node.key] ? 'left-sidebar__row-folder left-sidebar__row-folder--open' : 'left-sidebar__row-folder left-sidebar__row-folder--closed' : 'left-sidebar__row-page'} ${node.ancestor ? 'left-sidebar__content-item-container--ancestor' : ''}`"><template x-for="i in Array.from({ length: node.nest_level })"><div class="left-sidebar__indent -z-1"></div></template><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative left-sidebar__icon shrink-0"><img x-bind:src="node.icon || dirOpen" class="left-sidebar__icon block light:hidden" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"><img x-bind:src="(node.icon || dirOpen).replace('.svg', '.light.svg')" class="left-sidebar__icon hidden light:block" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"></div><div class="crop-ellipsis" x-text="node.display_name"></div></div></a></sprocket-tooltip></template><template x-for="node in searchedNodes"><li class="left-sidebar__search-result-item"><p class="text-xs text-slate-500 crop-ellipsis" x-text="node.parent"></p><div class="left-sidebar__search-result-item-container"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Node icon"><sprocket-tooltip class="crop-ellipsis" x-bind:content="node.display_name"><a x-bind:href="node.href" x-text="node.display_name"></a></sprocket-tooltip></div></li></template><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex place-content-center"><img src="../../assets/search.svg" class="size-8 block light:hidden" alt="Search icon"><img src="../../assets/search.light.svg" class="size-8 hidden light:block" alt="Search icon"></li><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex gap-1 place-content-center text-center break-words whitespace-normal text-sm text-slate-500"><span x-text="'No results found for'"></span><span x-text="`&quot;${search}&quot;`" class="text-slate-50"></span></li></ul><ul x-show="showWorkflows &amp;&amp; search === ''" class="left-sidebar__content"><li class=""><div class="left-sidebar__row"><img src="../../assets/category-selected.svg" class="left-sidebar__icon block light:hidden" alt="Category icon"><img src="../../assets/category-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="Category icon"><p class="text-slate-50">Other</p></div><ul class=""><a href="../flag_filter/validate_flag_filter-workflow.html" x-data="{
                                     node: {
                                         current: false,
                                         icon: '../../assets/workflow-unselected.svg',
                                     }
-                                }" class="left-sidebar__row" x-bind:class="node.current ? 'bg-slate-700/50 is-scrolled-to' : 'hover:bg-slate-800'"><div class="left-sidebar__indent -1"></div><div class="left-sidebar__content-item-container crop-ellipsis"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Workflow icon"><sprocket-tooltip content="validate_flag_filter" class="crop-ellipsis" x-bind:class="node.current ? 'text-slate-50' : 'group-hover:text-slate-50'"><span>validate_flag_filter</span></sprocket-tooltip></div></a></ul></li></ul></div></div></div><div class="layout__main-center"><div class="layout__main-center-content"><div><div class="flex gap-1 mb-3" x-show="showCenterButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../../assets/sidebar-icon-hide.svg" alt=""></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../../assets/sidebar-icon-default.svg" alt=""></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../../assets/sidebar-icon-expand.svg" alt=""></img></button></div><div class="layout__breadcrumbs"><div class="layout__breadcrumb-container"><a class="layout__breadcrumb-clickable" href="../../index.html">docs</a><span> / </span><span class="layout__breadcrumb-inactive">data_structures</span><span> / </span><a href="index.html" class="layout__breadcrumb-clickable">read_group</a><span> / </span><span class="layout__breadcrumb-inactive">read_group_to_string</span></div></div></div><div class="main__container"><span class="text-violet-400">Task</span><h1 id="title" class="main__title"><code>read_group_to_string</code></h1><div class="markdown-body mb-4">Stringifies a ReadGroup struct</div><div class="main__badge-container"><div class="main__badge"><span class="main__badge-text">WDL Version</span><div class="main__badge-inner"><span class="main__badge-inner-text">1.1</span></div></div></div><div x-data="{ unix: true }" class="main__run-with-container"><div class="main__run-with-label"><span class="main__run-with-label-text">RUN WITH</span><button x-on:click="unix = !unix" class="main__run-with-toggle"><div x-bind:class="unix ? 'main__run-with-toggle-label--active' : 'main__run-with-toggle-label--inactive'">Unix</div><div x-bind:class="!unix ? 'main__run-with-toggle-label--active' : 'main__run-with-toggle-label--inactive'">Windows</div></button></div><div class="main__run-with-content"><p class="main__run-with-content-text">sprocket run --entrypoint read_group_to_string <span x-show="unix">data_structures/read_group.wdl</span><span x-show="!unix">data_structures\read_group.wdl</span> [INPUTS]...</p></div></div><div class="main__section"><h2 id="inputs" class="main__section-header">Inputs</h2><h3 id="required-inputs" class="main__section-subheader">Required Inputs</h3><div class="main__grid-container"><div class="main__grid-req-inputs-container"><div class="main__grid-header-cell">Name</div><div class="main__grid-header-cell">Type</div><div class="main__grid-header-cell">Description</div><div class="main__grid-header-separator"></div><div class="main__grid-row" x-data="{ description_expanded: false }"><div class="main__grid-cell"><code>read_group</code></div><div class="main__grid-cell"><code>ReadGroup</code></div><div class="main__grid-cell">ReadGroup struct to stringify</div><div x-show="description_expanded" class="main__grid-full-width-cell">ReadGroup struct to stringify</div></div></div></div></div><div class="main__section"><h2 id="outputs" class="main__section-header">Outputs</h2><div class="main__grid-container"><div class="main__grid-non-req-param-container"><div class="main__grid-header-cell">Name</div><div class="main__grid-header-cell">Type</div><div class="main__grid-header-cell">Expression</div><div class="main__grid-header-cell">Description</div><div class="main__grid-header-separator"></div><div class="main__grid-row" x-data="{ description_expanded: false, expr_expanded: false }"><div class="main__grid-cell"><code>stringified_read_group</code></div><div class="main__grid-cell"><code>String</code></div><div class="main__grid-cell"><code>read_string(&quot;out.txt&quot;)</code></div><div class="main__grid-cell">Input ReadGroup as a string</div><div x-show="description_expanded" class="main__grid-full-width-cell">Input ReadGroup as a string</div><div x-show="expr_expanded" class="main__grid-full-width-cell"><sprocket-code language="wdl">read_string(&quot;out.txt&quot;)</sprocket-code></div></div></div></div></div><div class="main__section"><h2 id="runtime" class="main__section-header">Default Runtime Attributes</h2><div class="main__grid-container"><div class="main__grid-runtime-container"><div class="main__grid-header-cell">Attribute</div><div class="main__grid-header-cell">Value</div><div class="main__grid-header-separator"></div><div class="main__grid-row"><div class="main__grid-cell"><code>memory</code></div><div class="main__grid-cell"><code>&quot;4 GB&quot;</code></div></div><div class="main__grid-row-separator"></div><div class="main__grid-row"><div class="main__grid-cell"><code>disks</code></div><div class="main__grid-cell"><code>&quot;10 GB&quot;</code></div></div><div class="main__grid-row-separator"></div><div class="main__grid-row"><div class="main__grid-cell"><code>container</code></div><div class="main__grid-cell"><code>&quot;ghcr.io/stjudecloud/util:1.4.0&quot;</code></div></div><div class="main__grid-row-separator"></div><div class="main__grid-row"><div class="main__grid-cell"><code>maxRetries</code></div><div class="main__grid-cell"><code>1</code></div></div></div></div></div><div class="main__section"><h2 id="command" class="main__section-header">Command</h2><sprocket-code language="wdl" class="pt-8">{
+                                }" class="left-sidebar__row" x-bind:class="node.current ? 'bg-slate-700/50 is-scrolled-to' : 'hover:bg-slate-800'"><div class="left-sidebar__indent -1"></div><div class="left-sidebar__content-item-container crop-ellipsis"><img x-bind:src="node.icon?.replace('.svg', '.light.svg')" class="left-sidebar__icon" alt="Workflow icon"><sprocket-tooltip content="validate_flag_filter" class="crop-ellipsis" x-bind:class="node.current ? 'text-slate-50' : 'group-hover:text-slate-50'"><span>validate_flag_filter</span></sprocket-tooltip></div></a></ul></li></ul></div></div></div><div class="layout__main-center"><div class="layout__main-center-content"><div><div class="flex gap-1 mb-3" x-show="showCenterButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../../assets/sidebar-icon-hide.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-hide.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../../assets/sidebar-icon-default.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-default.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../../assets/sidebar-icon-expand.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-expand.light.svg" alt="" class="hidden light:block"></img></button></div><div class="flex flex-row-reverse items-start justify-between"><button x-on:click="
+                                document.documentElement.classList.toggle('light')
+                                localStorage.setItem('theme', document.documentElement.classList.contains('light') ? 'light' : 'dark')
+                                " class="border border-slate-700 rounded-md h-8 flex items-center justify-center text-slate-300 text-lg w-8 cursor-pointer hover:border-slate-500">☀︎</button><div class="layout__breadcrumbs"><div class="layout__breadcrumb-container"><a class="layout__breadcrumb-clickable" href="../../index.html">docs</a><span> / </span><span class="layout__breadcrumb-inactive">data_structures</span><span> / </span><a href="index.html" class="layout__breadcrumb-clickable">read_group</a><span> / </span><span class="layout__breadcrumb-inactive">read_group_to_string</span></div></div></div></div><div class="main__container"><span class="text-brand-violet-400">Task</span><h1 id="title" class="main__title"><code>read_group_to_string</code></h1><div class="markdown-body mb-4">Stringifies a ReadGroup struct</div><div class="main__badge-container"><div class="main__badge"><span class="main__badge-text">WDL Version</span><div class="main__badge-inner"><span class="main__badge-inner-text">1.1</span></div></div></div><div x-data="{ unix: true }" class="main__run-with-container"><div class="main__run-with-label"><span class="main__run-with-label-text">RUN WITH</span><button x-on:click="unix = !unix" class="main__run-with-toggle"><div x-bind:class="unix ? 'main__run-with-toggle-label--active' : 'main__run-with-toggle-label--inactive'">Unix</div><div x-bind:class="!unix ? 'main__run-with-toggle-label--active' : 'main__run-with-toggle-label--inactive'">Windows</div></button></div><div class="main__run-with-content"><p class="main__run-with-content-text">sprocket run --entrypoint read_group_to_string <span x-show="unix">data_structures/read_group.wdl</span><span x-show="!unix">data_structures\read_group.wdl</span> [INPUTS]...</p></div></div><div class="main__section"><h2 id="inputs" class="main__section-header">Inputs</h2><h3 id="required-inputs" class="main__section-subheader">Required Inputs</h3><div class="main__grid-container"><div class="main__grid-req-inputs-container"><div class="main__grid-header-cell">Name</div><div class="main__grid-header-cell">Type</div><div class="main__grid-header-cell">Description</div><div class="main__grid-header-separator"></div><div class="main__grid-row" x-data="{ description_expanded: false }"><div class="main__grid-cell"><code>read_group</code></div><div class="main__grid-cell"><code>ReadGroup</code></div><div class="main__grid-cell">ReadGroup struct to stringify</div><div x-show="description_expanded" class="main__grid-full-width-cell">ReadGroup struct to stringify</div></div></div></div></div><div class="main__section"><h2 id="outputs" class="main__section-header">Outputs</h2><div class="main__grid-container"><div class="main__grid-non-req-param-container"><div class="main__grid-header-cell">Name</div><div class="main__grid-header-cell">Type</div><div class="main__grid-header-cell">Expression</div><div class="main__grid-header-cell">Description</div><div class="main__grid-header-separator"></div><div class="main__grid-row" x-data="{ description_expanded: false, expr_expanded: false }"><div class="main__grid-cell"><code>stringified_read_group</code></div><div class="main__grid-cell"><code>String</code></div><div class="main__grid-cell"><code>read_string(&quot;out.txt&quot;)</code></div><div class="main__grid-cell">Input ReadGroup as a string</div><div x-show="description_expanded" class="main__grid-full-width-cell">Input ReadGroup as a string</div><div x-show="expr_expanded" class="main__grid-full-width-cell"><sprocket-code language="wdl">read_string(&quot;out.txt&quot;)</sprocket-code></div></div></div></div></div><div class="main__section"><h2 id="runtime" class="main__section-header">Default Runtime Attributes</h2><div class="main__grid-container"><div class="main__grid-runtime-container"><div class="main__grid-header-cell">Attribute</div><div class="main__grid-header-cell">Value</div><div class="main__grid-header-separator"></div><div class="main__grid-row"><div class="main__grid-cell"><code>memory</code></div><div class="main__grid-cell"><code>&quot;4 GB&quot;</code></div></div><div class="main__grid-row-separator"></div><div class="main__grid-row"><div class="main__grid-cell"><code>disks</code></div><div class="main__grid-cell"><code>&quot;10 GB&quot;</code></div></div><div class="main__grid-row-separator"></div><div class="main__grid-row"><div class="main__grid-cell"><code>container</code></div><div class="main__grid-cell"><code>&quot;ghcr.io/stjudecloud/util:1.4.0&quot;</code></div></div><div class="main__grid-row-separator"></div><div class="main__grid-row"><div class="main__grid-cell"><code>maxRetries</code></div><div class="main__grid-cell"><code>1</code></div></div></div></div></div><div class="main__section"><h2 id="command" class="main__section-header">Command</h2><sprocket-code language="wdl" class="pt-8">{
     echo -n &quot;~{&quot;ID:~{read_group.ID}&quot;}&quot;  # required field. All others optional
     echo -n &quot;~{if defined(read_group.BC) then &quot; BC:~{read_group.BC}&quot; else &quot;&quot;}&quot;
     echo -n &quot;~{if defined(read_group.CN) then &quot; CN:~{read_group.CN}&quot; else &quot;&quot;}&quot;
diff --git a/crates/wdl-doc/tests/output_docs/data_structures/read_group/validate_read_group-task.html b/crates/wdl-doc/tests/output_docs/data_structures/read_group/validate_read_group-task.html
index 73d76e9e..ffbd367f 100644
--- a/crates/wdl-doc/tests/output_docs/data_structures/read_group/validate_read_group-task.html
+++ b/crates/wdl-doc/tests/output_docs/data_structures/read_group/validate_read_group-task.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html class="dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>validate_read_group</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&amp;display=swap" rel="stylesheet"><script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script defer src="../../index.js"></script><link rel="stylesheet" type="text/css" href="../../style.css"></head><body class="body--base"><div class="layout__container layout__container--alt-layout" x-transition x-data="{
+<!DOCTYPE html><html x-data="{ DEFAULT_THEME: '' }" x-bind:class="(localStorage.getItem('theme') ?? DEFAULT_THEME) === 'light' ? 'light' : ''" x-cloak><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>validate_read_group</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&amp;display=swap" rel="stylesheet"><script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script defer src="../../index.js"></script><link rel="stylesheet" type="text/css" href="../../style.css"></head><body class="body--base"><div class="layout__container layout__container--alt-layout" x-transition x-data="{
                 sidebarState: $persist(window.innerWidth &lt; 768 ? 'hidden' : 'normal').using(sessionStorage),
                 get showSidebarButtons() { return this.sidebarState !== 'hidden'; },
                 get showCenterButtons() { return this.sidebarState === 'hidden'; },
@@ -16,7 +16,7 @@
                 collapseSidebar() { this.sidebarState = 'hidden'; },
                 restoreSidebar() { this.sidebarState = 'normal'; },
                 expandSidebar() { this.sidebarState = 'xl'; }
-            }" x-bind:class="containerClasses"><div class="layout__sidebar-left" x-transition><div class="absolute top-5 right-2 flex gap-1 z-10" x-cloak x-show="showSidebarButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../../assets/sidebar-icon-hide.svg" alt=""></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../../assets/sidebar-icon-default.svg" alt=""></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../../assets/sidebar-icon-expand.svg" alt=""></img></button></div><div x-data="{
+            }" x-bind:class="containerClasses"><div class="layout__sidebar-left" x-transition><div class="absolute top-5 right-2 flex gap-1 z-10" x-cloak x-show="showSidebarButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../../assets/sidebar-icon-hide.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-hide.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../../assets/sidebar-icon-default.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-default.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../../assets/sidebar-icon-expand.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-expand.light.svg" alt="" class="hidden light:block"></img></button></div><div x-data="{
                 showWorkflows: $persist(false).using(sessionStorage),
                 search: $persist('').using(sessionStorage),
                 dirOpen: '../../assets/chevron-up.svg',
@@ -68,12 +68,15 @@
                         this.showChildrenCache[n.key] = true;
                     });
                 }
-            }" x-cloak x-init="$nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__container"><div class="sticky px-4"><a href="../../index.html"><img src="../../assets/logo.svg" class="w-[120px] flex-none mb-8" alt="Logo"></a><div class="relative w-full h-10"><input id="searchbox" x-model.debounce="search" type="text" placeholder="Search..." class="left-sidebar__searchbox"><img src="../../assets/search.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none" alt="Search icon"><img src="../../assets/x-mark.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"></div><div class="left-sidebar__tabs-container mt-4"><button x-on:click="showWorkflows = true; search = ''; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="! showWorkflows ? 'opacity-40 hover:opacity-80' : ''"><img src="../../assets/list-bullet-selected.svg" class="left-sidebar__icon" alt="List icon"><p>Workflows</p></button><button x-on:click="showWorkflows = false; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="showWorkflows ? 'opacity-40 hover:opacity-80' : ''"><img src="../../assets/folder-selected.svg" class="left-sidebar__icon" alt="List icon"><p>Full Directory</p></button></div></div><div x-cloak class="left-sidebar__content-container pt-4"><ul x-show="! showWorkflows || search != ''" class="left-sidebar__content"><sprocket-tooltip content="docs" class="block"><a href="../../index.html" x-show="search === ''" aria-label="docs" class="left-sidebar__row hover:bg-slate-700"><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative shrink-0"><img src="../../assets/dir-open.svg" class="left-sidebar__icon" alt="Directory icon"></div><div class="text-slate-50">docs</div></div></a></sprocket-tooltip><template x-for="node in shownNodes"><sprocket-tooltip x-bind:content="node.display_name" class="block isolate"><a x-bind:href="node.href" x-show="showSelfCache[node.key]" x-on:click="if (node.href === null) toggleChildren(node.key)" x-bind:aria-label="node.display_name" class="left-sidebar__row" x-bind:class="`${node.current ? 'is-scrolled-to left-sidebar__row--active' : (node.href === null) ? showChildrenCache[node.key] ? 'left-sidebar__row-folder left-sidebar__row-folder--open' : 'left-sidebar__row-folder left-sidebar__row-folder--closed' : 'left-sidebar__row-page'} ${node.ancestor ? 'left-sidebar__content-item-container--ancestor' : ''}`"><template x-for="i in Array.from({ length: node.nest_level })"><div class="left-sidebar__indent -z-1"></div></template><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative left-sidebar__icon shrink-0"><img x-bind:src="node.icon || dirOpen" class="left-sidebar__icon" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"></div><div class="crop-ellipsis" x-text="node.display_name"></div></div></a></sprocket-tooltip></template><template x-for="node in searchedNodes"><li class="left-sidebar__search-result-item"><p class="text-xs text-slate-500 crop-ellipsis" x-text="node.parent"></p><div class="left-sidebar__search-result-item-container"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Node icon"><sprocket-tooltip class="crop-ellipsis" x-bind:content="node.display_name"><a x-bind:href="node.href" x-text="node.display_name"></a></sprocket-tooltip></div></li></template><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex place-content-center"><img src="../../assets/search.svg" class="size-8" alt="Search icon"></li><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex gap-1 place-content-center text-center break-words whitespace-normal text-sm text-slate-500"><span x-text="'No results found for'"></span><span x-text="`&quot;${search}&quot;`" class="text-slate-50"></span></li></ul><ul x-show="showWorkflows &amp;&amp; search === ''" class="left-sidebar__content"><li class=""><div class="left-sidebar__row"><img src="../../assets/category-selected.svg" class="left-sidebar__icon" alt="Category icon"><p class="text-slate-50">Other</p></div><ul class=""><a href="../flag_filter/validate_flag_filter-workflow.html" x-data="{
+            }" x-cloak x-init="$nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__container"><div class="sticky px-4"><a href="../../index.html"><img src="../../assets/logo.svg" class="w-[120px] flex-none mb-8 block light:hidden" alt="Logo"><img src="../../assets/logo.light.svg" class="w-[120px] flex-none mb-8 hidden light:block" alt="Logo"></a><div class="relative w-full h-10"><input id="searchbox" x-model.debounce="search" type="text" placeholder="Search..." class="left-sidebar__searchbox"><img src="../../assets/search.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none block light:hidden" alt="Search icon"><img src="../../assets/search.light.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none hidden light:block" alt="Search icon"><img src="../../assets/x-mark.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer block light:hidden" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"><img src="../../assets/x-mark.light.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer hidden light:block" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"></div><div class="left-sidebar__tabs-container mt-4"><button x-on:click="showWorkflows = true; search = ''; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="! showWorkflows ? 'opacity-40 light:opacity-60 hover:opacity-80' : ''"><img src="../../assets/list-bullet-selected.svg" class="left-sidebar__icon block light:hidden" alt="List icon"><img src="../../assets/list-bullet-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="List icon"><p>Workflows</p></button><button x-on:click="showWorkflows = false; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="showWorkflows ? 'opacity-50 light:opacity-60 hover:opacity-80' : ''"><img src="../../assets/folder-selected.svg" class="left-sidebar__icon block light:hidden" alt="List icon"><img src="../../assets/folder-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="List icon"><p>Full Directory</p></button></div></div><div x-cloak class="left-sidebar__content-container pt-4"><ul x-show="! showWorkflows || search != ''" class="left-sidebar__content"><sprocket-tooltip content="docs" class="block"><a href="../../index.html" x-show="search === ''" aria-label="docs" class="left-sidebar__row hover:bg-slate-700"><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative shrink-0"><img src="../../assets/dir-open.svg" class="left-sidebar__icon block light:hidden" alt="Directory icon"><img src="../../assets/dir-open.light.svg" class="left-sidebar__icon hidden light:block" alt="Directory icon"></div><div class="text-slate-50">docs</div></div></a></sprocket-tooltip><template x-for="node in shownNodes"><sprocket-tooltip x-bind:content="node.display_name" class="block isolate"><a x-bind:href="node.href" x-show="showSelfCache[node.key]" x-on:click="if (node.href === null) toggleChildren(node.key)" x-bind:aria-label="node.display_name" class="left-sidebar__row" x-bind:class="`${node.current ? 'is-scrolled-to left-sidebar__row--active' : (node.href === null) ? showChildrenCache[node.key] ? 'left-sidebar__row-folder left-sidebar__row-folder--open' : 'left-sidebar__row-folder left-sidebar__row-folder--closed' : 'left-sidebar__row-page'} ${node.ancestor ? 'left-sidebar__content-item-container--ancestor' : ''}`"><template x-for="i in Array.from({ length: node.nest_level })"><div class="left-sidebar__indent -z-1"></div></template><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative left-sidebar__icon shrink-0"><img x-bind:src="node.icon || dirOpen" class="left-sidebar__icon block light:hidden" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"><img x-bind:src="(node.icon || dirOpen).replace('.svg', '.light.svg')" class="left-sidebar__icon hidden light:block" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"></div><div class="crop-ellipsis" x-text="node.display_name"></div></div></a></sprocket-tooltip></template><template x-for="node in searchedNodes"><li class="left-sidebar__search-result-item"><p class="text-xs text-slate-500 crop-ellipsis" x-text="node.parent"></p><div class="left-sidebar__search-result-item-container"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Node icon"><sprocket-tooltip class="crop-ellipsis" x-bind:content="node.display_name"><a x-bind:href="node.href" x-text="node.display_name"></a></sprocket-tooltip></div></li></template><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex place-content-center"><img src="../../assets/search.svg" class="size-8 block light:hidden" alt="Search icon"><img src="../../assets/search.light.svg" class="size-8 hidden light:block" alt="Search icon"></li><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex gap-1 place-content-center text-center break-words whitespace-normal text-sm text-slate-500"><span x-text="'No results found for'"></span><span x-text="`&quot;${search}&quot;`" class="text-slate-50"></span></li></ul><ul x-show="showWorkflows &amp;&amp; search === ''" class="left-sidebar__content"><li class=""><div class="left-sidebar__row"><img src="../../assets/category-selected.svg" class="left-sidebar__icon block light:hidden" alt="Category icon"><img src="../../assets/category-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="Category icon"><p class="text-slate-50">Other</p></div><ul class=""><a href="../flag_filter/validate_flag_filter-workflow.html" x-data="{
                                     node: {
                                         current: false,
                                         icon: '../../assets/workflow-unselected.svg',
                                     }
-                                }" class="left-sidebar__row" x-bind:class="node.current ? 'bg-slate-700/50 is-scrolled-to' : 'hover:bg-slate-800'"><div class="left-sidebar__indent -1"></div><div class="left-sidebar__content-item-container crop-ellipsis"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Workflow icon"><sprocket-tooltip content="validate_flag_filter" class="crop-ellipsis" x-bind:class="node.current ? 'text-slate-50' : 'group-hover:text-slate-50'"><span>validate_flag_filter</span></sprocket-tooltip></div></a></ul></li></ul></div></div></div><div class="layout__main-center"><div class="layout__main-center-content"><div><div class="flex gap-1 mb-3" x-show="showCenterButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../../assets/sidebar-icon-hide.svg" alt=""></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../../assets/sidebar-icon-default.svg" alt=""></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../../assets/sidebar-icon-expand.svg" alt=""></img></button></div><div class="layout__breadcrumbs"><div class="layout__breadcrumb-container"><a class="layout__breadcrumb-clickable" href="../../index.html">docs</a><span> / </span><span class="layout__breadcrumb-inactive">data_structures</span><span> / </span><a href="index.html" class="layout__breadcrumb-clickable">read_group</a><span> / </span><span class="layout__breadcrumb-inactive">validate_read_group</span></div></div></div><div class="main__container"><span class="text-violet-400">Task</span><h1 id="title" class="main__title"><code>validate_read_group</code></h1><div class="markdown-body mb-4">Validate a ReadGroup struct's fields are defined</div><div class="main__badge-container"><div class="main__badge"><span class="main__badge-text">WDL Version</span><div class="main__badge-inner"><span class="main__badge-inner-text">1.1</span></div></div></div><div x-data="{ unix: true }" class="main__run-with-container"><div class="main__run-with-label"><span class="main__run-with-label-text">RUN WITH</span><button x-on:click="unix = !unix" class="main__run-with-toggle"><div x-bind:class="unix ? 'main__run-with-toggle-label--active' : 'main__run-with-toggle-label--inactive'">Unix</div><div x-bind:class="!unix ? 'main__run-with-toggle-label--active' : 'main__run-with-toggle-label--inactive'">Windows</div></button></div><div class="main__run-with-content"><p class="main__run-with-content-text">sprocket run --entrypoint validate_read_group <span x-show="unix">data_structures/read_group.wdl</span><span x-show="!unix">data_structures\read_group.wdl</span> [INPUTS]...</p></div></div><div class="main__section"><h2 id="inputs" class="main__section-header">Inputs</h2><h3 id="required-inputs" class="main__section-subheader">Required Inputs</h3><div class="main__grid-container"><div class="main__grid-req-inputs-container"><div class="main__grid-header-cell">Name</div><div class="main__grid-header-cell">Type</div><div class="main__grid-header-cell">Description</div><div class="main__grid-header-separator"></div><div class="main__grid-row" x-data="{ description_expanded: false }"><div class="main__grid-cell"><code>read_group</code></div><div class="main__grid-cell"><code>ReadGroup</code></div><div class="main__grid-cell">ReadGroup struct to validate</div><div x-show="description_expanded" class="main__grid-full-width-cell">ReadGroup struct to validate</div></div></div></div><h3 id="other-inputs" class="main__section-subheader">Other Inputs</h3><div class="main__grid-container"><div class="main__grid-non-req-param-container"><div class="main__grid-header-cell">Name</div><div class="main__grid-header-cell">Type</div><div class="main__grid-header-cell">Default</div><div class="main__grid-header-cell">Description</div><div class="main__grid-header-separator"></div><div class="main__grid-row" x-data="{ description_expanded: false, expr_expanded: false }"><div class="main__grid-cell"><code>required_fields</code></div><div class="main__grid-cell"><code>Array[String]</code></div><div class="main__grid-cell"><code>[]</code></div><div class="main__grid-cell">Array of read group fields that must be defined. The ID field is always required and does not need to be specified.</div><div x-show="description_expanded" class="main__grid-full-width-cell">Array of read group fields that must be defined. The ID field is always required and does not need to be specified.</div><div x-show="expr_expanded" class="main__grid-full-width-cell"><sprocket-code language="wdl">[]</sprocket-code></div></div><div class="main__grid-row-separator"></div><div class="main__grid-row" x-data="{ description_expanded: false, expr_expanded: false }"><div class="main__grid-cell"><code>restrictive</code></div><div class="main__grid-cell"><code>Boolean</code></div><div class="main__grid-cell"><code>true</code></div><div class="main__grid-cell">If true, run a less permissive validation of field values. Otherwise, check against SAM spec-defined values.</div><div x-show="description_expanded" class="main__grid-full-width-cell">If true, run a less permissive validation of field values. Otherwise, check against SAM spec-defined values.</div><div x-show="expr_expanded" class="main__grid-full-width-cell"><sprocket-code language="wdl">true</sprocket-code></div></div></div></div></div><div class="main__section"><h2 id="outputs" class="main__section-header">Outputs</h2><div class="main__grid-container"><div class="main__grid-non-req-param-container"><div class="main__grid-header-cell">Name</div><div class="main__grid-header-cell">Type</div><div class="main__grid-header-cell">Expression</div><div class="main__grid-header-cell">Description</div><div class="main__grid-header-separator"></div><div class="main__grid-row" x-data="{ description_expanded: false, expr_expanded: false }"><div class="main__grid-cell"><code>check</code></div><div class="main__grid-cell"><code>String</code></div><div class="main__grid-cell"><code>&quot;passed&quot;</code></div><div class="main__grid-cell">Dummy output to indicate success and enable call-caching</div><div x-show="description_expanded" class="main__grid-full-width-cell">Dummy output to indicate success and enable call-caching</div><div x-show="expr_expanded" class="main__grid-full-width-cell"><sprocket-code language="wdl">&quot;passed&quot;</sprocket-code></div></div></div></div></div><div class="main__section"><h2 id="runtime" class="main__section-header">Default Runtime Attributes</h2><div class="main__grid-container"><div class="main__grid-runtime-container"><div class="main__grid-header-cell">Attribute</div><div class="main__grid-header-cell">Value</div><div class="main__grid-header-separator"></div><div class="main__grid-row"><div class="main__grid-cell"><code>memory</code></div><div class="main__grid-cell"><code>&quot;4 GB&quot;</code></div></div><div class="main__grid-row-separator"></div><div class="main__grid-row"><div class="main__grid-cell"><code>disks</code></div><div class="main__grid-cell"><code>&quot;10 GB&quot;</code></div></div><div class="main__grid-row-separator"></div><div class="main__grid-row"><div class="main__grid-cell"><code>container</code></div><div class="main__grid-cell"><code>&quot;ghcr.io/stjudecloud/util:1.4.0&quot;</code></div></div><div class="main__grid-row-separator"></div><div class="main__grid-row"><div class="main__grid-cell"><code>maxRetries</code></div><div class="main__grid-cell"><code>0</code></div></div></div></div></div><div class="main__section"><h2 id="command" class="main__section-header">Command</h2><sprocket-code language="wdl" class="pt-8">error=0
+                                }" class="left-sidebar__row" x-bind:class="node.current ? 'bg-slate-700/50 is-scrolled-to' : 'hover:bg-slate-800'"><div class="left-sidebar__indent -1"></div><div class="left-sidebar__content-item-container crop-ellipsis"><img x-bind:src="node.icon?.replace('.svg', '.light.svg')" class="left-sidebar__icon" alt="Workflow icon"><sprocket-tooltip content="validate_flag_filter" class="crop-ellipsis" x-bind:class="node.current ? 'text-slate-50' : 'group-hover:text-slate-50'"><span>validate_flag_filter</span></sprocket-tooltip></div></a></ul></li></ul></div></div></div><div class="layout__main-center"><div class="layout__main-center-content"><div><div class="flex gap-1 mb-3" x-show="showCenterButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../../assets/sidebar-icon-hide.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-hide.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../../assets/sidebar-icon-default.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-default.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../../assets/sidebar-icon-expand.svg" alt="" class="block light:hidden"></img><img src="../../assets/sidebar-icon-expand.light.svg" alt="" class="hidden light:block"></img></button></div><div class="flex flex-row-reverse items-start justify-between"><button x-on:click="
+                                document.documentElement.classList.toggle('light')
+                                localStorage.setItem('theme', document.documentElement.classList.contains('light') ? 'light' : 'dark')
+                                " class="border border-slate-700 rounded-md h-8 flex items-center justify-center text-slate-300 text-lg w-8 cursor-pointer hover:border-slate-500">☀︎</button><div class="layout__breadcrumbs"><div class="layout__breadcrumb-container"><a class="layout__breadcrumb-clickable" href="../../index.html">docs</a><span> / </span><span class="layout__breadcrumb-inactive">data_structures</span><span> / </span><a href="index.html" class="layout__breadcrumb-clickable">read_group</a><span> / </span><span class="layout__breadcrumb-inactive">validate_read_group</span></div></div></div></div><div class="main__container"><span class="text-brand-violet-400">Task</span><h1 id="title" class="main__title"><code>validate_read_group</code></h1><div class="markdown-body mb-4">Validate a ReadGroup struct's fields are defined</div><div class="main__badge-container"><div class="main__badge"><span class="main__badge-text">WDL Version</span><div class="main__badge-inner"><span class="main__badge-inner-text">1.1</span></div></div></div><div x-data="{ unix: true }" class="main__run-with-container"><div class="main__run-with-label"><span class="main__run-with-label-text">RUN WITH</span><button x-on:click="unix = !unix" class="main__run-with-toggle"><div x-bind:class="unix ? 'main__run-with-toggle-label--active' : 'main__run-with-toggle-label--inactive'">Unix</div><div x-bind:class="!unix ? 'main__run-with-toggle-label--active' : 'main__run-with-toggle-label--inactive'">Windows</div></button></div><div class="main__run-with-content"><p class="main__run-with-content-text">sprocket run --entrypoint validate_read_group <span x-show="unix">data_structures/read_group.wdl</span><span x-show="!unix">data_structures\read_group.wdl</span> [INPUTS]...</p></div></div><div class="main__section"><h2 id="inputs" class="main__section-header">Inputs</h2><h3 id="required-inputs" class="main__section-subheader">Required Inputs</h3><div class="main__grid-container"><div class="main__grid-req-inputs-container"><div class="main__grid-header-cell">Name</div><div class="main__grid-header-cell">Type</div><div class="main__grid-header-cell">Description</div><div class="main__grid-header-separator"></div><div class="main__grid-row" x-data="{ description_expanded: false }"><div class="main__grid-cell"><code>read_group</code></div><div class="main__grid-cell"><code>ReadGroup</code></div><div class="main__grid-cell">ReadGroup struct to validate</div><div x-show="description_expanded" class="main__grid-full-width-cell">ReadGroup struct to validate</div></div></div></div><h3 id="other-inputs" class="main__section-subheader">Other Inputs</h3><div class="main__grid-container"><div class="main__grid-non-req-param-container"><div class="main__grid-header-cell">Name</div><div class="main__grid-header-cell">Type</div><div class="main__grid-header-cell">Default</div><div class="main__grid-header-cell">Description</div><div class="main__grid-header-separator"></div><div class="main__grid-row" x-data="{ description_expanded: false, expr_expanded: false }"><div class="main__grid-cell"><code>required_fields</code></div><div class="main__grid-cell"><code>Array[String]</code></div><div class="main__grid-cell"><code>[]</code></div><div class="main__grid-cell">Array of read group fields that must be defined. The ID field is always required and does not need to be specified.</div><div x-show="description_expanded" class="main__grid-full-width-cell">Array of read group fields that must be defined. The ID field is always required and does not need to be specified.</div><div x-show="expr_expanded" class="main__grid-full-width-cell"><sprocket-code language="wdl">[]</sprocket-code></div></div><div class="main__grid-row-separator"></div><div class="main__grid-row" x-data="{ description_expanded: false, expr_expanded: false }"><div class="main__grid-cell"><code>restrictive</code></div><div class="main__grid-cell"><code>Boolean</code></div><div class="main__grid-cell"><code>true</code></div><div class="main__grid-cell">If true, run a less permissive validation of field values. Otherwise, check against SAM spec-defined values.</div><div x-show="description_expanded" class="main__grid-full-width-cell">If true, run a less permissive validation of field values. Otherwise, check against SAM spec-defined values.</div><div x-show="expr_expanded" class="main__grid-full-width-cell"><sprocket-code language="wdl">true</sprocket-code></div></div></div></div></div><div class="main__section"><h2 id="outputs" class="main__section-header">Outputs</h2><div class="main__grid-container"><div class="main__grid-non-req-param-container"><div class="main__grid-header-cell">Name</div><div class="main__grid-header-cell">Type</div><div class="main__grid-header-cell">Expression</div><div class="main__grid-header-cell">Description</div><div class="main__grid-header-separator"></div><div class="main__grid-row" x-data="{ description_expanded: false, expr_expanded: false }"><div class="main__grid-cell"><code>check</code></div><div class="main__grid-cell"><code>String</code></div><div class="main__grid-cell"><code>&quot;passed&quot;</code></div><div class="main__grid-cell">Dummy output to indicate success and enable call-caching</div><div x-show="description_expanded" class="main__grid-full-width-cell">Dummy output to indicate success and enable call-caching</div><div x-show="expr_expanded" class="main__grid-full-width-cell"><sprocket-code language="wdl">&quot;passed&quot;</sprocket-code></div></div></div></div></div><div class="main__section"><h2 id="runtime" class="main__section-header">Default Runtime Attributes</h2><div class="main__grid-container"><div class="main__grid-runtime-container"><div class="main__grid-header-cell">Attribute</div><div class="main__grid-header-cell">Value</div><div class="main__grid-header-separator"></div><div class="main__grid-row"><div class="main__grid-cell"><code>memory</code></div><div class="main__grid-cell"><code>&quot;4 GB&quot;</code></div></div><div class="main__grid-row-separator"></div><div class="main__grid-row"><div class="main__grid-cell"><code>disks</code></div><div class="main__grid-cell"><code>&quot;10 GB&quot;</code></div></div><div class="main__grid-row-separator"></div><div class="main__grid-row"><div class="main__grid-cell"><code>container</code></div><div class="main__grid-cell"><code>&quot;ghcr.io/stjudecloud/util:1.4.0&quot;</code></div></div><div class="main__grid-row-separator"></div><div class="main__grid-row"><div class="main__grid-cell"><code>maxRetries</code></div><div class="main__grid-cell"><code>0</code></div></div></div></div></div><div class="main__section"><h2 id="command" class="main__section-header">Command</h2><sprocket-code language="wdl" class="pt-8">error=0
 if [[ ~{restrictive} == &quot;true&quot; ]]
 then
     if [[ ~{read_group.ID} =~ ^~{id_pattern}$ ]] \
diff --git a/crates/wdl-doc/tests/output_docs/index.html b/crates/wdl-doc/tests/output_docs/index.html
index b3860157..ca0bf13b 100644
--- a/crates/wdl-doc/tests/output_docs/index.html
+++ b/crates/wdl-doc/tests/output_docs/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html class="dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Home</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&amp;display=swap" rel="stylesheet"><script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script defer src="index.js"></script><link rel="stylesheet" type="text/css" href="style.css"></head><body class="body--base"><div class="layout__container layout__container--alt-layout" x-transition x-data="{
+<!DOCTYPE html><html x-data="{ DEFAULT_THEME: '' }" x-bind:class="(localStorage.getItem('theme') ?? DEFAULT_THEME) === 'light' ? 'light' : ''" x-cloak><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Home</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&amp;display=swap" rel="stylesheet"><script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script defer src="index.js"></script><link rel="stylesheet" type="text/css" href="style.css"></head><body class="body--base"><div class="layout__container layout__container--alt-layout" x-transition x-data="{
                 sidebarState: $persist(window.innerWidth &lt; 768 ? 'hidden' : 'normal').using(sessionStorage),
                 get showSidebarButtons() { return this.sidebarState !== 'hidden'; },
                 get showCenterButtons() { return this.sidebarState === 'hidden'; },
@@ -16,7 +16,7 @@
                 collapseSidebar() { this.sidebarState = 'hidden'; },
                 restoreSidebar() { this.sidebarState = 'normal'; },
                 expandSidebar() { this.sidebarState = 'xl'; }
-            }" x-bind:class="containerClasses"><div class="layout__sidebar-left" x-transition><div class="absolute top-5 right-2 flex gap-1 z-10" x-cloak x-show="showSidebarButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="assets/sidebar-icon-hide.svg" alt=""></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="assets/sidebar-icon-default.svg" alt=""></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="assets/sidebar-icon-expand.svg" alt=""></img></button></div><div x-data="{
+            }" x-bind:class="containerClasses"><div class="layout__sidebar-left" x-transition><div class="absolute top-5 right-2 flex gap-1 z-10" x-cloak x-show="showSidebarButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="assets/sidebar-icon-hide.svg" alt="" class="block light:hidden"></img><img src="assets/sidebar-icon-hide.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="assets/sidebar-icon-default.svg" alt="" class="block light:hidden"></img><img src="assets/sidebar-icon-default.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="assets/sidebar-icon-expand.svg" alt="" class="block light:hidden"></img><img src="assets/sidebar-icon-expand.light.svg" alt="" class="hidden light:block"></img></button></div><div x-data="{
                 showWorkflows: $persist(false).using(sessionStorage),
                 search: $persist('').using(sessionStorage),
                 dirOpen: 'assets/chevron-up.svg',
@@ -68,9 +68,12 @@
                         this.showChildrenCache[n.key] = true;
                     });
                 }
-            }" x-cloak x-init="$nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__container"><div class="sticky px-4"><a href="index.html"><img src="assets/logo.svg" class="w-[120px] flex-none mb-8" alt="Logo"></a><div class="relative w-full h-10"><input id="searchbox" x-model.debounce="search" type="text" placeholder="Search..." class="left-sidebar__searchbox"><img src="assets/search.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none" alt="Search icon"><img src="assets/x-mark.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"></div><div class="left-sidebar__tabs-container mt-4"><button x-on:click="showWorkflows = true; search = ''; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="! showWorkflows ? 'opacity-40 hover:opacity-80' : ''"><img src="assets/list-bullet-selected.svg" class="left-sidebar__icon" alt="List icon"><p>Workflows</p></button><button x-on:click="showWorkflows = false; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="showWorkflows ? 'opacity-40 hover:opacity-80' : ''"><img src="assets/folder-selected.svg" class="left-sidebar__icon" alt="List icon"><p>Full Directory</p></button></div></div><div x-cloak class="left-sidebar__content-container pt-4"><ul x-show="! showWorkflows || search != ''" class="left-sidebar__content"><sprocket-tooltip content="docs" class="block"><a href="index.html" x-show="search === ''" aria-label="docs" class="left-sidebar__row hover:bg-slate-700"><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative shrink-0"><img src="assets/dir-open.svg" class="left-sidebar__icon" alt="Directory icon"></div><div class="text-slate-50">docs</div></div></a></sprocket-tooltip><template x-for="node in shownNodes"><sprocket-tooltip x-bind:content="node.display_name" class="block isolate"><a x-bind:href="node.href" x-show="showSelfCache[node.key]" x-on:click="if (node.href === null) toggleChildren(node.key)" x-bind:aria-label="node.display_name" class="left-sidebar__row" x-bind:class="`${node.current ? 'is-scrolled-to left-sidebar__row--active' : (node.href === null) ? showChildrenCache[node.key] ? 'left-sidebar__row-folder left-sidebar__row-folder--open' : 'left-sidebar__row-folder left-sidebar__row-folder--closed' : 'left-sidebar__row-page'} ${node.ancestor ? 'left-sidebar__content-item-container--ancestor' : ''}`"><template x-for="i in Array.from({ length: node.nest_level })"><div class="left-sidebar__indent -z-1"></div></template><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative left-sidebar__icon shrink-0"><img x-bind:src="node.icon || dirOpen" class="left-sidebar__icon" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"></div><div class="crop-ellipsis" x-text="node.display_name"></div></div></a></sprocket-tooltip></template><template x-for="node in searchedNodes"><li class="left-sidebar__search-result-item"><p class="text-xs text-slate-500 crop-ellipsis" x-text="node.parent"></p><div class="left-sidebar__search-result-item-container"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Node icon"><sprocket-tooltip class="crop-ellipsis" x-bind:content="node.display_name"><a x-bind:href="node.href" x-text="node.display_name"></a></sprocket-tooltip></div></li></template><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex place-content-center"><img src="assets/search.svg" class="size-8" alt="Search icon"></li><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex gap-1 place-content-center text-center break-words whitespace-normal text-sm text-slate-500"><span x-text="'No results found for'"></span><span x-text="`&quot;${search}&quot;`" class="text-slate-50"></span></li></ul><ul x-show="showWorkflows &amp;&amp; search === ''" class="left-sidebar__content"><li class=""><div class="left-sidebar__row"><img src="assets/category-selected.svg" class="left-sidebar__icon" alt="Category icon"><p class="text-slate-50">Other</p></div><ul class=""><a href="data_structures/flag_filter/validate_flag_filter-workflow.html" x-data="{
+            }" x-cloak x-init="$nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__container"><div class="sticky px-4"><a href="index.html"><img src="assets/logo.svg" class="w-[120px] flex-none mb-8 block light:hidden" alt="Logo"><img src="assets/logo.light.svg" class="w-[120px] flex-none mb-8 hidden light:block" alt="Logo"></a><div class="relative w-full h-10"><input id="searchbox" x-model.debounce="search" type="text" placeholder="Search..." class="left-sidebar__searchbox"><img src="assets/search.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none block light:hidden" alt="Search icon"><img src="assets/search.light.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none hidden light:block" alt="Search icon"><img src="assets/x-mark.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer block light:hidden" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"><img src="assets/x-mark.light.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer hidden light:block" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"></div><div class="left-sidebar__tabs-container mt-4"><button x-on:click="showWorkflows = true; search = ''; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="! showWorkflows ? 'opacity-40 light:opacity-60 hover:opacity-80' : ''"><img src="assets/list-bullet-selected.svg" class="left-sidebar__icon block light:hidden" alt="List icon"><img src="assets/list-bullet-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="List icon"><p>Workflows</p></button><button x-on:click="showWorkflows = false; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="showWorkflows ? 'opacity-50 light:opacity-60 hover:opacity-80' : ''"><img src="assets/folder-selected.svg" class="left-sidebar__icon block light:hidden" alt="List icon"><img src="assets/folder-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="List icon"><p>Full Directory</p></button></div></div><div x-cloak class="left-sidebar__content-container pt-4"><ul x-show="! showWorkflows || search != ''" class="left-sidebar__content"><sprocket-tooltip content="docs" class="block"><a href="index.html" x-show="search === ''" aria-label="docs" class="left-sidebar__row hover:bg-slate-700"><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative shrink-0"><img src="assets/dir-open.svg" class="left-sidebar__icon block light:hidden" alt="Directory icon"><img src="assets/dir-open.light.svg" class="left-sidebar__icon hidden light:block" alt="Directory icon"></div><div class="text-slate-50">docs</div></div></a></sprocket-tooltip><template x-for="node in shownNodes"><sprocket-tooltip x-bind:content="node.display_name" class="block isolate"><a x-bind:href="node.href" x-show="showSelfCache[node.key]" x-on:click="if (node.href === null) toggleChildren(node.key)" x-bind:aria-label="node.display_name" class="left-sidebar__row" x-bind:class="`${node.current ? 'is-scrolled-to left-sidebar__row--active' : (node.href === null) ? showChildrenCache[node.key] ? 'left-sidebar__row-folder left-sidebar__row-folder--open' : 'left-sidebar__row-folder left-sidebar__row-folder--closed' : 'left-sidebar__row-page'} ${node.ancestor ? 'left-sidebar__content-item-container--ancestor' : ''}`"><template x-for="i in Array.from({ length: node.nest_level })"><div class="left-sidebar__indent -z-1"></div></template><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative left-sidebar__icon shrink-0"><img x-bind:src="node.icon || dirOpen" class="left-sidebar__icon block light:hidden" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"><img x-bind:src="(node.icon || dirOpen).replace('.svg', '.light.svg')" class="left-sidebar__icon hidden light:block" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"></div><div class="crop-ellipsis" x-text="node.display_name"></div></div></a></sprocket-tooltip></template><template x-for="node in searchedNodes"><li class="left-sidebar__search-result-item"><p class="text-xs text-slate-500 crop-ellipsis" x-text="node.parent"></p><div class="left-sidebar__search-result-item-container"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Node icon"><sprocket-tooltip class="crop-ellipsis" x-bind:content="node.display_name"><a x-bind:href="node.href" x-text="node.display_name"></a></sprocket-tooltip></div></li></template><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex place-content-center"><img src="assets/search.svg" class="size-8 block light:hidden" alt="Search icon"><img src="assets/search.light.svg" class="size-8 hidden light:block" alt="Search icon"></li><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex gap-1 place-content-center text-center break-words whitespace-normal text-sm text-slate-500"><span x-text="'No results found for'"></span><span x-text="`&quot;${search}&quot;`" class="text-slate-50"></span></li></ul><ul x-show="showWorkflows &amp;&amp; search === ''" class="left-sidebar__content"><li class=""><div class="left-sidebar__row"><img src="assets/category-selected.svg" class="left-sidebar__icon block light:hidden" alt="Category icon"><img src="assets/category-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="Category icon"><p class="text-slate-50">Other</p></div><ul class=""><a href="data_structures/flag_filter/validate_flag_filter-workflow.html" x-data="{
                                     node: {
                                         current: false,
                                         icon: 'assets/workflow-unselected.svg',
                                     }
-                                }" class="left-sidebar__row" x-bind:class="node.current ? 'bg-slate-700/50 is-scrolled-to' : 'hover:bg-slate-800'"><div class="left-sidebar__indent -1"></div><div class="left-sidebar__content-item-container crop-ellipsis"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Workflow icon"><sprocket-tooltip content="validate_flag_filter" class="crop-ellipsis" x-bind:class="node.current ? 'text-slate-50' : 'group-hover:text-slate-50'"><span>validate_flag_filter</span></sprocket-tooltip></div></a></ul></li></ul></div></div></div><div class="layout__main-center"><div class="layout__main-center-content"><div><div class="flex gap-1 mb-3" x-show="showCenterButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="assets/sidebar-icon-hide.svg" alt=""></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="assets/sidebar-icon-default.svg" alt=""></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="assets/sidebar-icon-expand.svg" alt=""></img></button></div></div><h5 class="main__homepage-header">Home</h5><div class="main__section--empty"><img src="assets/missing-home.svg" class="size-12" alt="Missing home icon"><h2 class="main__section-header">There's nothing to see on this page</h2><p>The markdown file for this page wasn't supplied.</p></div></div></div><div class="layout__sidebar-right"><div class="right-sidebar__container"><div class="right-sidebar__header">ON THIS PAGE</div><div class="right-sidebar__back-to-top-container"><a href="#title" class="right-sidebar__back-to-top"><span class="right-sidebar__back-to-top-icon">↑</span><span class="right-sidebar__back-to-top-text">Back to top</span></a></div></div></div></div></body></html>
\ No newline at end of file
+                                }" class="left-sidebar__row" x-bind:class="node.current ? 'bg-slate-700/50 is-scrolled-to' : 'hover:bg-slate-800'"><div class="left-sidebar__indent -1"></div><div class="left-sidebar__content-item-container crop-ellipsis"><img x-bind:src="node.icon?.replace('.svg', '.light.svg')" class="left-sidebar__icon" alt="Workflow icon"><sprocket-tooltip content="validate_flag_filter" class="crop-ellipsis" x-bind:class="node.current ? 'text-slate-50' : 'group-hover:text-slate-50'"><span>validate_flag_filter</span></sprocket-tooltip></div></a></ul></li></ul></div></div></div><div class="layout__main-center"><div class="layout__main-center-content"><div><div class="flex gap-1 mb-3" x-show="showCenterButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="assets/sidebar-icon-hide.svg" alt="" class="block light:hidden"></img><img src="assets/sidebar-icon-hide.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="assets/sidebar-icon-default.svg" alt="" class="block light:hidden"></img><img src="assets/sidebar-icon-default.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="assets/sidebar-icon-expand.svg" alt="" class="block light:hidden"></img><img src="assets/sidebar-icon-expand.light.svg" alt="" class="hidden light:block"></img></button></div><div class="flex flex-row-reverse items-start justify-between"><button x-on:click="
+                                document.documentElement.classList.toggle('light')
+                                localStorage.setItem('theme', document.documentElement.classList.contains('light') ? 'light' : 'dark')
+                                " class="border border-slate-700 rounded-md h-8 flex items-center justify-center text-slate-300 text-lg w-8 cursor-pointer hover:border-slate-500">☀︎</button></div></div><h5 class="main__homepage-header">Home</h5><div class="main__section--empty"><img src="assets/missing-home.svg" class="size-12 block light:hidden" alt="Missing home icon"><img src="assets/missing-home.light.svg" class="size-12 hidden light:block" alt="Missing home icon"><h2 class="main__section-header">There's nothing to see on this page</h2><p>The markdown file for this page wasn't supplied.</p></div></div></div><div class="layout__sidebar-right"><div class="right-sidebar__container"><div class="right-sidebar__header">ON THIS PAGE</div><div class="right-sidebar__back-to-top-container"><a href="#title" class="right-sidebar__back-to-top"><span class="right-sidebar__back-to-top-icon">↑</span><span class="right-sidebar__back-to-top-text">Back to top</span></a></div></div></div></div></body></html>
\ No newline at end of file
diff --git a/crates/wdl-doc/tests/output_docs/style.css b/crates/wdl-doc/tests/output_docs/style.css
index 9df776d3..1edebf13 100644
--- a/crates/wdl-doc/tests/output_docs/style.css
+++ b/crates/wdl-doc/tests/output_docs/style.css
@@ -1,10 +1,532 @@
 /*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
 @layer properties;
+:root {
+  --color-slate-50: #f8f9fc;
+  --color-slate-100: #f1f3f9;
+  --color-slate-200: #e2e5f0;
+  --color-slate-300: #cbcfe1;
+  --color-slate-400: #949bb8;
+  --color-slate-500: #646c8b;
+  --color-slate-600: #474e69;
+  --color-slate-700: #333a55;
+  --color-slate-800: #22273b;
+  --color-slate-900: #111420;
+  --color-slate-950: #070a1a;
+  --color-gray-50: #f8f9fc;
+  --color-gray-100: #f1f3f9;
+  --color-gray-200: #e2e5f0;
+  --color-gray-300: #cbcfe1;
+  --color-gray-400: #949bb8;
+  --color-gray-500: #646c8b;
+  --color-gray-600: #474e69;
+  --color-gray-700: #333a55;
+  --color-gray-800: #22273b;
+  --color-gray-900: #111420;
+  --color-gray-950: #070a1a;
+  --color-zinc-50: oklch(98.5% 0 0);
+  --color-zinc-100: oklch(96.7% 0.001 286.375);
+  --color-zinc-200: oklch(92% 0.004 286.32);
+  --color-zinc-300: oklch(87.1% 0.006 286.286);
+  --color-zinc-400: oklch(70.5% 0.015 286.067);
+  --color-zinc-500: oklch(55.2% 0.016 285.938);
+  --color-zinc-600: oklch(44.2% 0.017 285.786);
+  --color-zinc-700: oklch(37% 0.013 285.805);
+  --color-zinc-800: oklch(27.4% 0.006 286.033);
+  --color-zinc-900: oklch(21% 0.006 285.885);
+  --color-zinc-950: oklch(14.1% 0.005 285.823);
+  --color-neutral-50: oklch(98.5% 0 0);
+  --color-neutral-100: oklch(97% 0 0);
+  --color-neutral-200: oklch(92.2% 0 0);
+  --color-neutral-300: oklch(87% 0 0);
+  --color-neutral-400: oklch(70.8% 0 0);
+  --color-neutral-500: oklch(55.6% 0 0);
+  --color-neutral-600: oklch(43.9% 0 0);
+  --color-neutral-700: oklch(37.1% 0 0);
+  --color-neutral-800: oklch(26.9% 0 0);
+  --color-neutral-900: oklch(20.5% 0 0);
+  --color-neutral-950: oklch(14.5% 0 0);
+  --color-stone-50: oklch(98.5% 0.001 106.423);
+  --color-stone-100: oklch(97% 0.001 106.424);
+  --color-stone-200: oklch(92.3% 0.003 48.717);
+  --color-stone-300: oklch(86.9% 0.005 56.366);
+  --color-stone-400: oklch(70.9% 0.01 56.259);
+  --color-stone-500: oklch(55.3% 0.013 58.071);
+  --color-stone-600: oklch(44.4% 0.011 73.639);
+  --color-stone-700: oklch(37.4% 0.01 67.558);
+  --color-stone-800: oklch(26.8% 0.007 34.298);
+  --color-stone-900: oklch(21.6% 0.006 56.043);
+  --color-stone-950: oklch(14.7% 0.004 49.25);
+  --color-red-50: oklch(97.1% 0.013 17.38);
+  --color-red-100: oklch(93.6% 0.032 17.717);
+  --color-red-200: oklch(88.5% 0.062 18.334);
+  --color-red-300: oklch(80.8% 0.114 19.571);
+  --color-red-400: oklch(70.4% 0.191 22.216);
+  --color-red-500: oklch(63.7% 0.237 25.331);
+  --color-red-600: oklch(57.7% 0.245 27.325);
+  --color-red-700: oklch(50.5% 0.213 27.518);
+  --color-red-800: oklch(44.4% 0.177 26.899);
+  --color-red-900: oklch(39.6% 0.141 25.723);
+  --color-red-950: oklch(25.8% 0.092 26.042);
+  --color-orange-50: oklch(98% 0.016 73.684);
+  --color-orange-100: oklch(95.4% 0.038 75.164);
+  --color-orange-200: oklch(90.1% 0.076 70.697);
+  --color-orange-300: oklch(83.7% 0.128 66.29);
+  --color-orange-400: oklch(75% 0.183 55.934);
+  --color-orange-500: oklch(70.5% 0.213 47.604);
+  --color-orange-600: oklch(64.6% 0.222 41.116);
+  --color-orange-700: oklch(55.3% 0.195 38.402);
+  --color-orange-800: oklch(47% 0.157 37.304);
+  --color-orange-900: oklch(40.8% 0.123 38.172);
+  --color-orange-950: oklch(26.6% 0.079 36.259);
+  --color-amber-50: oklch(98.7% 0.022 95.277);
+  --color-amber-100: oklch(96.2% 0.059 95.617);
+  --color-amber-200: oklch(92.4% 0.12 95.746);
+  --color-amber-300: oklch(87.9% 0.169 91.605);
+  --color-amber-400: oklch(82.8% 0.189 84.429);
+  --color-amber-500: oklch(76.9% 0.188 70.08);
+  --color-amber-600: oklch(66.6% 0.179 58.318);
+  --color-amber-700: oklch(55.5% 0.163 48.998);
+  --color-amber-800: oklch(47.3% 0.137 46.201);
+  --color-amber-900: oklch(41.4% 0.112 45.904);
+  --color-amber-950: oklch(27.9% 0.077 45.635);
+  --color-yellow-50: oklch(98.7% 0.026 102.212);
+  --color-yellow-100: oklch(97.3% 0.071 103.193);
+  --color-yellow-200: oklch(94.5% 0.129 101.54);
+  --color-yellow-300: oklch(90.5% 0.182 98.111);
+  --color-yellow-400: oklch(85.2% 0.199 91.936);
+  --color-yellow-500: oklch(79.5% 0.184 86.047);
+  --color-yellow-600: oklch(68.1% 0.162 75.834);
+  --color-yellow-700: oklch(55.4% 0.135 66.442);
+  --color-yellow-800: oklch(47.6% 0.114 61.907);
+  --color-yellow-900: oklch(42.1% 0.095 57.708);
+  --color-yellow-950: oklch(28.6% 0.066 53.813);
+  --color-lime-50: oklch(98.6% 0.031 120.757);
+  --color-lime-100: oklch(96.7% 0.067 122.328);
+  --color-lime-200: oklch(93.8% 0.127 124.321);
+  --color-lime-300: oklch(89.7% 0.196 126.665);
+  --color-lime-400: oklch(84.1% 0.238 128.85);
+  --color-lime-500: oklch(76.8% 0.233 130.85);
+  --color-lime-600: oklch(64.8% 0.2 131.684);
+  --color-lime-700: oklch(53.2% 0.157 131.589);
+  --color-lime-800: oklch(45.3% 0.124 130.933);
+  --color-lime-900: oklch(40.5% 0.101 131.063);
+  --color-lime-950: oklch(27.4% 0.072 132.109);
+  --color-green-50: oklch(98.2% 0.018 155.826);
+  --color-green-100: oklch(96.2% 0.044 156.743);
+  --color-green-200: oklch(92.5% 0.084 155.995);
+  --color-green-300: oklch(87.1% 0.15 154.449);
+  --color-green-400: oklch(79.2% 0.209 151.711);
+  --color-green-500: oklch(72.3% 0.219 149.579);
+  --color-green-600: oklch(62.7% 0.194 149.214);
+  --color-green-700: oklch(52.7% 0.154 150.069);
+  --color-green-800: oklch(44.8% 0.119 151.328);
+  --color-green-900: oklch(39.3% 0.095 152.535);
+  --color-green-950: oklch(26.6% 0.065 152.934);
+  --color-emerald-50: oklch(97.9% 0.021 166.113);
+  --color-emerald-100: oklch(95% 0.052 163.051);
+  --color-emerald-200: oklch(90.5% 0.093 164.15);
+  --color-emerald-300: oklch(84.5% 0.143 164.978);
+  --color-emerald-400: oklch(76.5% 0.177 163.223);
+  --color-emerald-500: oklch(69.6% 0.17 162.48);
+  --color-emerald-600: oklch(59.6% 0.145 163.225);
+  --color-emerald-700: oklch(50.8% 0.118 165.612);
+  --color-emerald-800: oklch(43.2% 0.095 166.913);
+  --color-emerald-900: oklch(37.8% 0.077 168.94);
+  --color-emerald-950: oklch(26.2% 0.051 172.552);
+  --color-teal-50: oklch(98.4% 0.014 180.72);
+  --color-teal-100: oklch(95.3% 0.051 180.801);
+  --color-teal-200: oklch(91% 0.096 180.426);
+  --color-teal-300: oklch(85.5% 0.138 181.071);
+  --color-teal-400: oklch(77.7% 0.152 181.912);
+  --color-teal-500: oklch(70.4% 0.14 182.503);
+  --color-teal-600: oklch(60% 0.118 184.704);
+  --color-teal-700: oklch(51.1% 0.096 186.391);
+  --color-teal-800: oklch(43.7% 0.078 188.216);
+  --color-teal-900: oklch(38.6% 0.063 188.416);
+  --color-teal-950: oklch(27.7% 0.046 192.524);
+  --color-cyan-50: oklch(98.4% 0.019 200.873);
+  --color-cyan-100: oklch(95.6% 0.045 203.388);
+  --color-cyan-200: oklch(91.7% 0.08 205.041);
+  --color-cyan-300: oklch(86.5% 0.127 207.078);
+  --color-cyan-400: oklch(78.9% 0.154 211.53);
+  --color-cyan-500: oklch(71.5% 0.143 215.221);
+  --color-cyan-600: oklch(60.9% 0.126 221.723);
+  --color-cyan-700: oklch(52% 0.105 223.128);
+  --color-cyan-800: oklch(45% 0.085 224.283);
+  --color-cyan-900: oklch(39.8% 0.07 227.392);
+  --color-cyan-950: oklch(30.2% 0.056 229.695);
+  --color-sky-50: oklch(97.7% 0.013 236.62);
+  --color-sky-100: oklch(95.1% 0.026 236.824);
+  --color-sky-200: oklch(90.1% 0.058 230.902);
+  --color-sky-300: oklch(82.8% 0.111 230.318);
+  --color-sky-400: oklch(74.6% 0.16 232.661);
+  --color-sky-500: oklch(68.5% 0.169 237.323);
+  --color-sky-600: oklch(58.8% 0.158 241.966);
+  --color-sky-700: oklch(50% 0.134 242.749);
+  --color-sky-800: oklch(44.3% 0.11 240.79);
+  --color-sky-900: oklch(39.1% 0.09 240.876);
+  --color-sky-950: oklch(29.3% 0.066 243.157);
+  --color-blue-50: oklch(97% 0.014 254.604);
+  --color-blue-100: oklch(93.2% 0.032 255.585);
+  --color-blue-200: oklch(88.2% 0.059 254.128);
+  --color-blue-300: oklch(80.9% 0.105 251.813);
+  --color-blue-400: oklch(70.7% 0.165 254.624);
+  --color-blue-500: oklch(62.3% 0.214 259.815);
+  --color-blue-600: oklch(54.6% 0.245 262.881);
+  --color-blue-700: oklch(48.8% 0.243 264.376);
+  --color-blue-800: oklch(42.4% 0.199 265.638);
+  --color-blue-900: oklch(37.9% 0.146 265.522);
+  --color-blue-950: oklch(28.2% 0.091 267.935);
+  --color-indigo-50: oklch(96.2% 0.018 272.314);
+  --color-indigo-100: oklch(93% 0.034 272.788);
+  --color-indigo-200: oklch(87% 0.065 274.039);
+  --color-indigo-300: oklch(78.5% 0.115 274.713);
+  --color-indigo-400: oklch(67.3% 0.182 276.935);
+  --color-indigo-500: oklch(58.5% 0.233 277.117);
+  --color-indigo-600: oklch(51.1% 0.262 276.966);
+  --color-indigo-700: oklch(45.7% 0.24 277.023);
+  --color-indigo-800: oklch(39.8% 0.195 277.366);
+  --color-indigo-900: oklch(35.9% 0.144 278.697);
+  --color-indigo-950: oklch(25.7% 0.09 281.288);
+  --color-violet-50: oklch(96.9% 0.016 293.756);
+  --color-violet-100: oklch(94.3% 0.029 294.588);
+  --color-violet-200: oklch(89.4% 0.057 293.283);
+  --color-violet-300: oklch(81.1% 0.111 293.571);
+  --color-violet-400: oklch(70.2% 0.183 293.541);
+  --color-violet-500: oklch(60.6% 0.25 292.717);
+  --color-violet-600: oklch(54.1% 0.281 293.009);
+  --color-violet-700: oklch(49.1% 0.27 292.581);
+  --color-violet-800: oklch(43.2% 0.232 292.759);
+  --color-violet-900: oklch(38% 0.189 293.745);
+  --color-violet-950: oklch(28.3% 0.141 291.089);
+  --color-purple-50: oklch(97.7% 0.014 308.299);
+  --color-purple-100: oklch(94.6% 0.033 307.174);
+  --color-purple-200: oklch(90.2% 0.063 306.703);
+  --color-purple-300: oklch(82.7% 0.119 306.383);
+  --color-purple-400: oklch(71.4% 0.203 305.504);
+  --color-purple-500: oklch(62.7% 0.265 303.9);
+  --color-purple-600: oklch(55.8% 0.288 302.321);
+  --color-purple-700: oklch(49.6% 0.265 301.924);
+  --color-purple-800: oklch(43.8% 0.218 303.724);
+  --color-purple-900: oklch(38.1% 0.176 304.987);
+  --color-purple-950: oklch(29.1% 0.149 302.717);
+  --color-fuchsia-50: oklch(97.7% 0.017 320.058);
+  --color-fuchsia-100: oklch(95.2% 0.037 318.852);
+  --color-fuchsia-200: oklch(90.3% 0.076 319.62);
+  --color-fuchsia-300: oklch(83.3% 0.145 321.434);
+  --color-fuchsia-400: oklch(74% 0.238 322.16);
+  --color-fuchsia-500: oklch(66.7% 0.295 322.15);
+  --color-fuchsia-600: oklch(59.1% 0.293 322.896);
+  --color-fuchsia-700: oklch(51.8% 0.253 323.949);
+  --color-fuchsia-800: oklch(45.2% 0.211 324.591);
+  --color-fuchsia-900: oklch(40.1% 0.17 325.612);
+  --color-fuchsia-950: oklch(29.3% 0.136 325.661);
+  --color-pink-50: oklch(97.1% 0.014 343.198);
+  --color-pink-100: oklch(94.8% 0.028 342.258);
+  --color-pink-200: oklch(89.9% 0.061 343.231);
+  --color-pink-300: oklch(82.3% 0.12 346.018);
+  --color-pink-400: oklch(71.8% 0.202 349.761);
+  --color-pink-500: oklch(65.6% 0.241 354.308);
+  --color-pink-600: oklch(59.2% 0.249 0.584);
+  --color-pink-700: oklch(52.5% 0.223 3.958);
+  --color-pink-800: oklch(45.9% 0.187 3.815);
+  --color-pink-900: oklch(40.8% 0.153 2.432);
+  --color-pink-950: oklch(28.4% 0.109 3.907);
+  --color-rose-50: oklch(96.9% 0.015 12.422);
+  --color-rose-100: oklch(94.1% 0.03 12.58);
+  --color-rose-200: oklch(89.2% 0.058 10.001);
+  --color-rose-300: oklch(81% 0.117 11.638);
+  --color-rose-400: oklch(71.2% 0.194 13.428);
+  --color-rose-500: oklch(64.5% 0.246 16.439);
+  --color-rose-600: oklch(58.6% 0.253 17.585);
+  --color-rose-700: oklch(51.4% 0.222 16.935);
+  --color-rose-800: oklch(45.5% 0.188 13.697);
+  --color-rose-900: oklch(41% 0.159 10.272);
+  --color-rose-950: oklch(27.1% 0.105 12.094);
+  --color-brand-emerald-200: #a7f3d0;
+  --color-brand-emerald-400: #34d399;
+  --color-brand-emerald-950: #022c22;
+  --color-brand-violet-400: #a78bfa;
+  --color-brand-pink-400: #f472b6;
+  --color-brand-cyan-400: #4bd8fa;
+  --color-brand-red-400: #f87171;
+  --color-brand-yellow-50: #fefce8;
+  --color-brand-yellow-400: #facc15;
+  --color-brand-yellow-700: #a16207;
+  --color-brand-yellow-900: #713f12;
+  --color-brand-yellow-950: #291404;
+  --color-inherit: inherit;
+  --color-current: currentcolor;
+  --color-transparent: transparent;
+  --color-black: #000;
+  --color-white: #fff;
+}
+:root.light {
+  --color-slate-50: #070a1a;
+  --color-slate-100: #111420;
+  --color-slate-200: #22273b;
+  --color-slate-300: #333a55;
+  --color-slate-400: #474e69;
+  --color-slate-500: #646c8b;
+  --color-slate-600: #949bb8;
+  --color-slate-700: #cbcfe1;
+  --color-slate-800: #e2e5f0;
+  --color-slate-900: #f1f3f9;
+  --color-slate-950: #f8f9fc;
+  --color-gray-50: #070a1a;
+  --color-gray-100: #111420;
+  --color-gray-200: #22273b;
+  --color-gray-300: #333a55;
+  --color-gray-400: #474e69;
+  --color-gray-500: #646c8b;
+  --color-gray-600: #949bb8;
+  --color-gray-700: #cbcfe1;
+  --color-gray-800: #e2e5f0;
+  --color-gray-900: #f1f3f9;
+  --color-gray-950: #f8f9fc;
+  --color-zinc-50: oklch(14.1% 0.005 285.823);
+  --color-zinc-100: oklch(21% 0.006 285.885);
+  --color-zinc-200: oklch(27.4% 0.006 286.033);
+  --color-zinc-300: oklch(37% 0.013 285.805);
+  --color-zinc-400: oklch(44.2% 0.017 285.786);
+  --color-zinc-500: oklch(55.2% 0.016 285.938);
+  --color-zinc-600: oklch(70.5% 0.015 286.067);
+  --color-zinc-700: oklch(87.1% 0.006 286.286);
+  --color-zinc-800: oklch(92% 0.004 286.32);
+  --color-zinc-900: oklch(96.7% 0.001 286.375);
+  --color-zinc-950: oklch(98.5% 0 0);
+  --color-neutral-50: oklch(14.5% 0 0);
+  --color-neutral-100: oklch(20.5% 0 0);
+  --color-neutral-200: oklch(26.9% 0 0);
+  --color-neutral-300: oklch(37.1% 0 0);
+  --color-neutral-400: oklch(43.9% 0 0);
+  --color-neutral-500: oklch(55.6% 0 0);
+  --color-neutral-600: oklch(70.8% 0 0);
+  --color-neutral-700: oklch(87% 0 0);
+  --color-neutral-800: oklch(92.2% 0 0);
+  --color-neutral-900: oklch(97% 0 0);
+  --color-neutral-950: oklch(98.5% 0 0);
+  --color-stone-50: oklch(14.7% 0.004 49.25);
+  --color-stone-100: oklch(21.6% 0.006 56.043);
+  --color-stone-200: oklch(26.8% 0.007 34.298);
+  --color-stone-300: oklch(37.4% 0.01 67.558);
+  --color-stone-400: oklch(44.4% 0.011 73.639);
+  --color-stone-500: oklch(55.3% 0.013 58.071);
+  --color-stone-600: oklch(70.9% 0.01 56.259);
+  --color-stone-700: oklch(86.9% 0.005 56.366);
+  --color-stone-800: oklch(92.3% 0.003 48.717);
+  --color-stone-900: oklch(97% 0.001 106.424);
+  --color-stone-950: oklch(98.5% 0.001 106.423);
+  --color-red-50: oklch(25.8% 0.092 26.042);
+  --color-red-100: oklch(39.6% 0.141 25.723);
+  --color-red-200: oklch(44.4% 0.177 26.899);
+  --color-red-300: oklch(50.5% 0.213 27.518);
+  --color-red-400: oklch(57.7% 0.245 27.325);
+  --color-red-500: oklch(63.7% 0.237 25.331);
+  --color-red-600: oklch(70.4% 0.191 22.216);
+  --color-red-700: oklch(80.8% 0.114 19.571);
+  --color-red-800: oklch(88.5% 0.062 18.334);
+  --color-red-900: oklch(93.6% 0.032 17.717);
+  --color-red-950: oklch(97.1% 0.013 17.38);
+  --color-orange-50: oklch(26.6% 0.079 36.259);
+  --color-orange-100: oklch(40.8% 0.123 38.172);
+  --color-orange-200: oklch(47% 0.157 37.304);
+  --color-orange-300: oklch(55.3% 0.195 38.402);
+  --color-orange-400: oklch(64.6% 0.222 41.116);
+  --color-orange-500: oklch(70.5% 0.213 47.604);
+  --color-orange-600: oklch(75% 0.183 55.934);
+  --color-orange-700: oklch(83.7% 0.128 66.29);
+  --color-orange-800: oklch(90.1% 0.076 70.697);
+  --color-orange-900: oklch(95.4% 0.038 75.164);
+  --color-orange-950: oklch(98% 0.016 73.684);
+  --color-amber-50: oklch(27.9% 0.077 45.635);
+  --color-amber-100: oklch(41.4% 0.112 45.904);
+  --color-amber-200: oklch(47.3% 0.137 46.201);
+  --color-amber-300: oklch(55.5% 0.163 48.998);
+  --color-amber-400: oklch(66.6% 0.179 58.318);
+  --color-amber-500: oklch(76.9% 0.188 70.08);
+  --color-amber-600: oklch(82.8% 0.189 84.429);
+  --color-amber-700: oklch(87.9% 0.169 91.605);
+  --color-amber-800: oklch(92.4% 0.12 95.746);
+  --color-amber-900: oklch(96.2% 0.059 95.617);
+  --color-amber-950: oklch(98.7% 0.022 95.277);
+  --color-yellow-50: oklch(28.6% 0.066 53.813);
+  --color-yellow-100: oklch(42.1% 0.095 57.708);
+  --color-yellow-200: oklch(47.6% 0.114 61.907);
+  --color-yellow-300: oklch(55.4% 0.135 66.442);
+  --color-yellow-400: oklch(68.1% 0.162 75.834);
+  --color-yellow-500: oklch(79.5% 0.184 86.047);
+  --color-yellow-600: oklch(85.2% 0.199 91.936);
+  --color-yellow-700: oklch(90.5% 0.182 98.111);
+  --color-yellow-800: oklch(94.5% 0.129 101.54);
+  --color-yellow-900: oklch(97.3% 0.071 103.193);
+  --color-yellow-950: oklch(98.7% 0.026 102.212);
+  --color-lime-50: oklch(27.4% 0.072 132.109);
+  --color-lime-100: oklch(40.5% 0.101 131.063);
+  --color-lime-200: oklch(45.3% 0.124 130.933);
+  --color-lime-300: oklch(53.2% 0.157 131.589);
+  --color-lime-400: oklch(64.8% 0.2 131.684);
+  --color-lime-500: oklch(76.8% 0.233 130.85);
+  --color-lime-600: oklch(84.1% 0.238 128.85);
+  --color-lime-700: oklch(89.7% 0.196 126.665);
+  --color-lime-800: oklch(93.8% 0.127 124.321);
+  --color-lime-900: oklch(96.7% 0.067 122.328);
+  --color-lime-950: oklch(98.6% 0.031 120.757);
+  --color-green-50: oklch(26.6% 0.065 152.934);
+  --color-green-100: oklch(39.3% 0.095 152.535);
+  --color-green-200: oklch(44.8% 0.119 151.328);
+  --color-green-300: oklch(52.7% 0.154 150.069);
+  --color-green-400: oklch(62.7% 0.194 149.214);
+  --color-green-500: oklch(72.3% 0.219 149.579);
+  --color-green-600: oklch(79.2% 0.209 151.711);
+  --color-green-700: oklch(87.1% 0.15 154.449);
+  --color-green-800: oklch(92.5% 0.084 155.995);
+  --color-green-900: oklch(96.2% 0.044 156.743);
+  --color-green-950: oklch(98.2% 0.018 155.826);
+  --color-emerald-50: oklch(26.2% 0.051 172.552);
+  --color-emerald-100: oklch(37.8% 0.077 168.94);
+  --color-emerald-200: oklch(43.2% 0.095 166.913);
+  --color-emerald-300: oklch(50.8% 0.118 165.612);
+  --color-emerald-400: oklch(59.6% 0.145 163.225);
+  --color-emerald-500: oklch(69.6% 0.17 162.48);
+  --color-emerald-600: oklch(76.5% 0.177 163.223);
+  --color-emerald-700: oklch(84.5% 0.143 164.978);
+  --color-emerald-800: oklch(90.5% 0.093 164.15);
+  --color-emerald-900: oklch(95% 0.052 163.051);
+  --color-emerald-950: oklch(97.9% 0.021 166.113);
+  --color-teal-50: oklch(27.7% 0.046 192.524);
+  --color-teal-100: oklch(38.6% 0.063 188.416);
+  --color-teal-200: oklch(43.7% 0.078 188.216);
+  --color-teal-300: oklch(51.1% 0.096 186.391);
+  --color-teal-400: oklch(60% 0.118 184.704);
+  --color-teal-500: oklch(70.4% 0.14 182.503);
+  --color-teal-600: oklch(77.7% 0.152 181.912);
+  --color-teal-700: oklch(85.5% 0.138 181.071);
+  --color-teal-800: oklch(91% 0.096 180.426);
+  --color-teal-900: oklch(95.3% 0.051 180.801);
+  --color-teal-950: oklch(98.4% 0.014 180.72);
+  --color-cyan-50: oklch(30.2% 0.056 229.695);
+  --color-cyan-100: oklch(39.8% 0.07 227.392);
+  --color-cyan-200: oklch(45% 0.085 224.283);
+  --color-cyan-300: oklch(52% 0.105 223.128);
+  --color-cyan-400: oklch(60.9% 0.126 221.723);
+  --color-cyan-500: oklch(71.5% 0.143 215.221);
+  --color-cyan-600: oklch(78.9% 0.154 211.53);
+  --color-cyan-700: oklch(86.5% 0.127 207.078);
+  --color-cyan-800: oklch(91.7% 0.08 205.041);
+  --color-cyan-900: oklch(95.6% 0.045 203.388);
+  --color-cyan-950: oklch(98.4% 0.019 200.873);
+  --color-sky-50: oklch(29.3% 0.066 243.157);
+  --color-sky-100: oklch(39.1% 0.09 240.876);
+  --color-sky-200: oklch(44.3% 0.11 240.79);
+  --color-sky-300: oklch(50% 0.134 242.749);
+  --color-sky-400: oklch(58.8% 0.158 241.966);
+  --color-sky-500: oklch(68.5% 0.169 237.323);
+  --color-sky-600: oklch(74.6% 0.16 232.661);
+  --color-sky-700: oklch(82.8% 0.111 230.318);
+  --color-sky-800: oklch(90.1% 0.058 230.902);
+  --color-sky-900: oklch(95.1% 0.026 236.824);
+  --color-sky-950: oklch(97.7% 0.013 236.62);
+  --color-blue-50: oklch(28.2% 0.091 267.935);
+  --color-blue-100: oklch(37.9% 0.146 265.522);
+  --color-blue-200: oklch(42.4% 0.199 265.638);
+  --color-blue-300: oklch(48.8% 0.243 264.376);
+  --color-blue-400: oklch(54.6% 0.245 262.881);
+  --color-blue-500: oklch(62.3% 0.214 259.815);
+  --color-blue-600: oklch(70.7% 0.165 254.624);
+  --color-blue-700: oklch(80.9% 0.105 251.813);
+  --color-blue-800: oklch(88.2% 0.059 254.128);
+  --color-blue-900: oklch(93.2% 0.032 255.585);
+  --color-blue-950: oklch(97% 0.014 254.604);
+  --color-indigo-50: oklch(25.7% 0.09 281.288);
+  --color-indigo-100: oklch(35.9% 0.144 278.697);
+  --color-indigo-200: oklch(39.8% 0.195 277.366);
+  --color-indigo-300: oklch(45.7% 0.24 277.023);
+  --color-indigo-400: oklch(51.1% 0.262 276.966);
+  --color-indigo-500: oklch(58.5% 0.233 277.117);
+  --color-indigo-600: oklch(67.3% 0.182 276.935);
+  --color-indigo-700: oklch(78.5% 0.115 274.713);
+  --color-indigo-800: oklch(87% 0.065 274.039);
+  --color-indigo-900: oklch(93% 0.034 272.788);
+  --color-indigo-950: oklch(96.2% 0.018 272.314);
+  --color-violet-50: oklch(28.3% 0.141 291.089);
+  --color-violet-100: oklch(38% 0.189 293.745);
+  --color-violet-200: oklch(43.2% 0.232 292.759);
+  --color-violet-300: oklch(49.1% 0.27 292.581);
+  --color-violet-400: oklch(54.1% 0.281 293.009);
+  --color-violet-500: oklch(60.6% 0.25 292.717);
+  --color-violet-600: oklch(70.2% 0.183 293.541);
+  --color-violet-700: oklch(81.1% 0.111 293.571);
+  --color-violet-800: oklch(89.4% 0.057 293.283);
+  --color-violet-900: oklch(94.3% 0.029 294.588);
+  --color-violet-950: oklch(96.9% 0.016 293.756);
+  --color-purple-50: oklch(29.1% 0.149 302.717);
+  --color-purple-100: oklch(38.1% 0.176 304.987);
+  --color-purple-200: oklch(43.8% 0.218 303.724);
+  --color-purple-300: oklch(49.6% 0.265 301.924);
+  --color-purple-400: oklch(55.8% 0.288 302.321);
+  --color-purple-500: oklch(62.7% 0.265 303.9);
+  --color-purple-600: oklch(71.4% 0.203 305.504);
+  --color-purple-700: oklch(82.7% 0.119 306.383);
+  --color-purple-800: oklch(90.2% 0.063 306.703);
+  --color-purple-900: oklch(94.6% 0.033 307.174);
+  --color-purple-950: oklch(97.7% 0.014 308.299);
+  --color-fuchsia-50: oklch(29.3% 0.136 325.661);
+  --color-fuchsia-100: oklch(40.1% 0.17 325.612);
+  --color-fuchsia-200: oklch(45.2% 0.211 324.591);
+  --color-fuchsia-300: oklch(51.8% 0.253 323.949);
+  --color-fuchsia-400: oklch(59.1% 0.293 322.896);
+  --color-fuchsia-500: oklch(66.7% 0.295 322.15);
+  --color-fuchsia-600: oklch(74% 0.238 322.16);
+  --color-fuchsia-700: oklch(83.3% 0.145 321.434);
+  --color-fuchsia-800: oklch(90.3% 0.076 319.62);
+  --color-fuchsia-900: oklch(95.2% 0.037 318.852);
+  --color-fuchsia-950: oklch(97.7% 0.017 320.058);
+  --color-pink-50: oklch(28.4% 0.109 3.907);
+  --color-pink-100: oklch(40.8% 0.153 2.432);
+  --color-pink-200: oklch(45.9% 0.187 3.815);
+  --color-pink-300: oklch(52.5% 0.223 3.958);
+  --color-pink-400: oklch(59.2% 0.249 0.584);
+  --color-pink-500: oklch(65.6% 0.241 354.308);
+  --color-pink-600: oklch(71.8% 0.202 349.761);
+  --color-pink-700: oklch(82.3% 0.12 346.018);
+  --color-pink-800: oklch(89.9% 0.061 343.231);
+  --color-pink-900: oklch(94.8% 0.028 342.258);
+  --color-pink-950: oklch(97.1% 0.014 343.198);
+  --color-rose-50: oklch(27.1% 0.105 12.094);
+  --color-rose-100: oklch(41% 0.159 10.272);
+  --color-rose-200: oklch(45.5% 0.188 13.697);
+  --color-rose-300: oklch(51.4% 0.222 16.935);
+  --color-rose-400: oklch(58.6% 0.253 17.585);
+  --color-rose-500: oklch(64.5% 0.246 16.439);
+  --color-rose-600: oklch(71.2% 0.194 13.428);
+  --color-rose-700: oklch(81% 0.117 11.638);
+  --color-rose-800: oklch(89.2% 0.058 10.001);
+  --color-rose-900: oklch(94.1% 0.03 12.58);
+  --color-rose-950: oklch(96.9% 0.015 12.422);
+  --color-brand-emerald-200: #065f46;
+  --color-brand-emerald-400: #059669;
+  --color-brand-emerald-950: #ecfdf5;
+  --color-brand-violet-400: #8b5cf6;
+  --color-brand-pink-400: #ec4899;
+  --color-brand-cyan-400: #06b6d4;
+  --color-brand-red-400: #dc2626;
+  --color-brand-yellow-50: #291404;
+  --color-brand-yellow-400: #ca8a04;
+  --color-brand-yellow-700: #fde047;
+  --color-brand-yellow-900: #fef9c3;
+  --color-brand-yellow-950: #fefce8;
+  --color-inherit: inherit;
+  --color-current: currentcolor;
+  --color-transparent: transparent;
+  --color-black: #000;
+  --color-white: #fff;
+}
 .markdown-body {
   color-scheme: dark;
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
-  color: #f0f6fc;
+  color: var(--color-white);
   background-color: transparent;
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
   font-size: 16px;
@@ -36,7 +558,7 @@
 }
 .markdown-body a {
   background-color: transparent;
-  color: #4493f8;
+  color: var(--color-blue-400);
   text-decoration: none;
 }
 .markdown-body abbr[title] {
@@ -57,8 +579,8 @@
   font-size: 2em;
 }
 .markdown-body mark {
-  background-color: #bb800926;
-  color: #f0f6fc;
+  background-color: var(--color-yellow-800);
+  color: var(--color-white);
 }
 .markdown-body small {
   font-size: 90%;
@@ -91,11 +613,11 @@
   box-sizing: content-box;
   overflow: hidden;
   background: transparent;
-  border-bottom: 1px solid #3d444db3;
+  border-bottom: 1px solid var(--color-zinc-700);
   height: .25em;
   padding: 0;
   margin: 1.5rem 0;
-  background-color: #3d444d;
+  background-color: var(--color-zinc-700);
   border: 0;
 }
 .markdown-body input {
@@ -134,7 +656,7 @@
   text-decoration: underline;
 }
 .markdown-body ::placeholder {
-  color: #9198a1;
+  color: var(--color-zinc-400);
   opacity: 1;
 }
 .markdown-body hr::before {
@@ -162,7 +684,7 @@
   cursor: pointer;
 }
 .markdown-body a:focus, .markdown-body [role=button]:focus, .markdown-body input[type=radio]:focus, .markdown-body input[type=checkbox]:focus {
-  outline: 2px solid #1f6feb;
+  outline: 2px solid var(--color-blue-500);
   outline-offset: -2px;
   box-shadow: none;
 }
@@ -170,7 +692,7 @@
   outline: solid 1px transparent;
 }
 .markdown-body a:focus-visible, .markdown-body [role=button]:focus-visible, .markdown-body input[type=radio]:focus-visible, .markdown-body input[type=checkbox]:focus-visible {
-  outline: 2px solid #1f6feb;
+  outline: 2px solid var(--color-blue-500);
   outline-offset: -2px;
   box-shadow: none;
 }
@@ -182,13 +704,13 @@
   padding: 0.25rem;
   font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
   line-height: 10px;
-  color: #f0f6fc;
+  color: var(--color-white);
   vertical-align: middle;
-  background-color: #151b23;
-  border: solid 1px #3d444db3;
-  border-bottom-color: #3d444db3;
+  background-color: var(--color-zinc-900);
+  border: solid 1px var(--color-zinc-700);
+  border-bottom-color: var(--color-zinc-700);
   border-radius: 6px;
-  box-shadow: inset 0 -1px 0 #3d444db3;
+  box-shadow: inset 0 -1px 0 var(--color-zinc-700);
 }
 .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 {
   margin-top: 1.5rem;
@@ -216,7 +738,7 @@
 .markdown-body h6 {
   font-weight: 600;
   font-size: .85em;
-  color: #9198a1;
+  color: var(--color-zinc-400);
 }
 .markdown-body p {
   margin-top: 0;
@@ -225,8 +747,8 @@
 .markdown-body blockquote {
   margin: 0;
   padding: 0 1em;
-  color: #9198a1;
-  border-left: .25em solid #3d444d;
+  color: var(--color-zinc-400);
+  border-left: .25em solid var(--color-zinc-700);
 }
 .markdown-body ul, .markdown-body ol {
   margin-top: 0;
@@ -286,7 +808,7 @@
   text-decoration: none;
 }
 .markdown-body .absent {
-  color: #f85149;
+  color: var(--color-brand-red-400);
 }
 .markdown-body .anchor {
   float: left;
@@ -308,7 +830,7 @@
   margin-bottom: 0;
 }
 .markdown-body h1 .octicon-link, .markdown-body h2 .octicon-link, .markdown-body h3 .octicon-link, .markdown-body h4 .octicon-link, .markdown-body h5 .octicon-link, .markdown-body h6 .octicon-link {
-  color: #f0f6fc;
+  color: var(--color-white);
   vertical-align: middle;
   visibility: hidden;
 }
@@ -383,17 +905,17 @@
 }
 .markdown-body table th, .markdown-body table td {
   padding: 6px 13px;
-  border: 1px solid #3d444d;
+  border: 1px solid var(--color-zinc-700);
 }
 .markdown-body table td>:last-child {
   margin-bottom: 0;
 }
 .markdown-body table tr {
-  background-color: #0d1117;
-  border-top: 1px solid #3d444db3;
+  background-color: var(--color-zinc-900);
+  border-top: 1px solid var(--color-zinc-700);
 }
 .markdown-body table tr:nth-child(2n) {
-  background-color: #151b23;
+  background-color: var(--color-zinc-900);
 }
 .markdown-body table img {
   background-color: transparent;
@@ -420,7 +942,7 @@
   padding: 7px;
   margin: 13px 0 0;
   overflow: hidden;
-  border: 1px solid #3d444d;
+  border: 1px solid var(--color-zinc-700);
 }
 .markdown-body span.frame span img {
   display: block;
@@ -430,7 +952,7 @@
   display: block;
   padding: 5px 0 0;
   clear: both;
-  color: #f0f6fc;
+  color: var(--color-white);
 }
 .markdown-body span.align-center {
   display: block;
@@ -488,7 +1010,7 @@
   margin: 0;
   font-size: 85%;
   white-space: break-spaces;
-  background-color: #656c7633;
+  background-color: var(--color-zinc-800);
   border-radius: 6px;
 }
 .markdown-body code br, .markdown-body tt br {
@@ -523,8 +1045,8 @@
   overflow: auto;
   font-size: 85%;
   line-height: 1.45;
-  color: #f0f6fc;
-  background-color: #151b23;
+  color: var(--color-white);
+  background-color: var(--color-zinc-900);
   border-radius: 6px;
 }
 .markdown-body pre code, .markdown-body pre tt {
@@ -549,7 +1071,7 @@
 .markdown-body .csv-data .blob-num {
   padding: 10px 0.5rem 9px;
   text-align: right;
-  background: #0d1117;
+  background: var(--color-zinc-900);
   border: 0;
 }
 .markdown-body .csv-data tr {
@@ -557,7 +1079,7 @@
 }
 .markdown-body .csv-data th {
   font-weight: 600;
-  background: #151b23;
+  background: var(--color-zinc-900);
   border-top: 0;
 }
 .markdown-body [data-footnote-ref]::before {
@@ -568,8 +1090,8 @@
 }
 .markdown-body .footnotes {
   font-size: 12px;
-  color: #9198a1;
-  border-top: 1px solid #3d444d;
+  color: var(--color-zinc-400);
+  border-top: 1px solid var(--color-zinc-700);
 }
 .markdown-body .footnotes ol {
   padding-left: 1rem;
@@ -590,11 +1112,11 @@
   left: calc(1.5rem*-1);
   pointer-events: none;
   content: "";
-  border: 2px solid #1f6feb;
+  border: 2px solid var(--color-blue-500);
   border-radius: 6px;
 }
 .markdown-body .footnotes li:target {
-  color: #f0f6fc;
+  color: var(--color-white);
 }
 .markdown-body .footnotes .data-footnote-backref g-emoji {
   font-family: monospace;
@@ -603,88 +1125,88 @@
   padding-right: var(--dialog-scrollgutter) !important;
 }
 .markdown-body .pl-c {
-  color: #9198a1;
+  color: var(--color-zinc-400);
 }
 .markdown-body .pl-c1, .markdown-body .pl-s .pl-v {
-  color: #79c0ff;
+  color: var(--color-blue-300);
 }
 .markdown-body .pl-e, .markdown-body .pl-en {
-  color: #d2a8ff;
+  color: var(--color-brand-violet-400);
 }
 .markdown-body .pl-smi, .markdown-body .pl-s .pl-s1 {
-  color: #f0f6fc;
+  color: var(--color-white);
 }
 .markdown-body .pl-ent {
-  color: #7ee787;
+  color: var(--color-brand-emerald-400);
 }
 .markdown-body .pl-k {
-  color: #ff7b72;
+  color: var(--color-brand-red-400);
 }
 .markdown-body .pl-s, .markdown-body .pl-pds, .markdown-body .pl-s .pl-pse .pl-s1, .markdown-body .pl-sr, .markdown-body .pl-sr .pl-cce, .markdown-body .pl-sr .pl-sre, .markdown-body .pl-sr .pl-sra {
-  color: #a5d6ff;
+  color: var(--color-blue-300);
 }
 .markdown-body .pl-v, .markdown-body .pl-smw {
-  color: #ffa657;
+  color: var(--color-orange-300);
 }
 .markdown-body .pl-bu {
-  color: #f85149;
+  color: var(--color-brand-red-400);
 }
 .markdown-body .pl-ii {
-  color: #f0f6fc;
-  background-color: #8e1519;
+  color: var(--color-white);
+  background-color: var(--color-red-900);
 }
 .markdown-body .pl-c2 {
-  color: #f0f6fc;
-  background-color: #b62324;
+  color: var(--color-white);
+  background-color: var(--color-red-900);
 }
 .markdown-body .pl-sr .pl-cce {
   font-weight: bold;
-  color: #7ee787;
+  color: var(--color-brand-emerald-400);
 }
 .markdown-body .pl-ml {
-  color: #f2cc60;
+  color: var(--color-yellow-200);
 }
 .markdown-body .pl-mh, .markdown-body .pl-mh .pl-en, .markdown-body .pl-ms {
   font-weight: bold;
-  color: #1f6feb;
+  color: var(--color-blue-400);
 }
 .markdown-body .pl-mi {
   font-style: italic;
-  color: #f0f6fc;
+  color: var(--color-white);
 }
 .markdown-body .pl-mb {
   font-weight: bold;
-  color: #f0f6fc;
+  color: var(--color-white);
 }
 .markdown-body .pl-md {
-  color: #ffdcd7;
+  color: var(--color-red-200);
   background-color: #67060c;
 }
 .markdown-body .pl-mi1 {
-  color: #aff5b4;
-  background-color: #033a16;
+  color: var(--color-green-200);
+  background-color: var(--color-green-950);
 }
 .markdown-body .pl-mc {
-  color: #ffdfb6;
-  background-color: #5a1e02;
+  color: var(--color-orange-200);
+  background-color: var(--color-orange-950);
 }
 .markdown-body .pl-mi2 {
-  color: #f0f6fc;
-  background-color: #1158c7;
+  color: var(--color-white);
+  background-color: var(--color-blue-800);
 }
 .markdown-body .pl-mdr {
   font-weight: bold;
-  color: #d2a8ff;
+  color: var(--color-brand-violet-400);
 }
 .markdown-body .pl-ba {
-  color: #9198a1;
+  color: var(--color-zinc-400);
 }
 .markdown-body .pl-sg {
-  color: #3d444d;
+  color: var(--color-zinc-700);
 }
 .markdown-body .pl-corl {
   text-decoration: underline;
-  color: #a5d6ff;
+  color: var(--color-blue-300);
 }
 .markdown-body [role=button]:focus:not(:focus-visible), .markdown-body [role=tabpanel][tabindex="0"]:focus:not(:focus-visible), .markdown-body button:focus:not(:focus-visible), .markdown-body summary:focus:not(:focus-visible), .markdown-body a:focus:not(:focus-visible) {
   outline: none;
@@ -746,7 +1268,7 @@
   padding: 0.5rem 1rem;
   margin-bottom: 1rem;
   color: inherit;
-  border-left: .25em solid #3d444d;
+  border-left: .25em solid var(--color-zinc-700);
 }
 .markdown-body .markdown-alert>:first-child {
   margin-top: 0;
@@ -761,34 +1283,34 @@
   line-height: 1;
 }
 .markdown-body .markdown-alert.markdown-alert-note {
-  border-left-color: #1f6feb;
+  border-left-color: var(--color-blue-500);
 }
 .markdown-body .markdown-alert.markdown-alert-note .markdown-alert-title {
-  color: #4493f8;
+  color: var(--color-blue-400);
 }
 .markdown-body .markdown-alert.markdown-alert-important {
-  border-left-color: #8957e5;
+  border-left-color: var(--color-violet-500);
 }
 .markdown-body .markdown-alert.markdown-alert-important .markdown-alert-title {
-  color: #ab7df8;
+  color: var(--color-brand-violet-400);
 }
 .markdown-body .markdown-alert.markdown-alert-warning {
-  border-left-color: #9e6a03;
+  border-left-color: var(--color-brand-yellow-700);
 }
 .markdown-body .markdown-alert.markdown-alert-warning .markdown-alert-title {
-  color: #d29922;
+  color: var(--color-brand-yellow-700);
 }
 .markdown-body .markdown-alert.markdown-alert-tip {
-  border-left-color: #238636;
+  border-left-color: var(--color-green-600);
 }
 .markdown-body .markdown-alert.markdown-alert-tip .markdown-alert-title {
-  color: #3fb950;
+  color: var(--color-green-600);
 }
 .markdown-body .markdown-alert.markdown-alert-caution {
-  border-left-color: #da3633;
+  border-left-color: var(--color-red-600);
 }
 .markdown-body .markdown-alert.markdown-alert-caution .markdown-alert-title {
-  color: #f85149;
+  color: var(--color-brand-red-400);
 }
 .markdown-body>*:first-child>.heading-element:first-child {
   margin-top: 0 !important;
@@ -802,20 +1324,25 @@
     --font-sans: "DM Sans";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
-    --color-red-400: oklch(70.4% 0.191 22.216);
+    --color-red-200: oklch(88.5% 0.062 18.334);
+    --color-red-600: oklch(57.7% 0.245 27.325);
+    --color-red-900: oklch(39.6% 0.141 25.723);
     --color-red-950: oklch(25.8% 0.092 26.042);
-    --color-yellow-50: oklch(98.7% 0.026 102.212);
-    --color-yellow-900: oklch(42.1% 0.095 57.708);
+    --color-orange-200: oklch(90.1% 0.076 70.697);
+    --color-orange-300: oklch(83.7% 0.128 66.29);
+    --color-orange-950: oklch(26.6% 0.079 36.259);
+    --color-yellow-200: oklch(94.5% 0.129 101.54);
+    --color-yellow-800: oklch(47.6% 0.114 61.907);
     --color-green-200: oklch(92.5% 0.084 155.995);
-    --color-green-400: oklch(79.2% 0.209 151.711);
     --color-green-600: oklch(62.7% 0.194 149.214);
     --color-green-950: oklch(26.6% 0.065 152.934);
-    --color-emerald-300: oklch(84.5% 0.143 164.978);
-    --color-emerald-400: oklch(76.5% 0.177 163.223);
-    --color-violet-300: oklch(81.1% 0.111 293.571);
-    --color-violet-400: oklch(70.2% 0.183 293.541);
-    --color-pink-300: oklch(82.3% 0.12 346.018);
-    --color-pink-400: oklch(71.8% 0.202 349.761);
+    --color-blue-300: oklch(80.9% 0.105 251.813);
+    --color-blue-400: oklch(70.7% 0.165 254.624);
+    --color-blue-500: oklch(62.3% 0.214 259.815);
+    --color-blue-800: oklch(42.4% 0.199 265.638);
+    --color-violet-200: oklch(89.4% 0.057 293.283);
+    --color-violet-500: oklch(60.6% 0.25 292.717);
+    --color-pink-200: oklch(89.9% 0.061 343.231);
     --color-slate-50: oklch(98.4% 0.003 247.858);
     --color-slate-100: oklch(96.8% 0.007 247.896);
     --color-slate-200: oklch(92.9% 0.013 255.508);
@@ -829,7 +1356,10 @@
     --color-slate-950: oklch(12.9% 0.042 264.695);
     --color-gray-700: oklch(37.3% 0.034 259.733);
     --color-gray-800: oklch(27.8% 0.033 256.848);
-    --color-black: #000;
+    --color-zinc-400: oklch(70.5% 0.015 286.067);
+    --color-zinc-700: oklch(37% 0.013 285.805);
+    --color-zinc-800: oklch(27.4% 0.006 286.033);
+    --color-zinc-900: oklch(21% 0.006 285.885);
     --color-white: #fff;
     --spacing: 0.25rem;
     --container-xs: 20rem;
@@ -861,6 +1391,18 @@
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
+    --color-brand-emerald-200: var(--color-brand-emerald-200);
+    --color-brand-emerald-400: var(--color-brand-emerald-400);
+    --color-brand-emerald-950: var(--color-brand-emerald-950);
+    --color-brand-violet-400: var(--color-brand-violet-400);
+    --color-brand-pink-400: var(--color-brand-pink-400);
+    --color-brand-cyan-400: var(--color-brand-cyan-400);
+    --color-brand-red-400: var(--color-brand-red-400);
+    --color-brand-yellow-50: var(--color-brand-yellow-50);
+    --color-brand-yellow-400: var(--color-brand-yellow-400);
+    --color-brand-yellow-700: var(--color-brand-yellow-700);
+    --color-brand-yellow-900: var(--color-brand-yellow-900);
+    --color-brand-yellow-950: var(--color-brand-yellow-950);
   }
 }
 @layer base {
@@ -1100,9 +1642,15 @@
     width: calc(var(--spacing) * 12);
     height: calc(var(--spacing) * 12);
   }
+  .h-8 {
+    height: calc(var(--spacing) * 8);
+  }
   .h-10 {
     height: calc(var(--spacing) * 10);
   }
+  .w-8 {
+    width: calc(var(--spacing) * 8);
+  }
   .w-\[120px\] {
     width: 120px;
   }
@@ -1125,19 +1673,43 @@
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .cursor-pointer {
+    cursor: pointer;
+  }
   .resize {
     resize: both;
   }
+  .flex-row-reverse {
+    flex-direction: row-reverse;
+  }
   .place-content-center {
     place-content: center;
   }
+  .items-center {
+    align-items: center;
+  }
+  .items-start {
+    align-items: flex-start;
+  }
+  .justify-between {
+    justify-content: space-between;
+  }
+  .justify-center {
+    justify-content: center;
+  }
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
+  .rounded-md {
+    border-radius: var(--radius-md);
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .border-slate-700 {
+    border-color: var(--color-slate-700);
+  }
   .border-b-slate-50 {
     border-bottom-color: var(--color-slate-50);
   }
@@ -1159,6 +1731,10 @@
   .text-center {
     text-align: center;
   }
+  .text-lg {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+  }
   .text-sm {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
@@ -1173,21 +1749,24 @@
   .whitespace-normal {
     white-space: normal;
   }
-  .text-emerald-400 {
-    color: var(--color-emerald-400);
+  .text-brand-emerald-400 {
+    color: var(--color-brand-emerald-400);
   }
-  .text-pink-400 {
-    color: var(--color-pink-400);
+  .text-brand-pink-400 {
+    color: var(--color-brand-pink-400);
+  }
+  .text-brand-violet-400 {
+    color: var(--color-brand-violet-400);
   }
   .text-slate-50 {
     color: var(--color-slate-50);
   }
+  .text-slate-300 {
+    color: var(--color-slate-300);
+  }
   .text-slate-500 {
     color: var(--color-slate-500);
   }
-  .text-violet-400 {
-    color: var(--color-violet-400);
-  }
   .italic {
     font-style: italic;
   }
@@ -1203,6 +1782,9 @@
   .opacity-40 {
     opacity: 40%;
   }
+  .opacity-50 {
+    opacity: 50%;
+  }
   .shadow {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1236,6 +1818,13 @@
       }
     }
   }
+  .hover\:border-slate-500 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-slate-500);
+      }
+    }
+  }
   .hover\:bg-slate-700 {
     &:hover {
       @media (hover: hover) {
@@ -1250,24 +1839,24 @@
       }
     }
   }
-  .hover\:text-emerald-300 {
+  .hover\:text-brand-emerald-200 {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-emerald-300);
+        color: var(--color-brand-emerald-200);
       }
     }
   }
-  .hover\:text-pink-300 {
+  .hover\:text-pink-200 {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-pink-300);
+        color: var(--color-pink-200);
       }
     }
   }
-  .hover\:text-violet-300 {
+  .hover\:text-violet-200 {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-violet-300);
+        color: var(--color-violet-200);
       }
     }
   }
@@ -1278,6 +1867,21 @@
       }
     }
   }
+  .light\:block {
+    .light & {
+      display: block;
+    }
+  }
+  .light\:hidden {
+    .light & {
+      display: none;
+    }
+  }
+  .light\:opacity-60 {
+    .light & {
+      opacity: 60%;
+    }
+  }
 }
 [x-cloak] {
   display: none !important;
@@ -1340,7 +1944,7 @@
     height: 100vh;
     width: calc(var(--spacing) * 72);
     scrollbar-width: thin;
-    scrollbar-color: #4b5563 #1f2937;
+    scrollbar-color: var(--color-slate-900) var(--color-slate-700);
   }
   .layout__main-center {
     height: 100vh;
@@ -1351,7 +1955,7 @@
     padding: calc(var(--spacing) * 10);
     color: var(--color-slate-300);
     scrollbar-width: thin;
-    scrollbar-color: #4b5563 #1f2937;
+    scrollbar-color: var(--color-slate-900) var(--color-slate-700);
   }
   .layout__main-center-content {
     @media (width >= 80rem) {
@@ -1528,7 +2132,7 @@
     height: calc(var(--spacing) * 1.5);
     width: calc(var(--spacing) * 1.5);
     border-radius: calc(infinity * 1px);
-    background-color: var(--color-green-600);
+    background-color: var(--color-brand-emerald-400);
   }
   .main__badge-inner-text {
     font-size: var(--text-xs);
@@ -1536,9 +2140,12 @@
     color: var(--color-slate-100);
   }
   .main__badge--success {
-    border-color: var(--color-green-400);
-    background-color: var(--color-green-950);
-    color: var(--color-green-200);
+    border-color: var(--color-brand-emerald-400);
+    background-color: var(--color-brand-emerald-950);
+    color: var(--color-brand-emerald-200);
+  }
+  .main__badge--success .main__badge-text {
+    color: var(--color-brand-emerald-200);
   }
   .main__badge--success::before {
     content: "✓";
@@ -1548,9 +2155,9 @@
     align-items: center;
     justify-content: center;
     border-radius: calc(infinity * 1px);
-    background-color: var(--color-green-400);
+    background-color: var(--color-brand-emerald-400);
     font-size: 8px;
-    color: var(--color-green-950);
+    color: var(--color-brand-emerald-950);
   }
   .main__badge--disabled::before {
     content: "-";
@@ -1560,7 +2167,7 @@
     align-items: center;
     justify-content: center;
     border-radius: calc(infinity * 1px);
-    background-color: var(--color-red-400);
+    background-color: var(--color-brand-red-400);
     font-size: 10px;
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
@@ -1584,10 +2191,7 @@
     }
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(96.8% 0.007 247.896) 10%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-slate-100) 10%, transparent);
-        }
+        background-color: var(--color-slate-800);
       }
     }
     &>b {
@@ -1613,12 +2217,16 @@
     border-radius: var(--radius-lg);
     border-style: var(--tw-border-style);
     border-width: 1px;
-    border-color: var(--color-yellow-900);
-    background-color: #291404;
+    border-color: var(--color-brand-yellow-700);
+    background-color: var(--color-brand-yellow-950);
     padding: calc(var(--spacing) * 3);
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
-    color: var(--color-yellow-50);
+    color: var(--color-brand-yellow-50);
+  }
+  .metadata__warning code {
+    border-color: var(--color-brand-yellow-700);
+    background-color: var(--color-brand-yellow-900);
   }
   .main__run-with-container {
     margin-top: calc(var(--spacing) * 4);
@@ -1689,7 +2297,7 @@
   .main__run-with-content-text {
     border-radius: var(--radius-md);
     border-color: var(--color-slate-700);
-    background-color: var(--color-black);
+    background-color: var(--color-slate-950);
     padding-inline: 0.4em;
     padding-block: 0.2em;
     font-family: var(--font-mono);
@@ -1811,7 +2419,7 @@
     width: 100%;
     height: 100%;
     flex-direction: column;
-    background-color: #111420;
+    background-color: var(--color-slate-900);
     padding-top: calc(var(--spacing) * 4);
     text-wrap: nowrap;
     color: var(--color-slate-400);
@@ -1852,6 +2460,9 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
     --tw-outline-style: none;
     outline-style: none;
+    &::placeholder {
+      color: var(--color-slate-400);
+    }
     &:focus {
       border-color: var(--color-slate-400);
     }
@@ -2089,9 +2700,9 @@
     color: var(--color-slate-400);
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 30%, transparent);
+        background-color: color-mix(in srgb, oklch(44.6% 0.043 257.281) 20%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-slate-400) 30%, transparent);
+          background-color: color-mix(in oklab, var(--color-slate-600) 20%, transparent);
         }
       }
     }
@@ -2167,6 +2778,15 @@
   font-size: 0.8em;
   color: var(--color-slate-200);
 }
+.markdown-body pre {
+  border-radius: var(--radius-md);
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  border-color: var(--color-slate-700);
+  background-color: var(--color-slate-900);
+  font-family: var(--font-mono);
+  color: var(--color-slate-200);
+}
 .main__container .markdown-body {
   max-width: var(--container-4xl);
 }
diff --git a/src/commands/doc.rs b/src/commands/doc.rs
index 91e23611..cebc78da 100644
--- a/src/commands/doc.rs
+++ b/src/commands/doc.rs
@@ -30,11 +30,20 @@ pub struct Args {
     /// Path to an SVG logo to embed on each page.
     ///
     /// If not supplied, the default Sprocket logo will be used.
-    #[arg(short, long, value_name = "SVG FILE")]
+    #[arg(long, value_name = "SVG FILE")]
     pub logo: Option<PathBuf>,
+    /// Path to an alternate light mode SVG logo to embed on each page.
+    ///
+    /// If not supplied, the `--logo` SVG will be used; or if that is also not
+    /// supplied, the default Sprocket logo will be used.
+    #[arg(long, value_name = "SVG FILE")]
+    pub alt_light_logo: Option<PathBuf>,
+    /// Initialize pages in light mode instead of the default dark mode.
+    #[arg(short, long)]
+    pub light_mode: bool,
     /// Initialize pages on the "Workflows" view instead of the "Full
     /// Directory" view of the left nav bar.
-    #[arg(long)]
+    #[arg(short, long)]
     pub prioritize_workflows_view: bool,
     /// Output directory for the generated documentation.
     /// If not specified, the documentation will be generated in
@@ -167,8 +176,10 @@ pub async fn doc(args: Args) -> Result<()> {
         .with_diagnostics_config(DiagnosticsConfig::except_all());
     let config = Config::new(analysis_config, &workspace, &docs_dir)
         .homepage(args.homepage)
+        .init_light_mode(args.light_mode)
         .custom_theme(args.theme)
         .custom_logo(args.logo)
+        .alt_logo(args.alt_light_logo)
         .additional_javascript(addl_js)
         .prefer_full_directory(!args.prioritize_workflows_view);
 
diff --git a/tests/cli/doc/custom_logo/args b/tests/cli/doc/custom_logo/args
index 54642318..0180644f 100644
--- a/tests/cli/doc/custom_logo/args
+++ b/tests/cli/doc/custom_logo/args
@@ -1 +1 @@
-dev doc -l test-logo.svg
\ No newline at end of file
+dev doc --logo test-logo.svg
\ No newline at end of file
diff --git a/tests/cli/doc/custom_logo/outputs/docs/file/index.html b/tests/cli/doc/custom_logo/outputs/docs/file/index.html
index a4fb0bc8..b7ffc28b 100644
--- a/tests/cli/doc/custom_logo/outputs/docs/file/index.html
+++ b/tests/cli/doc/custom_logo/outputs/docs/file/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html class="dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>file</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&amp;display=swap" rel="stylesheet"><script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script defer src="../index.js"></script><link rel="stylesheet" type="text/css" href="../style.css"></head><body class="body--base"><div class="layout__container layout__container--alt-layout" x-transition x-data="{
+<!DOCTYPE html><html x-data="{ DEFAULT_THEME: '' }" x-bind:class="(localStorage.getItem('theme') ?? DEFAULT_THEME) === 'light' ? 'light' : ''" x-cloak><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>file</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&amp;display=swap" rel="stylesheet"><script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script defer src="../index.js"></script><link rel="stylesheet" type="text/css" href="../style.css"></head><body class="body--base"><div class="layout__container layout__container--alt-layout" x-transition x-data="{
                 sidebarState: $persist(window.innerWidth &lt; 768 ? 'hidden' : 'normal').using(sessionStorage),
                 get showSidebarButtons() { return this.sidebarState !== 'hidden'; },
                 get showCenterButtons() { return this.sidebarState === 'hidden'; },
@@ -16,7 +16,7 @@
                 collapseSidebar() { this.sidebarState = 'hidden'; },
                 restoreSidebar() { this.sidebarState = 'normal'; },
                 expandSidebar() { this.sidebarState = 'xl'; }
-            }" x-bind:class="containerClasses"><div class="layout__sidebar-left" x-transition><div class="absolute top-5 right-2 flex gap-1 z-10" x-cloak x-show="showSidebarButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../assets/sidebar-icon-hide.svg" alt=""></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../assets/sidebar-icon-default.svg" alt=""></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../assets/sidebar-icon-expand.svg" alt=""></img></button></div><div x-data="{
+            }" x-bind:class="containerClasses"><div class="layout__sidebar-left" x-transition><div class="absolute top-5 right-2 flex gap-1 z-10" x-cloak x-show="showSidebarButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../assets/sidebar-icon-hide.svg" alt="" class="block light:hidden"></img><img src="../assets/sidebar-icon-hide.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../assets/sidebar-icon-default.svg" alt="" class="block light:hidden"></img><img src="../assets/sidebar-icon-default.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../assets/sidebar-icon-expand.svg" alt="" class="block light:hidden"></img><img src="../assets/sidebar-icon-expand.light.svg" alt="" class="hidden light:block"></img></button></div><div x-data="{
                 showWorkflows: $persist(false).using(sessionStorage),
                 search: $persist('').using(sessionStorage),
                 dirOpen: '../assets/chevron-up.svg',
@@ -68,9 +68,12 @@
                         this.showChildrenCache[n.key] = true;
                     });
                 }
-            }" x-cloak x-init="$nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__container"><div class="sticky px-4"><a href="../index.html"><img src="../assets/logo.svg" class="w-[120px] flex-none mb-8" alt="Logo"></a><div class="relative w-full h-10"><input id="searchbox" x-model.debounce="search" type="text" placeholder="Search..." class="left-sidebar__searchbox"><img src="../assets/search.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none" alt="Search icon"><img src="../assets/x-mark.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"></div><div class="left-sidebar__tabs-container mt-4"><button x-on:click="showWorkflows = true; search = ''; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="! showWorkflows ? 'opacity-40 hover:opacity-80' : ''"><img src="../assets/list-bullet-selected.svg" class="left-sidebar__icon" alt="List icon"><p>Workflows</p></button><button x-on:click="showWorkflows = false; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="showWorkflows ? 'opacity-40 hover:opacity-80' : ''"><img src="../assets/folder-selected.svg" class="left-sidebar__icon" alt="List icon"><p>Full Directory</p></button></div></div><div x-cloak class="left-sidebar__content-container pt-4"><ul x-show="! showWorkflows || search != ''" class="left-sidebar__content"><sprocket-tooltip content="docs" class="block"><a href="../index.html" x-show="search === ''" aria-label="docs" class="left-sidebar__row hover:bg-slate-700"><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative shrink-0"><img src="../assets/dir-open.svg" class="left-sidebar__icon" alt="Directory icon"></div><div class="text-slate-50">docs</div></div></a></sprocket-tooltip><template x-for="node in shownNodes"><sprocket-tooltip x-bind:content="node.display_name" class="block isolate"><a x-bind:href="node.href" x-show="showSelfCache[node.key]" x-on:click="if (node.href === null) toggleChildren(node.key)" x-bind:aria-label="node.display_name" class="left-sidebar__row" x-bind:class="`${node.current ? 'is-scrolled-to left-sidebar__row--active' : (node.href === null) ? showChildrenCache[node.key] ? 'left-sidebar__row-folder left-sidebar__row-folder--open' : 'left-sidebar__row-folder left-sidebar__row-folder--closed' : 'left-sidebar__row-page'} ${node.ancestor ? 'left-sidebar__content-item-container--ancestor' : ''}`"><template x-for="i in Array.from({ length: node.nest_level })"><div class="left-sidebar__indent -z-1"></div></template><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative left-sidebar__icon shrink-0"><img x-bind:src="node.icon || dirOpen" class="left-sidebar__icon" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"></div><div class="crop-ellipsis" x-text="node.display_name"></div></div></a></sprocket-tooltip></template><template x-for="node in searchedNodes"><li class="left-sidebar__search-result-item"><p class="text-xs text-slate-500 crop-ellipsis" x-text="node.parent"></p><div class="left-sidebar__search-result-item-container"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Node icon"><sprocket-tooltip class="crop-ellipsis" x-bind:content="node.display_name"><a x-bind:href="node.href" x-text="node.display_name"></a></sprocket-tooltip></div></li></template><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex place-content-center"><img src="../assets/search.svg" class="size-8" alt="Search icon"></li><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex gap-1 place-content-center text-center break-words whitespace-normal text-sm text-slate-500"><span x-text="'No results found for'"></span><span x-text="`&quot;${search}&quot;`" class="text-slate-50"></span></li></ul><ul x-show="showWorkflows &amp;&amp; search === ''" class="left-sidebar__content"><li class=""><div class="left-sidebar__row"><img src="../assets/category-selected.svg" class="left-sidebar__icon" alt="Category icon"><p class="text-slate-50">Other</p></div><ul class=""><a href="test-workflow.html" x-data="{
+            }" x-cloak x-init="$nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__container"><div class="sticky px-4"><a href="../index.html"><img src="../assets/logo.svg" class="w-[120px] flex-none mb-8 block light:hidden" alt="Logo"><img src="../assets/logo.light.svg" class="w-[120px] flex-none mb-8 hidden light:block" alt="Logo"></a><div class="relative w-full h-10"><input id="searchbox" x-model.debounce="search" type="text" placeholder="Search..." class="left-sidebar__searchbox"><img src="../assets/search.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none block light:hidden" alt="Search icon"><img src="../assets/search.light.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none hidden light:block" alt="Search icon"><img src="../assets/x-mark.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer block light:hidden" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"><img src="../assets/x-mark.light.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer hidden light:block" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"></div><div class="left-sidebar__tabs-container mt-4"><button x-on:click="showWorkflows = true; search = ''; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="! showWorkflows ? 'opacity-40 light:opacity-60 hover:opacity-80' : ''"><img src="../assets/list-bullet-selected.svg" class="left-sidebar__icon block light:hidden" alt="List icon"><img src="../assets/list-bullet-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="List icon"><p>Workflows</p></button><button x-on:click="showWorkflows = false; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="showWorkflows ? 'opacity-50 light:opacity-60 hover:opacity-80' : ''"><img src="../assets/folder-selected.svg" class="left-sidebar__icon block light:hidden" alt="List icon"><img src="../assets/folder-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="List icon"><p>Full Directory</p></button></div></div><div x-cloak class="left-sidebar__content-container pt-4"><ul x-show="! showWorkflows || search != ''" class="left-sidebar__content"><sprocket-tooltip content="docs" class="block"><a href="../index.html" x-show="search === ''" aria-label="docs" class="left-sidebar__row hover:bg-slate-700"><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative shrink-0"><img src="../assets/dir-open.svg" class="left-sidebar__icon block light:hidden" alt="Directory icon"><img src="../assets/dir-open.light.svg" class="left-sidebar__icon hidden light:block" alt="Directory icon"></div><div class="text-slate-50">docs</div></div></a></sprocket-tooltip><template x-for="node in shownNodes"><sprocket-tooltip x-bind:content="node.display_name" class="block isolate"><a x-bind:href="node.href" x-show="showSelfCache[node.key]" x-on:click="if (node.href === null) toggleChildren(node.key)" x-bind:aria-label="node.display_name" class="left-sidebar__row" x-bind:class="`${node.current ? 'is-scrolled-to left-sidebar__row--active' : (node.href === null) ? showChildrenCache[node.key] ? 'left-sidebar__row-folder left-sidebar__row-folder--open' : 'left-sidebar__row-folder left-sidebar__row-folder--closed' : 'left-sidebar__row-page'} ${node.ancestor ? 'left-sidebar__content-item-container--ancestor' : ''}`"><template x-for="i in Array.from({ length: node.nest_level })"><div class="left-sidebar__indent -z-1"></div></template><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative left-sidebar__icon shrink-0"><img x-bind:src="node.icon || dirOpen" class="left-sidebar__icon block light:hidden" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"><img x-bind:src="(node.icon || dirOpen).replace('.svg', '.light.svg')" class="left-sidebar__icon hidden light:block" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"></div><div class="crop-ellipsis" x-text="node.display_name"></div></div></a></sprocket-tooltip></template><template x-for="node in searchedNodes"><li class="left-sidebar__search-result-item"><p class="text-xs text-slate-500 crop-ellipsis" x-text="node.parent"></p><div class="left-sidebar__search-result-item-container"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Node icon"><sprocket-tooltip class="crop-ellipsis" x-bind:content="node.display_name"><a x-bind:href="node.href" x-text="node.display_name"></a></sprocket-tooltip></div></li></template><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex place-content-center"><img src="../assets/search.svg" class="size-8 block light:hidden" alt="Search icon"><img src="../assets/search.light.svg" class="size-8 hidden light:block" alt="Search icon"></li><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex gap-1 place-content-center text-center break-words whitespace-normal text-sm text-slate-500"><span x-text="'No results found for'"></span><span x-text="`&quot;${search}&quot;`" class="text-slate-50"></span></li></ul><ul x-show="showWorkflows &amp;&amp; search === ''" class="left-sidebar__content"><li class=""><div class="left-sidebar__row"><img src="../assets/category-selected.svg" class="left-sidebar__icon block light:hidden" alt="Category icon"><img src="../assets/category-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="Category icon"><p class="text-slate-50">Other</p></div><ul class=""><a href="test-workflow.html" x-data="{
                                     node: {
                                         current: false,
                                         icon: '../assets/workflow-unselected.svg',
                                     }
-                                }" class="left-sidebar__row" x-bind:class="node.current ? 'bg-slate-700/50 is-scrolled-to' : 'hover:bg-slate-800'"><div class="left-sidebar__indent -1"></div><div class="left-sidebar__content-item-container crop-ellipsis"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Workflow icon"><sprocket-tooltip content="test" class="crop-ellipsis" x-bind:class="node.current ? 'text-slate-50' : 'group-hover:text-slate-50'"><span>test</span></sprocket-tooltip></div></a></ul></li></ul></div></div></div><div class="layout__main-center"><div class="layout__main-center-content"><div><div class="flex gap-1 mb-3" x-show="showCenterButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../assets/sidebar-icon-hide.svg" alt=""></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../assets/sidebar-icon-default.svg" alt=""></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../assets/sidebar-icon-expand.svg" alt=""></img></button></div><div class="layout__breadcrumbs"><div class="layout__breadcrumb-container"><a class="layout__breadcrumb-clickable" href="../index.html">docs</a><span> / </span><span class="layout__breadcrumb-inactive">file</span></div></div></div><div class="main__container"><h1 id="title" class="main__title">file</h1><div class="main__badge-container"><div class="main__badge"><span class="main__badge-text">WDL Version</span><div class="main__badge-inner"><span class="main__badge-inner-text">1.2</span></div><div class="main__badge-inner main__badge-inner-latest"><span class="main__badge-inner-text">Latest</span></div></div></div><div class="main__section"><h2 id="toc" class="main__section-header">Table of Contents</h2><div class="main__grid-container"><div class="main__grid-toc-container"><div class="main__grid-header-cell">Page</div><div class="main__grid-header-cell">Type</div><div class="main__grid-header-cell">Description</div><div class="main__grid-header-separator"></div><div class="main__grid-row" x-data="{ description_expanded: false }"><div class="main__grid-cell"><a class="text-emerald-400 hover:text-emerald-300" href="test-workflow.html">test</a></div><div class="main__grid-cell"><code>workflow</code></div><div class="main__grid-cell">No description provided</div><div x-show="description_expanded" class="main__grid-full-width-cell">No description provided</div></div></div></div></div></div></div></div><div class="layout__sidebar-right"><div class="right-sidebar__container"><div class="right-sidebar__header">ON THIS PAGE</div><a href="#preamble" class="right-sidebar__section-header">Preamble</a><a href="#toc" class="right-sidebar__section-header">Table of Contents</a><div class="right-sidebar__back-to-top-container"><a href="#title" class="right-sidebar__back-to-top"><span class="right-sidebar__back-to-top-icon">↑</span><span class="right-sidebar__back-to-top-text">Back to top</span></a></div></div></div></div></body></html>
\ No newline at end of file
+                                }" class="left-sidebar__row" x-bind:class="node.current ? 'bg-slate-700/50 is-scrolled-to' : 'hover:bg-slate-800'"><div class="left-sidebar__indent -1"></div><div class="left-sidebar__content-item-container crop-ellipsis"><img x-bind:src="node.icon?.replace('.svg', '.light.svg')" class="left-sidebar__icon" alt="Workflow icon"><sprocket-tooltip content="test" class="crop-ellipsis" x-bind:class="node.current ? 'text-slate-50' : 'group-hover:text-slate-50'"><span>test</span></sprocket-tooltip></div></a></ul></li></ul></div></div></div><div class="layout__main-center"><div class="layout__main-center-content"><div><div class="flex gap-1 mb-3" x-show="showCenterButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../assets/sidebar-icon-hide.svg" alt="" class="block light:hidden"></img><img src="../assets/sidebar-icon-hide.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../assets/sidebar-icon-default.svg" alt="" class="block light:hidden"></img><img src="../assets/sidebar-icon-default.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../assets/sidebar-icon-expand.svg" alt="" class="block light:hidden"></img><img src="../assets/sidebar-icon-expand.light.svg" alt="" class="hidden light:block"></img></button></div><div class="flex flex-row-reverse items-start justify-between"><button x-on:click="
+                                document.documentElement.classList.toggle('light')
+                                localStorage.setItem('theme', document.documentElement.classList.contains('light') ? 'light' : 'dark')
+                                " class="border border-slate-700 rounded-md h-8 flex items-center justify-center text-slate-300 text-lg w-8 cursor-pointer hover:border-slate-500">☀︎</button><div class="layout__breadcrumbs"><div class="layout__breadcrumb-container"><a class="layout__breadcrumb-clickable" href="../index.html">docs</a><span> / </span><span class="layout__breadcrumb-inactive">file</span></div></div></div></div><div class="main__container"><h1 id="title" class="main__title">file</h1><div class="main__badge-container"><div class="main__badge"><span class="main__badge-text">WDL Version</span><div class="main__badge-inner"><span class="main__badge-inner-text">1.2</span></div><div class="main__badge-inner main__badge-inner-latest"><span class="main__badge-inner-text">Latest</span></div></div></div><div class="main__section"><h2 id="toc" class="main__section-header">Table of Contents</h2><div class="main__grid-container"><div class="main__grid-toc-container"><div class="main__grid-header-cell">Page</div><div class="main__grid-header-cell">Type</div><div class="main__grid-header-cell">Description</div><div class="main__grid-header-separator"></div><div class="main__grid-row" x-data="{ description_expanded: false }"><div class="main__grid-cell"><a class="text-brand-emerald-400 hover:text-brand-emerald-200" href="test-workflow.html">test</a></div><div class="main__grid-cell"><code>workflow</code></div><div class="main__grid-cell">No description provided</div><div x-show="description_expanded" class="main__grid-full-width-cell">No description provided</div></div></div></div></div></div></div></div><div class="layout__sidebar-right"><div class="right-sidebar__container"><div class="right-sidebar__header">ON THIS PAGE</div><a href="#preamble" class="right-sidebar__section-header">Preamble</a><a href="#toc" class="right-sidebar__section-header">Table of Contents</a><div class="right-sidebar__back-to-top-container"><a href="#title" class="right-sidebar__back-to-top"><span class="right-sidebar__back-to-top-icon">↑</span><span class="right-sidebar__back-to-top-text">Back to top</span></a></div></div></div></div></body></html>
\ No newline at end of file
diff --git a/tests/cli/doc/custom_logo/outputs/docs/file/test-workflow.html b/tests/cli/doc/custom_logo/outputs/docs/file/test-workflow.html
index ab33212c..7adeae53 100644
--- a/tests/cli/doc/custom_logo/outputs/docs/file/test-workflow.html
+++ b/tests/cli/doc/custom_logo/outputs/docs/file/test-workflow.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html class="dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>test</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&amp;display=swap" rel="stylesheet"><script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script defer src="../index.js"></script><link rel="stylesheet" type="text/css" href="../style.css"></head><body class="body--base"><div class="layout__container layout__container--alt-layout" x-transition x-data="{
+<!DOCTYPE html><html x-data="{ DEFAULT_THEME: '' }" x-bind:class="(localStorage.getItem('theme') ?? DEFAULT_THEME) === 'light' ? 'light' : ''" x-cloak><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>test</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&amp;display=swap" rel="stylesheet"><script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script defer src="../index.js"></script><link rel="stylesheet" type="text/css" href="../style.css"></head><body class="body--base"><div class="layout__container layout__container--alt-layout" x-transition x-data="{
                 sidebarState: $persist(window.innerWidth &lt; 768 ? 'hidden' : 'normal').using(sessionStorage),
                 get showSidebarButtons() { return this.sidebarState !== 'hidden'; },
                 get showCenterButtons() { return this.sidebarState === 'hidden'; },
@@ -16,7 +16,7 @@
                 collapseSidebar() { this.sidebarState = 'hidden'; },
                 restoreSidebar() { this.sidebarState = 'normal'; },
                 expandSidebar() { this.sidebarState = 'xl'; }
-            }" x-bind:class="containerClasses"><div class="layout__sidebar-left" x-transition><div class="absolute top-5 right-2 flex gap-1 z-10" x-cloak x-show="showSidebarButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../assets/sidebar-icon-hide.svg" alt=""></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../assets/sidebar-icon-default.svg" alt=""></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../assets/sidebar-icon-expand.svg" alt=""></img></button></div><div x-data="{
+            }" x-bind:class="containerClasses"><div class="layout__sidebar-left" x-transition><div class="absolute top-5 right-2 flex gap-1 z-10" x-cloak x-show="showSidebarButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../assets/sidebar-icon-hide.svg" alt="" class="block light:hidden"></img><img src="../assets/sidebar-icon-hide.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../assets/sidebar-icon-default.svg" alt="" class="block light:hidden"></img><img src="../assets/sidebar-icon-default.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../assets/sidebar-icon-expand.svg" alt="" class="block light:hidden"></img><img src="../assets/sidebar-icon-expand.light.svg" alt="" class="hidden light:block"></img></button></div><div x-data="{
                 showWorkflows: $persist(false).using(sessionStorage),
                 search: $persist('').using(sessionStorage),
                 dirOpen: '../assets/chevron-up.svg',
@@ -68,9 +68,12 @@
                         this.showChildrenCache[n.key] = true;
                     });
                 }
-            }" x-cloak x-init="$nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__container"><div class="sticky px-4"><a href="../index.html"><img src="../assets/logo.svg" class="w-[120px] flex-none mb-8" alt="Logo"></a><div class="relative w-full h-10"><input id="searchbox" x-model.debounce="search" type="text" placeholder="Search..." class="left-sidebar__searchbox"><img src="../assets/search.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none" alt="Search icon"><img src="../assets/x-mark.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"></div><div class="left-sidebar__tabs-container mt-4"><button x-on:click="showWorkflows = true; search = ''; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="! showWorkflows ? 'opacity-40 hover:opacity-80' : ''"><img src="../assets/list-bullet-selected.svg" class="left-sidebar__icon" alt="List icon"><p>Workflows</p></button><button x-on:click="showWorkflows = false; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="showWorkflows ? 'opacity-40 hover:opacity-80' : ''"><img src="../assets/folder-selected.svg" class="left-sidebar__icon" alt="List icon"><p>Full Directory</p></button></div></div><div x-cloak class="left-sidebar__content-container pt-4"><ul x-show="! showWorkflows || search != ''" class="left-sidebar__content"><sprocket-tooltip content="docs" class="block"><a href="../index.html" x-show="search === ''" aria-label="docs" class="left-sidebar__row hover:bg-slate-700"><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative shrink-0"><img src="../assets/dir-open.svg" class="left-sidebar__icon" alt="Directory icon"></div><div class="text-slate-50">docs</div></div></a></sprocket-tooltip><template x-for="node in shownNodes"><sprocket-tooltip x-bind:content="node.display_name" class="block isolate"><a x-bind:href="node.href" x-show="showSelfCache[node.key]" x-on:click="if (node.href === null) toggleChildren(node.key)" x-bind:aria-label="node.display_name" class="left-sidebar__row" x-bind:class="`${node.current ? 'is-scrolled-to left-sidebar__row--active' : (node.href === null) ? showChildrenCache[node.key] ? 'left-sidebar__row-folder left-sidebar__row-folder--open' : 'left-sidebar__row-folder left-sidebar__row-folder--closed' : 'left-sidebar__row-page'} ${node.ancestor ? 'left-sidebar__content-item-container--ancestor' : ''}`"><template x-for="i in Array.from({ length: node.nest_level })"><div class="left-sidebar__indent -z-1"></div></template><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative left-sidebar__icon shrink-0"><img x-bind:src="node.icon || dirOpen" class="left-sidebar__icon" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"></div><div class="crop-ellipsis" x-text="node.display_name"></div></div></a></sprocket-tooltip></template><template x-for="node in searchedNodes"><li class="left-sidebar__search-result-item"><p class="text-xs text-slate-500 crop-ellipsis" x-text="node.parent"></p><div class="left-sidebar__search-result-item-container"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Node icon"><sprocket-tooltip class="crop-ellipsis" x-bind:content="node.display_name"><a x-bind:href="node.href" x-text="node.display_name"></a></sprocket-tooltip></div></li></template><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex place-content-center"><img src="../assets/search.svg" class="size-8" alt="Search icon"></li><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex gap-1 place-content-center text-center break-words whitespace-normal text-sm text-slate-500"><span x-text="'No results found for'"></span><span x-text="`&quot;${search}&quot;`" class="text-slate-50"></span></li></ul><ul x-show="showWorkflows &amp;&amp; search === ''" class="left-sidebar__content"><li class=""><div class="left-sidebar__row"><img src="../assets/category-selected.svg" class="left-sidebar__icon" alt="Category icon"><p class="text-slate-50">Other</p></div><ul class=""><a href="test-workflow.html" x-data="{
+            }" x-cloak x-init="$nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__container"><div class="sticky px-4"><a href="../index.html"><img src="../assets/logo.svg" class="w-[120px] flex-none mb-8 block light:hidden" alt="Logo"><img src="../assets/logo.light.svg" class="w-[120px] flex-none mb-8 hidden light:block" alt="Logo"></a><div class="relative w-full h-10"><input id="searchbox" x-model.debounce="search" type="text" placeholder="Search..." class="left-sidebar__searchbox"><img src="../assets/search.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none block light:hidden" alt="Search icon"><img src="../assets/search.light.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none hidden light:block" alt="Search icon"><img src="../assets/x-mark.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer block light:hidden" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"><img src="../assets/x-mark.light.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer hidden light:block" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"></div><div class="left-sidebar__tabs-container mt-4"><button x-on:click="showWorkflows = true; search = ''; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="! showWorkflows ? 'opacity-40 light:opacity-60 hover:opacity-80' : ''"><img src="../assets/list-bullet-selected.svg" class="left-sidebar__icon block light:hidden" alt="List icon"><img src="../assets/list-bullet-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="List icon"><p>Workflows</p></button><button x-on:click="showWorkflows = false; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="showWorkflows ? 'opacity-50 light:opacity-60 hover:opacity-80' : ''"><img src="../assets/folder-selected.svg" class="left-sidebar__icon block light:hidden" alt="List icon"><img src="../assets/folder-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="List icon"><p>Full Directory</p></button></div></div><div x-cloak class="left-sidebar__content-container pt-4"><ul x-show="! showWorkflows || search != ''" class="left-sidebar__content"><sprocket-tooltip content="docs" class="block"><a href="../index.html" x-show="search === ''" aria-label="docs" class="left-sidebar__row hover:bg-slate-700"><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative shrink-0"><img src="../assets/dir-open.svg" class="left-sidebar__icon block light:hidden" alt="Directory icon"><img src="../assets/dir-open.light.svg" class="left-sidebar__icon hidden light:block" alt="Directory icon"></div><div class="text-slate-50">docs</div></div></a></sprocket-tooltip><template x-for="node in shownNodes"><sprocket-tooltip x-bind:content="node.display_name" class="block isolate"><a x-bind:href="node.href" x-show="showSelfCache[node.key]" x-on:click="if (node.href === null) toggleChildren(node.key)" x-bind:aria-label="node.display_name" class="left-sidebar__row" x-bind:class="`${node.current ? 'is-scrolled-to left-sidebar__row--active' : (node.href === null) ? showChildrenCache[node.key] ? 'left-sidebar__row-folder left-sidebar__row-folder--open' : 'left-sidebar__row-folder left-sidebar__row-folder--closed' : 'left-sidebar__row-page'} ${node.ancestor ? 'left-sidebar__content-item-container--ancestor' : ''}`"><template x-for="i in Array.from({ length: node.nest_level })"><div class="left-sidebar__indent -z-1"></div></template><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative left-sidebar__icon shrink-0"><img x-bind:src="node.icon || dirOpen" class="left-sidebar__icon block light:hidden" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"><img x-bind:src="(node.icon || dirOpen).replace('.svg', '.light.svg')" class="left-sidebar__icon hidden light:block" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"></div><div class="crop-ellipsis" x-text="node.display_name"></div></div></a></sprocket-tooltip></template><template x-for="node in searchedNodes"><li class="left-sidebar__search-result-item"><p class="text-xs text-slate-500 crop-ellipsis" x-text="node.parent"></p><div class="left-sidebar__search-result-item-container"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Node icon"><sprocket-tooltip class="crop-ellipsis" x-bind:content="node.display_name"><a x-bind:href="node.href" x-text="node.display_name"></a></sprocket-tooltip></div></li></template><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex place-content-center"><img src="../assets/search.svg" class="size-8 block light:hidden" alt="Search icon"><img src="../assets/search.light.svg" class="size-8 hidden light:block" alt="Search icon"></li><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex gap-1 place-content-center text-center break-words whitespace-normal text-sm text-slate-500"><span x-text="'No results found for'"></span><span x-text="`&quot;${search}&quot;`" class="text-slate-50"></span></li></ul><ul x-show="showWorkflows &amp;&amp; search === ''" class="left-sidebar__content"><li class=""><div class="left-sidebar__row"><img src="../assets/category-selected.svg" class="left-sidebar__icon block light:hidden" alt="Category icon"><img src="../assets/category-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="Category icon"><p class="text-slate-50">Other</p></div><ul class=""><a href="test-workflow.html" x-data="{
                                     node: {
                                         current: true,
                                         icon: '../assets/workflow-selected.svg',
                                     }
-                                }" class="left-sidebar__row" x-bind:class="node.current ? 'bg-slate-700/50 is-scrolled-to' : 'hover:bg-slate-800'"><div class="left-sidebar__indent -1"></div><div class="left-sidebar__content-item-container crop-ellipsis"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Workflow icon"><sprocket-tooltip content="test" class="crop-ellipsis" x-bind:class="node.current ? 'text-slate-50' : 'group-hover:text-slate-50'"><span>test</span></sprocket-tooltip></div></a></ul></li></ul></div></div></div><div class="layout__main-center"><div class="layout__main-center-content"><div><div class="flex gap-1 mb-3" x-show="showCenterButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../assets/sidebar-icon-hide.svg" alt=""></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../assets/sidebar-icon-default.svg" alt=""></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../assets/sidebar-icon-expand.svg" alt=""></img></button></div><div class="layout__breadcrumbs"><div class="layout__breadcrumb-container"><a class="layout__breadcrumb-clickable" href="../index.html">docs</a><span> / </span><a href="index.html" class="layout__breadcrumb-clickable">file</a><span> / </span><span class="layout__breadcrumb-inactive">test</span></div></div></div><div class="main__container"><span class="text-emerald-400">Workflow</span><h1 id="title" class="main__title">test</h1><div class="markdown-body mb-4">No description provided</div><div class="main__badge-container"><div class="main__badge"><span class="main__badge-text">WDL Version</span><div class="main__badge-inner"><span class="main__badge-inner-text">1.2</span></div><div class="main__badge-inner main__badge-inner-latest"><span class="main__badge-inner-text">Latest</span></div></div><div class="main__badge main__badge--disabled"><span class="main__badge-text">Nested Inputs Not Allowed</span></div></div><div x-data="{ unix: true }" class="main__run-with-container"><div class="main__run-with-label"><span class="main__run-with-label-text">RUN WITH</span><button x-on:click="unix = !unix" class="main__run-with-toggle"><div x-bind:class="unix ? 'main__run-with-toggle-label--active' : 'main__run-with-toggle-label--inactive'">Unix</div><div x-bind:class="!unix ? 'main__run-with-toggle-label--active' : 'main__run-with-toggle-label--inactive'">Windows</div></button></div><div class="main__run-with-content"><p class="main__run-with-content-text">sprocket run --entrypoint test <span x-show="unix">file.wdl</span><span x-show="!unix">file.wdl</span> [INPUTS]...</p></div></div><div class="main__section"></div><div class="main__section"><h2 id="inputs" class="main__section-header">Inputs</h2></div><div class="main__section"><h2 id="outputs" class="main__section-header">Outputs</h2><div class="main__grid-container"><div class="main__grid-non-req-param-container"><div class="main__grid-header-cell">Name</div><div class="main__grid-header-cell">Type</div><div class="main__grid-header-cell">Default</div><div class="main__grid-header-cell">Description</div><div class="main__grid-header-separator"></div></div></div></div></div></div></div><div class="layout__sidebar-right"><div class="right-sidebar__container"><div class="right-sidebar__header">ON THIS PAGE</div><a href="#inputs" class="right-sidebar__section-header">Inputs</a><a href="#outputs" class="right-sidebar__section-header">Outputs</a><div class="right-sidebar__back-to-top-container"><a href="#title" class="right-sidebar__back-to-top"><span class="right-sidebar__back-to-top-icon">↑</span><span class="right-sidebar__back-to-top-text">Back to top</span></a></div></div></div></div></body></html>
\ No newline at end of file
+                                }" class="left-sidebar__row" x-bind:class="node.current ? 'bg-slate-700/50 is-scrolled-to' : 'hover:bg-slate-800'"><div class="left-sidebar__indent -1"></div><div class="left-sidebar__content-item-container crop-ellipsis"><img x-bind:src="node.icon?.replace('.svg', '.light.svg')" class="left-sidebar__icon" alt="Workflow icon"><sprocket-tooltip content="test" class="crop-ellipsis" x-bind:class="node.current ? 'text-slate-50' : 'group-hover:text-slate-50'"><span>test</span></sprocket-tooltip></div></a></ul></li></ul></div></div></div><div class="layout__main-center"><div class="layout__main-center-content"><div><div class="flex gap-1 mb-3" x-show="showCenterButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../assets/sidebar-icon-hide.svg" alt="" class="block light:hidden"></img><img src="../assets/sidebar-icon-hide.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../assets/sidebar-icon-default.svg" alt="" class="block light:hidden"></img><img src="../assets/sidebar-icon-default.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../assets/sidebar-icon-expand.svg" alt="" class="block light:hidden"></img><img src="../assets/sidebar-icon-expand.light.svg" alt="" class="hidden light:block"></img></button></div><div class="flex flex-row-reverse items-start justify-between"><button x-on:click="
+                                document.documentElement.classList.toggle('light')
+                                localStorage.setItem('theme', document.documentElement.classList.contains('light') ? 'light' : 'dark')
+                                " class="border border-slate-700 rounded-md h-8 flex items-center justify-center text-slate-300 text-lg w-8 cursor-pointer hover:border-slate-500">☀︎</button><div class="layout__breadcrumbs"><div class="layout__breadcrumb-container"><a class="layout__breadcrumb-clickable" href="../index.html">docs</a><span> / </span><a href="index.html" class="layout__breadcrumb-clickable">file</a><span> / </span><span class="layout__breadcrumb-inactive">test</span></div></div></div></div><div class="main__container"><span class="text-brand-emerald-400">Workflow</span><h1 id="title" class="main__title">test</h1><div class="markdown-body mb-4">No description provided</div><div class="main__badge-container"><div class="main__badge"><span class="main__badge-text">WDL Version</span><div class="main__badge-inner"><span class="main__badge-inner-text">1.2</span></div><div class="main__badge-inner main__badge-inner-latest"><span class="main__badge-inner-text">Latest</span></div></div><div class="main__badge main__badge--disabled"><span class="main__badge-text">Nested Inputs Not Allowed</span></div></div><div x-data="{ unix: true }" class="main__run-with-container"><div class="main__run-with-label"><span class="main__run-with-label-text">RUN WITH</span><button x-on:click="unix = !unix" class="main__run-with-toggle"><div x-bind:class="unix ? 'main__run-with-toggle-label--active' : 'main__run-with-toggle-label--inactive'">Unix</div><div x-bind:class="!unix ? 'main__run-with-toggle-label--active' : 'main__run-with-toggle-label--inactive'">Windows</div></button></div><div class="main__run-with-content"><p class="main__run-with-content-text">sprocket run --entrypoint test <span x-show="unix">file.wdl</span><span x-show="!unix">file.wdl</span> [INPUTS]...</p></div></div><div class="main__section"></div><div class="main__section"><h2 id="inputs" class="main__section-header">Inputs</h2></div><div class="main__section"><h2 id="outputs" class="main__section-header">Outputs</h2><div class="main__grid-container"><div class="main__grid-non-req-param-container"><div class="main__grid-header-cell">Name</div><div class="main__grid-header-cell">Type</div><div class="main__grid-header-cell">Default</div><div class="main__grid-header-cell">Description</div><div class="main__grid-header-separator"></div></div></div></div></div></div></div><div class="layout__sidebar-right"><div class="right-sidebar__container"><div class="right-sidebar__header">ON THIS PAGE</div><a href="#inputs" class="right-sidebar__section-header">Inputs</a><a href="#outputs" class="right-sidebar__section-header">Outputs</a><div class="right-sidebar__back-to-top-container"><a href="#title" class="right-sidebar__back-to-top"><span class="right-sidebar__back-to-top-icon">↑</span><span class="right-sidebar__back-to-top-text">Back to top</span></a></div></div></div></div></body></html>
\ No newline at end of file
diff --git a/tests/cli/doc/custom_logo/outputs/docs/index.html b/tests/cli/doc/custom_logo/outputs/docs/index.html
index 36831e1e..097d1987 100644
--- a/tests/cli/doc/custom_logo/outputs/docs/index.html
+++ b/tests/cli/doc/custom_logo/outputs/docs/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html class="dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Home</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&amp;display=swap" rel="stylesheet"><script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script defer src="index.js"></script><link rel="stylesheet" type="text/css" href="style.css"></head><body class="body--base"><div class="layout__container layout__container--alt-layout" x-transition x-data="{
+<!DOCTYPE html><html x-data="{ DEFAULT_THEME: '' }" x-bind:class="(localStorage.getItem('theme') ?? DEFAULT_THEME) === 'light' ? 'light' : ''" x-cloak><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Home</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&amp;display=swap" rel="stylesheet"><script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script defer src="index.js"></script><link rel="stylesheet" type="text/css" href="style.css"></head><body class="body--base"><div class="layout__container layout__container--alt-layout" x-transition x-data="{
                 sidebarState: $persist(window.innerWidth &lt; 768 ? 'hidden' : 'normal').using(sessionStorage),
                 get showSidebarButtons() { return this.sidebarState !== 'hidden'; },
                 get showCenterButtons() { return this.sidebarState === 'hidden'; },
@@ -16,7 +16,7 @@
                 collapseSidebar() { this.sidebarState = 'hidden'; },
                 restoreSidebar() { this.sidebarState = 'normal'; },
                 expandSidebar() { this.sidebarState = 'xl'; }
-            }" x-bind:class="containerClasses"><div class="layout__sidebar-left" x-transition><div class="absolute top-5 right-2 flex gap-1 z-10" x-cloak x-show="showSidebarButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="assets/sidebar-icon-hide.svg" alt=""></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="assets/sidebar-icon-default.svg" alt=""></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="assets/sidebar-icon-expand.svg" alt=""></img></button></div><div x-data="{
+            }" x-bind:class="containerClasses"><div class="layout__sidebar-left" x-transition><div class="absolute top-5 right-2 flex gap-1 z-10" x-cloak x-show="showSidebarButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="assets/sidebar-icon-hide.svg" alt="" class="block light:hidden"></img><img src="assets/sidebar-icon-hide.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="assets/sidebar-icon-default.svg" alt="" class="block light:hidden"></img><img src="assets/sidebar-icon-default.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="assets/sidebar-icon-expand.svg" alt="" class="block light:hidden"></img><img src="assets/sidebar-icon-expand.light.svg" alt="" class="hidden light:block"></img></button></div><div x-data="{
                 showWorkflows: $persist(false).using(sessionStorage),
                 search: $persist('').using(sessionStorage),
                 dirOpen: 'assets/chevron-up.svg',
@@ -68,9 +68,12 @@
                         this.showChildrenCache[n.key] = true;
                     });
                 }
-            }" x-cloak x-init="$nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__container"><div class="sticky px-4"><a href="index.html"><img src="assets/logo.svg" class="w-[120px] flex-none mb-8" alt="Logo"></a><div class="relative w-full h-10"><input id="searchbox" x-model.debounce="search" type="text" placeholder="Search..." class="left-sidebar__searchbox"><img src="assets/search.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none" alt="Search icon"><img src="assets/x-mark.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"></div><div class="left-sidebar__tabs-container mt-4"><button x-on:click="showWorkflows = true; search = ''; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="! showWorkflows ? 'opacity-40 hover:opacity-80' : ''"><img src="assets/list-bullet-selected.svg" class="left-sidebar__icon" alt="List icon"><p>Workflows</p></button><button x-on:click="showWorkflows = false; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="showWorkflows ? 'opacity-40 hover:opacity-80' : ''"><img src="assets/folder-selected.svg" class="left-sidebar__icon" alt="List icon"><p>Full Directory</p></button></div></div><div x-cloak class="left-sidebar__content-container pt-4"><ul x-show="! showWorkflows || search != ''" class="left-sidebar__content"><sprocket-tooltip content="docs" class="block"><a href="index.html" x-show="search === ''" aria-label="docs" class="left-sidebar__row hover:bg-slate-700"><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative shrink-0"><img src="assets/dir-open.svg" class="left-sidebar__icon" alt="Directory icon"></div><div class="text-slate-50">docs</div></div></a></sprocket-tooltip><template x-for="node in shownNodes"><sprocket-tooltip x-bind:content="node.display_name" class="block isolate"><a x-bind:href="node.href" x-show="showSelfCache[node.key]" x-on:click="if (node.href === null) toggleChildren(node.key)" x-bind:aria-label="node.display_name" class="left-sidebar__row" x-bind:class="`${node.current ? 'is-scrolled-to left-sidebar__row--active' : (node.href === null) ? showChildrenCache[node.key] ? 'left-sidebar__row-folder left-sidebar__row-folder--open' : 'left-sidebar__row-folder left-sidebar__row-folder--closed' : 'left-sidebar__row-page'} ${node.ancestor ? 'left-sidebar__content-item-container--ancestor' : ''}`"><template x-for="i in Array.from({ length: node.nest_level })"><div class="left-sidebar__indent -z-1"></div></template><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative left-sidebar__icon shrink-0"><img x-bind:src="node.icon || dirOpen" class="left-sidebar__icon" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"></div><div class="crop-ellipsis" x-text="node.display_name"></div></div></a></sprocket-tooltip></template><template x-for="node in searchedNodes"><li class="left-sidebar__search-result-item"><p class="text-xs text-slate-500 crop-ellipsis" x-text="node.parent"></p><div class="left-sidebar__search-result-item-container"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Node icon"><sprocket-tooltip class="crop-ellipsis" x-bind:content="node.display_name"><a x-bind:href="node.href" x-text="node.display_name"></a></sprocket-tooltip></div></li></template><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex place-content-center"><img src="assets/search.svg" class="size-8" alt="Search icon"></li><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex gap-1 place-content-center text-center break-words whitespace-normal text-sm text-slate-500"><span x-text="'No results found for'"></span><span x-text="`&quot;${search}&quot;`" class="text-slate-50"></span></li></ul><ul x-show="showWorkflows &amp;&amp; search === ''" class="left-sidebar__content"><li class=""><div class="left-sidebar__row"><img src="assets/category-selected.svg" class="left-sidebar__icon" alt="Category icon"><p class="text-slate-50">Other</p></div><ul class=""><a href="file/test-workflow.html" x-data="{
+            }" x-cloak x-init="$nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__container"><div class="sticky px-4"><a href="index.html"><img src="assets/logo.svg" class="w-[120px] flex-none mb-8 block light:hidden" alt="Logo"><img src="assets/logo.light.svg" class="w-[120px] flex-none mb-8 hidden light:block" alt="Logo"></a><div class="relative w-full h-10"><input id="searchbox" x-model.debounce="search" type="text" placeholder="Search..." class="left-sidebar__searchbox"><img src="assets/search.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none block light:hidden" alt="Search icon"><img src="assets/search.light.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none hidden light:block" alt="Search icon"><img src="assets/x-mark.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer block light:hidden" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"><img src="assets/x-mark.light.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer hidden light:block" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"></div><div class="left-sidebar__tabs-container mt-4"><button x-on:click="showWorkflows = true; search = ''; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="! showWorkflows ? 'opacity-40 light:opacity-60 hover:opacity-80' : ''"><img src="assets/list-bullet-selected.svg" class="left-sidebar__icon block light:hidden" alt="List icon"><img src="assets/list-bullet-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="List icon"><p>Workflows</p></button><button x-on:click="showWorkflows = false; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="showWorkflows ? 'opacity-50 light:opacity-60 hover:opacity-80' : ''"><img src="assets/folder-selected.svg" class="left-sidebar__icon block light:hidden" alt="List icon"><img src="assets/folder-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="List icon"><p>Full Directory</p></button></div></div><div x-cloak class="left-sidebar__content-container pt-4"><ul x-show="! showWorkflows || search != ''" class="left-sidebar__content"><sprocket-tooltip content="docs" class="block"><a href="index.html" x-show="search === ''" aria-label="docs" class="left-sidebar__row hover:bg-slate-700"><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative shrink-0"><img src="assets/dir-open.svg" class="left-sidebar__icon block light:hidden" alt="Directory icon"><img src="assets/dir-open.light.svg" class="left-sidebar__icon hidden light:block" alt="Directory icon"></div><div class="text-slate-50">docs</div></div></a></sprocket-tooltip><template x-for="node in shownNodes"><sprocket-tooltip x-bind:content="node.display_name" class="block isolate"><a x-bind:href="node.href" x-show="showSelfCache[node.key]" x-on:click="if (node.href === null) toggleChildren(node.key)" x-bind:aria-label="node.display_name" class="left-sidebar__row" x-bind:class="`${node.current ? 'is-scrolled-to left-sidebar__row--active' : (node.href === null) ? showChildrenCache[node.key] ? 'left-sidebar__row-folder left-sidebar__row-folder--open' : 'left-sidebar__row-folder left-sidebar__row-folder--closed' : 'left-sidebar__row-page'} ${node.ancestor ? 'left-sidebar__content-item-container--ancestor' : ''}`"><template x-for="i in Array.from({ length: node.nest_level })"><div class="left-sidebar__indent -z-1"></div></template><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative left-sidebar__icon shrink-0"><img x-bind:src="node.icon || dirOpen" class="left-sidebar__icon block light:hidden" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"><img x-bind:src="(node.icon || dirOpen).replace('.svg', '.light.svg')" class="left-sidebar__icon hidden light:block" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"></div><div class="crop-ellipsis" x-text="node.display_name"></div></div></a></sprocket-tooltip></template><template x-for="node in searchedNodes"><li class="left-sidebar__search-result-item"><p class="text-xs text-slate-500 crop-ellipsis" x-text="node.parent"></p><div class="left-sidebar__search-result-item-container"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Node icon"><sprocket-tooltip class="crop-ellipsis" x-bind:content="node.display_name"><a x-bind:href="node.href" x-text="node.display_name"></a></sprocket-tooltip></div></li></template><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex place-content-center"><img src="assets/search.svg" class="size-8 block light:hidden" alt="Search icon"><img src="assets/search.light.svg" class="size-8 hidden light:block" alt="Search icon"></li><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex gap-1 place-content-center text-center break-words whitespace-normal text-sm text-slate-500"><span x-text="'No results found for'"></span><span x-text="`&quot;${search}&quot;`" class="text-slate-50"></span></li></ul><ul x-show="showWorkflows &amp;&amp; search === ''" class="left-sidebar__content"><li class=""><div class="left-sidebar__row"><img src="assets/category-selected.svg" class="left-sidebar__icon block light:hidden" alt="Category icon"><img src="assets/category-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="Category icon"><p class="text-slate-50">Other</p></div><ul class=""><a href="file/test-workflow.html" x-data="{
                                     node: {
                                         current: false,
                                         icon: 'assets/workflow-unselected.svg',
                                     }
-                                }" class="left-sidebar__row" x-bind:class="node.current ? 'bg-slate-700/50 is-scrolled-to' : 'hover:bg-slate-800'"><div class="left-sidebar__indent -1"></div><div class="left-sidebar__content-item-container crop-ellipsis"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Workflow icon"><sprocket-tooltip content="test" class="crop-ellipsis" x-bind:class="node.current ? 'text-slate-50' : 'group-hover:text-slate-50'"><span>test</span></sprocket-tooltip></div></a></ul></li></ul></div></div></div><div class="layout__main-center"><div class="layout__main-center-content"><div><div class="flex gap-1 mb-3" x-show="showCenterButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="assets/sidebar-icon-hide.svg" alt=""></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="assets/sidebar-icon-default.svg" alt=""></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="assets/sidebar-icon-expand.svg" alt=""></img></button></div></div><h5 class="main__homepage-header">Home</h5><div class="main__section--empty"><img src="assets/missing-home.svg" class="size-12" alt="Missing home icon"><h2 class="main__section-header">There's nothing to see on this page</h2><p>The markdown file for this page wasn't supplied.</p></div></div></div><div class="layout__sidebar-right"><div class="right-sidebar__container"><div class="right-sidebar__header">ON THIS PAGE</div><div class="right-sidebar__back-to-top-container"><a href="#title" class="right-sidebar__back-to-top"><span class="right-sidebar__back-to-top-icon">↑</span><span class="right-sidebar__back-to-top-text">Back to top</span></a></div></div></div></div></body></html>
\ No newline at end of file
+                                }" class="left-sidebar__row" x-bind:class="node.current ? 'bg-slate-700/50 is-scrolled-to' : 'hover:bg-slate-800'"><div class="left-sidebar__indent -1"></div><div class="left-sidebar__content-item-container crop-ellipsis"><img x-bind:src="node.icon?.replace('.svg', '.light.svg')" class="left-sidebar__icon" alt="Workflow icon"><sprocket-tooltip content="test" class="crop-ellipsis" x-bind:class="node.current ? 'text-slate-50' : 'group-hover:text-slate-50'"><span>test</span></sprocket-tooltip></div></a></ul></li></ul></div></div></div><div class="layout__main-center"><div class="layout__main-center-content"><div><div class="flex gap-1 mb-3" x-show="showCenterButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="assets/sidebar-icon-hide.svg" alt="" class="block light:hidden"></img><img src="assets/sidebar-icon-hide.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="assets/sidebar-icon-default.svg" alt="" class="block light:hidden"></img><img src="assets/sidebar-icon-default.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="assets/sidebar-icon-expand.svg" alt="" class="block light:hidden"></img><img src="assets/sidebar-icon-expand.light.svg" alt="" class="hidden light:block"></img></button></div><div class="flex flex-row-reverse items-start justify-between"><button x-on:click="
+                                document.documentElement.classList.toggle('light')
+                                localStorage.setItem('theme', document.documentElement.classList.contains('light') ? 'light' : 'dark')
+                                " class="border border-slate-700 rounded-md h-8 flex items-center justify-center text-slate-300 text-lg w-8 cursor-pointer hover:border-slate-500">☀︎</button></div></div><h5 class="main__homepage-header">Home</h5><div class="main__section--empty"><img src="assets/missing-home.svg" class="size-12 block light:hidden" alt="Missing home icon"><img src="assets/missing-home.light.svg" class="size-12 hidden light:block" alt="Missing home icon"><h2 class="main__section-header">There's nothing to see on this page</h2><p>The markdown file for this page wasn't supplied.</p></div></div></div><div class="layout__sidebar-right"><div class="right-sidebar__container"><div class="right-sidebar__header">ON THIS PAGE</div><div class="right-sidebar__back-to-top-container"><a href="#title" class="right-sidebar__back-to-top"><span class="right-sidebar__back-to-top-icon">↑</span><span class="right-sidebar__back-to-top-text">Back to top</span></a></div></div></div></div></body></html>
\ No newline at end of file
diff --git a/tests/cli/doc/custom_logo/outputs/docs/style.css b/tests/cli/doc/custom_logo/outputs/docs/style.css
index 9df776d3..1edebf13 100644
--- a/tests/cli/doc/custom_logo/outputs/docs/style.css
+++ b/tests/cli/doc/custom_logo/outputs/docs/style.css
@@ -1,10 +1,532 @@
 /*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
 @layer properties;
+:root {
+  --color-slate-50: #f8f9fc;
+  --color-slate-100: #f1f3f9;
+  --color-slate-200: #e2e5f0;
+  --color-slate-300: #cbcfe1;
+  --color-slate-400: #949bb8;
+  --color-slate-500: #646c8b;
+  --color-slate-600: #474e69;
+  --color-slate-700: #333a55;
+  --color-slate-800: #22273b;
+  --color-slate-900: #111420;
+  --color-slate-950: #070a1a;
+  --color-gray-50: #f8f9fc;
+  --color-gray-100: #f1f3f9;
+  --color-gray-200: #e2e5f0;
+  --color-gray-300: #cbcfe1;
+  --color-gray-400: #949bb8;
+  --color-gray-500: #646c8b;
+  --color-gray-600: #474e69;
+  --color-gray-700: #333a55;
+  --color-gray-800: #22273b;
+  --color-gray-900: #111420;
+  --color-gray-950: #070a1a;
+  --color-zinc-50: oklch(98.5% 0 0);
+  --color-zinc-100: oklch(96.7% 0.001 286.375);
+  --color-zinc-200: oklch(92% 0.004 286.32);
+  --color-zinc-300: oklch(87.1% 0.006 286.286);
+  --color-zinc-400: oklch(70.5% 0.015 286.067);
+  --color-zinc-500: oklch(55.2% 0.016 285.938);
+  --color-zinc-600: oklch(44.2% 0.017 285.786);
+  --color-zinc-700: oklch(37% 0.013 285.805);
+  --color-zinc-800: oklch(27.4% 0.006 286.033);
+  --color-zinc-900: oklch(21% 0.006 285.885);
+  --color-zinc-950: oklch(14.1% 0.005 285.823);
+  --color-neutral-50: oklch(98.5% 0 0);
+  --color-neutral-100: oklch(97% 0 0);
+  --color-neutral-200: oklch(92.2% 0 0);
+  --color-neutral-300: oklch(87% 0 0);
+  --color-neutral-400: oklch(70.8% 0 0);
+  --color-neutral-500: oklch(55.6% 0 0);
+  --color-neutral-600: oklch(43.9% 0 0);
+  --color-neutral-700: oklch(37.1% 0 0);
+  --color-neutral-800: oklch(26.9% 0 0);
+  --color-neutral-900: oklch(20.5% 0 0);
+  --color-neutral-950: oklch(14.5% 0 0);
+  --color-stone-50: oklch(98.5% 0.001 106.423);
+  --color-stone-100: oklch(97% 0.001 106.424);
+  --color-stone-200: oklch(92.3% 0.003 48.717);
+  --color-stone-300: oklch(86.9% 0.005 56.366);
+  --color-stone-400: oklch(70.9% 0.01 56.259);
+  --color-stone-500: oklch(55.3% 0.013 58.071);
+  --color-stone-600: oklch(44.4% 0.011 73.639);
+  --color-stone-700: oklch(37.4% 0.01 67.558);
+  --color-stone-800: oklch(26.8% 0.007 34.298);
+  --color-stone-900: oklch(21.6% 0.006 56.043);
+  --color-stone-950: oklch(14.7% 0.004 49.25);
+  --color-red-50: oklch(97.1% 0.013 17.38);
+  --color-red-100: oklch(93.6% 0.032 17.717);
+  --color-red-200: oklch(88.5% 0.062 18.334);
+  --color-red-300: oklch(80.8% 0.114 19.571);
+  --color-red-400: oklch(70.4% 0.191 22.216);
+  --color-red-500: oklch(63.7% 0.237 25.331);
+  --color-red-600: oklch(57.7% 0.245 27.325);
+  --color-red-700: oklch(50.5% 0.213 27.518);
+  --color-red-800: oklch(44.4% 0.177 26.899);
+  --color-red-900: oklch(39.6% 0.141 25.723);
+  --color-red-950: oklch(25.8% 0.092 26.042);
+  --color-orange-50: oklch(98% 0.016 73.684);
+  --color-orange-100: oklch(95.4% 0.038 75.164);
+  --color-orange-200: oklch(90.1% 0.076 70.697);
+  --color-orange-300: oklch(83.7% 0.128 66.29);
+  --color-orange-400: oklch(75% 0.183 55.934);
+  --color-orange-500: oklch(70.5% 0.213 47.604);
+  --color-orange-600: oklch(64.6% 0.222 41.116);
+  --color-orange-700: oklch(55.3% 0.195 38.402);
+  --color-orange-800: oklch(47% 0.157 37.304);
+  --color-orange-900: oklch(40.8% 0.123 38.172);
+  --color-orange-950: oklch(26.6% 0.079 36.259);
+  --color-amber-50: oklch(98.7% 0.022 95.277);
+  --color-amber-100: oklch(96.2% 0.059 95.617);
+  --color-amber-200: oklch(92.4% 0.12 95.746);
+  --color-amber-300: oklch(87.9% 0.169 91.605);
+  --color-amber-400: oklch(82.8% 0.189 84.429);
+  --color-amber-500: oklch(76.9% 0.188 70.08);
+  --color-amber-600: oklch(66.6% 0.179 58.318);
+  --color-amber-700: oklch(55.5% 0.163 48.998);
+  --color-amber-800: oklch(47.3% 0.137 46.201);
+  --color-amber-900: oklch(41.4% 0.112 45.904);
+  --color-amber-950: oklch(27.9% 0.077 45.635);
+  --color-yellow-50: oklch(98.7% 0.026 102.212);
+  --color-yellow-100: oklch(97.3% 0.071 103.193);
+  --color-yellow-200: oklch(94.5% 0.129 101.54);
+  --color-yellow-300: oklch(90.5% 0.182 98.111);
+  --color-yellow-400: oklch(85.2% 0.199 91.936);
+  --color-yellow-500: oklch(79.5% 0.184 86.047);
+  --color-yellow-600: oklch(68.1% 0.162 75.834);
+  --color-yellow-700: oklch(55.4% 0.135 66.442);
+  --color-yellow-800: oklch(47.6% 0.114 61.907);
+  --color-yellow-900: oklch(42.1% 0.095 57.708);
+  --color-yellow-950: oklch(28.6% 0.066 53.813);
+  --color-lime-50: oklch(98.6% 0.031 120.757);
+  --color-lime-100: oklch(96.7% 0.067 122.328);
+  --color-lime-200: oklch(93.8% 0.127 124.321);
+  --color-lime-300: oklch(89.7% 0.196 126.665);
+  --color-lime-400: oklch(84.1% 0.238 128.85);
+  --color-lime-500: oklch(76.8% 0.233 130.85);
+  --color-lime-600: oklch(64.8% 0.2 131.684);
+  --color-lime-700: oklch(53.2% 0.157 131.589);
+  --color-lime-800: oklch(45.3% 0.124 130.933);
+  --color-lime-900: oklch(40.5% 0.101 131.063);
+  --color-lime-950: oklch(27.4% 0.072 132.109);
+  --color-green-50: oklch(98.2% 0.018 155.826);
+  --color-green-100: oklch(96.2% 0.044 156.743);
+  --color-green-200: oklch(92.5% 0.084 155.995);
+  --color-green-300: oklch(87.1% 0.15 154.449);
+  --color-green-400: oklch(79.2% 0.209 151.711);
+  --color-green-500: oklch(72.3% 0.219 149.579);
+  --color-green-600: oklch(62.7% 0.194 149.214);
+  --color-green-700: oklch(52.7% 0.154 150.069);
+  --color-green-800: oklch(44.8% 0.119 151.328);
+  --color-green-900: oklch(39.3% 0.095 152.535);
+  --color-green-950: oklch(26.6% 0.065 152.934);
+  --color-emerald-50: oklch(97.9% 0.021 166.113);
+  --color-emerald-100: oklch(95% 0.052 163.051);
+  --color-emerald-200: oklch(90.5% 0.093 164.15);
+  --color-emerald-300: oklch(84.5% 0.143 164.978);
+  --color-emerald-400: oklch(76.5% 0.177 163.223);
+  --color-emerald-500: oklch(69.6% 0.17 162.48);
+  --color-emerald-600: oklch(59.6% 0.145 163.225);
+  --color-emerald-700: oklch(50.8% 0.118 165.612);
+  --color-emerald-800: oklch(43.2% 0.095 166.913);
+  --color-emerald-900: oklch(37.8% 0.077 168.94);
+  --color-emerald-950: oklch(26.2% 0.051 172.552);
+  --color-teal-50: oklch(98.4% 0.014 180.72);
+  --color-teal-100: oklch(95.3% 0.051 180.801);
+  --color-teal-200: oklch(91% 0.096 180.426);
+  --color-teal-300: oklch(85.5% 0.138 181.071);
+  --color-teal-400: oklch(77.7% 0.152 181.912);
+  --color-teal-500: oklch(70.4% 0.14 182.503);
+  --color-teal-600: oklch(60% 0.118 184.704);
+  --color-teal-700: oklch(51.1% 0.096 186.391);
+  --color-teal-800: oklch(43.7% 0.078 188.216);
+  --color-teal-900: oklch(38.6% 0.063 188.416);
+  --color-teal-950: oklch(27.7% 0.046 192.524);
+  --color-cyan-50: oklch(98.4% 0.019 200.873);
+  --color-cyan-100: oklch(95.6% 0.045 203.388);
+  --color-cyan-200: oklch(91.7% 0.08 205.041);
+  --color-cyan-300: oklch(86.5% 0.127 207.078);
+  --color-cyan-400: oklch(78.9% 0.154 211.53);
+  --color-cyan-500: oklch(71.5% 0.143 215.221);
+  --color-cyan-600: oklch(60.9% 0.126 221.723);
+  --color-cyan-700: oklch(52% 0.105 223.128);
+  --color-cyan-800: oklch(45% 0.085 224.283);
+  --color-cyan-900: oklch(39.8% 0.07 227.392);
+  --color-cyan-950: oklch(30.2% 0.056 229.695);
+  --color-sky-50: oklch(97.7% 0.013 236.62);
+  --color-sky-100: oklch(95.1% 0.026 236.824);
+  --color-sky-200: oklch(90.1% 0.058 230.902);
+  --color-sky-300: oklch(82.8% 0.111 230.318);
+  --color-sky-400: oklch(74.6% 0.16 232.661);
+  --color-sky-500: oklch(68.5% 0.169 237.323);
+  --color-sky-600: oklch(58.8% 0.158 241.966);
+  --color-sky-700: oklch(50% 0.134 242.749);
+  --color-sky-800: oklch(44.3% 0.11 240.79);
+  --color-sky-900: oklch(39.1% 0.09 240.876);
+  --color-sky-950: oklch(29.3% 0.066 243.157);
+  --color-blue-50: oklch(97% 0.014 254.604);
+  --color-blue-100: oklch(93.2% 0.032 255.585);
+  --color-blue-200: oklch(88.2% 0.059 254.128);
+  --color-blue-300: oklch(80.9% 0.105 251.813);
+  --color-blue-400: oklch(70.7% 0.165 254.624);
+  --color-blue-500: oklch(62.3% 0.214 259.815);
+  --color-blue-600: oklch(54.6% 0.245 262.881);
+  --color-blue-700: oklch(48.8% 0.243 264.376);
+  --color-blue-800: oklch(42.4% 0.199 265.638);
+  --color-blue-900: oklch(37.9% 0.146 265.522);
+  --color-blue-950: oklch(28.2% 0.091 267.935);
+  --color-indigo-50: oklch(96.2% 0.018 272.314);
+  --color-indigo-100: oklch(93% 0.034 272.788);
+  --color-indigo-200: oklch(87% 0.065 274.039);
+  --color-indigo-300: oklch(78.5% 0.115 274.713);
+  --color-indigo-400: oklch(67.3% 0.182 276.935);
+  --color-indigo-500: oklch(58.5% 0.233 277.117);
+  --color-indigo-600: oklch(51.1% 0.262 276.966);
+  --color-indigo-700: oklch(45.7% 0.24 277.023);
+  --color-indigo-800: oklch(39.8% 0.195 277.366);
+  --color-indigo-900: oklch(35.9% 0.144 278.697);
+  --color-indigo-950: oklch(25.7% 0.09 281.288);
+  --color-violet-50: oklch(96.9% 0.016 293.756);
+  --color-violet-100: oklch(94.3% 0.029 294.588);
+  --color-violet-200: oklch(89.4% 0.057 293.283);
+  --color-violet-300: oklch(81.1% 0.111 293.571);
+  --color-violet-400: oklch(70.2% 0.183 293.541);
+  --color-violet-500: oklch(60.6% 0.25 292.717);
+  --color-violet-600: oklch(54.1% 0.281 293.009);
+  --color-violet-700: oklch(49.1% 0.27 292.581);
+  --color-violet-800: oklch(43.2% 0.232 292.759);
+  --color-violet-900: oklch(38% 0.189 293.745);
+  --color-violet-950: oklch(28.3% 0.141 291.089);
+  --color-purple-50: oklch(97.7% 0.014 308.299);
+  --color-purple-100: oklch(94.6% 0.033 307.174);
+  --color-purple-200: oklch(90.2% 0.063 306.703);
+  --color-purple-300: oklch(82.7% 0.119 306.383);
+  --color-purple-400: oklch(71.4% 0.203 305.504);
+  --color-purple-500: oklch(62.7% 0.265 303.9);
+  --color-purple-600: oklch(55.8% 0.288 302.321);
+  --color-purple-700: oklch(49.6% 0.265 301.924);
+  --color-purple-800: oklch(43.8% 0.218 303.724);
+  --color-purple-900: oklch(38.1% 0.176 304.987);
+  --color-purple-950: oklch(29.1% 0.149 302.717);
+  --color-fuchsia-50: oklch(97.7% 0.017 320.058);
+  --color-fuchsia-100: oklch(95.2% 0.037 318.852);
+  --color-fuchsia-200: oklch(90.3% 0.076 319.62);
+  --color-fuchsia-300: oklch(83.3% 0.145 321.434);
+  --color-fuchsia-400: oklch(74% 0.238 322.16);
+  --color-fuchsia-500: oklch(66.7% 0.295 322.15);
+  --color-fuchsia-600: oklch(59.1% 0.293 322.896);
+  --color-fuchsia-700: oklch(51.8% 0.253 323.949);
+  --color-fuchsia-800: oklch(45.2% 0.211 324.591);
+  --color-fuchsia-900: oklch(40.1% 0.17 325.612);
+  --color-fuchsia-950: oklch(29.3% 0.136 325.661);
+  --color-pink-50: oklch(97.1% 0.014 343.198);
+  --color-pink-100: oklch(94.8% 0.028 342.258);
+  --color-pink-200: oklch(89.9% 0.061 343.231);
+  --color-pink-300: oklch(82.3% 0.12 346.018);
+  --color-pink-400: oklch(71.8% 0.202 349.761);
+  --color-pink-500: oklch(65.6% 0.241 354.308);
+  --color-pink-600: oklch(59.2% 0.249 0.584);
+  --color-pink-700: oklch(52.5% 0.223 3.958);
+  --color-pink-800: oklch(45.9% 0.187 3.815);
+  --color-pink-900: oklch(40.8% 0.153 2.432);
+  --color-pink-950: oklch(28.4% 0.109 3.907);
+  --color-rose-50: oklch(96.9% 0.015 12.422);
+  --color-rose-100: oklch(94.1% 0.03 12.58);
+  --color-rose-200: oklch(89.2% 0.058 10.001);
+  --color-rose-300: oklch(81% 0.117 11.638);
+  --color-rose-400: oklch(71.2% 0.194 13.428);
+  --color-rose-500: oklch(64.5% 0.246 16.439);
+  --color-rose-600: oklch(58.6% 0.253 17.585);
+  --color-rose-700: oklch(51.4% 0.222 16.935);
+  --color-rose-800: oklch(45.5% 0.188 13.697);
+  --color-rose-900: oklch(41% 0.159 10.272);
+  --color-rose-950: oklch(27.1% 0.105 12.094);
+  --color-brand-emerald-200: #a7f3d0;
+  --color-brand-emerald-400: #34d399;
+  --color-brand-emerald-950: #022c22;
+  --color-brand-violet-400: #a78bfa;
+  --color-brand-pink-400: #f472b6;
+  --color-brand-cyan-400: #4bd8fa;
+  --color-brand-red-400: #f87171;
+  --color-brand-yellow-50: #fefce8;
+  --color-brand-yellow-400: #facc15;
+  --color-brand-yellow-700: #a16207;
+  --color-brand-yellow-900: #713f12;
+  --color-brand-yellow-950: #291404;
+  --color-inherit: inherit;
+  --color-current: currentcolor;
+  --color-transparent: transparent;
+  --color-black: #000;
+  --color-white: #fff;
+}
+:root.light {
+  --color-slate-50: #070a1a;
+  --color-slate-100: #111420;
+  --color-slate-200: #22273b;
+  --color-slate-300: #333a55;
+  --color-slate-400: #474e69;
+  --color-slate-500: #646c8b;
+  --color-slate-600: #949bb8;
+  --color-slate-700: #cbcfe1;
+  --color-slate-800: #e2e5f0;
+  --color-slate-900: #f1f3f9;
+  --color-slate-950: #f8f9fc;
+  --color-gray-50: #070a1a;
+  --color-gray-100: #111420;
+  --color-gray-200: #22273b;
+  --color-gray-300: #333a55;
+  --color-gray-400: #474e69;
+  --color-gray-500: #646c8b;
+  --color-gray-600: #949bb8;
+  --color-gray-700: #cbcfe1;
+  --color-gray-800: #e2e5f0;
+  --color-gray-900: #f1f3f9;
+  --color-gray-950: #f8f9fc;
+  --color-zinc-50: oklch(14.1% 0.005 285.823);
+  --color-zinc-100: oklch(21% 0.006 285.885);
+  --color-zinc-200: oklch(27.4% 0.006 286.033);
+  --color-zinc-300: oklch(37% 0.013 285.805);
+  --color-zinc-400: oklch(44.2% 0.017 285.786);
+  --color-zinc-500: oklch(55.2% 0.016 285.938);
+  --color-zinc-600: oklch(70.5% 0.015 286.067);
+  --color-zinc-700: oklch(87.1% 0.006 286.286);
+  --color-zinc-800: oklch(92% 0.004 286.32);
+  --color-zinc-900: oklch(96.7% 0.001 286.375);
+  --color-zinc-950: oklch(98.5% 0 0);
+  --color-neutral-50: oklch(14.5% 0 0);
+  --color-neutral-100: oklch(20.5% 0 0);
+  --color-neutral-200: oklch(26.9% 0 0);
+  --color-neutral-300: oklch(37.1% 0 0);
+  --color-neutral-400: oklch(43.9% 0 0);
+  --color-neutral-500: oklch(55.6% 0 0);
+  --color-neutral-600: oklch(70.8% 0 0);
+  --color-neutral-700: oklch(87% 0 0);
+  --color-neutral-800: oklch(92.2% 0 0);
+  --color-neutral-900: oklch(97% 0 0);
+  --color-neutral-950: oklch(98.5% 0 0);
+  --color-stone-50: oklch(14.7% 0.004 49.25);
+  --color-stone-100: oklch(21.6% 0.006 56.043);
+  --color-stone-200: oklch(26.8% 0.007 34.298);
+  --color-stone-300: oklch(37.4% 0.01 67.558);
+  --color-stone-400: oklch(44.4% 0.011 73.639);
+  --color-stone-500: oklch(55.3% 0.013 58.071);
+  --color-stone-600: oklch(70.9% 0.01 56.259);
+  --color-stone-700: oklch(86.9% 0.005 56.366);
+  --color-stone-800: oklch(92.3% 0.003 48.717);
+  --color-stone-900: oklch(97% 0.001 106.424);
+  --color-stone-950: oklch(98.5% 0.001 106.423);
+  --color-red-50: oklch(25.8% 0.092 26.042);
+  --color-red-100: oklch(39.6% 0.141 25.723);
+  --color-red-200: oklch(44.4% 0.177 26.899);
+  --color-red-300: oklch(50.5% 0.213 27.518);
+  --color-red-400: oklch(57.7% 0.245 27.325);
+  --color-red-500: oklch(63.7% 0.237 25.331);
+  --color-red-600: oklch(70.4% 0.191 22.216);
+  --color-red-700: oklch(80.8% 0.114 19.571);
+  --color-red-800: oklch(88.5% 0.062 18.334);
+  --color-red-900: oklch(93.6% 0.032 17.717);
+  --color-red-950: oklch(97.1% 0.013 17.38);
+  --color-orange-50: oklch(26.6% 0.079 36.259);
+  --color-orange-100: oklch(40.8% 0.123 38.172);
+  --color-orange-200: oklch(47% 0.157 37.304);
+  --color-orange-300: oklch(55.3% 0.195 38.402);
+  --color-orange-400: oklch(64.6% 0.222 41.116);
+  --color-orange-500: oklch(70.5% 0.213 47.604);
+  --color-orange-600: oklch(75% 0.183 55.934);
+  --color-orange-700: oklch(83.7% 0.128 66.29);
+  --color-orange-800: oklch(90.1% 0.076 70.697);
+  --color-orange-900: oklch(95.4% 0.038 75.164);
+  --color-orange-950: oklch(98% 0.016 73.684);
+  --color-amber-50: oklch(27.9% 0.077 45.635);
+  --color-amber-100: oklch(41.4% 0.112 45.904);
+  --color-amber-200: oklch(47.3% 0.137 46.201);
+  --color-amber-300: oklch(55.5% 0.163 48.998);
+  --color-amber-400: oklch(66.6% 0.179 58.318);
+  --color-amber-500: oklch(76.9% 0.188 70.08);
+  --color-amber-600: oklch(82.8% 0.189 84.429);
+  --color-amber-700: oklch(87.9% 0.169 91.605);
+  --color-amber-800: oklch(92.4% 0.12 95.746);
+  --color-amber-900: oklch(96.2% 0.059 95.617);
+  --color-amber-950: oklch(98.7% 0.022 95.277);
+  --color-yellow-50: oklch(28.6% 0.066 53.813);
+  --color-yellow-100: oklch(42.1% 0.095 57.708);
+  --color-yellow-200: oklch(47.6% 0.114 61.907);
+  --color-yellow-300: oklch(55.4% 0.135 66.442);
+  --color-yellow-400: oklch(68.1% 0.162 75.834);
+  --color-yellow-500: oklch(79.5% 0.184 86.047);
+  --color-yellow-600: oklch(85.2% 0.199 91.936);
+  --color-yellow-700: oklch(90.5% 0.182 98.111);
+  --color-yellow-800: oklch(94.5% 0.129 101.54);
+  --color-yellow-900: oklch(97.3% 0.071 103.193);
+  --color-yellow-950: oklch(98.7% 0.026 102.212);
+  --color-lime-50: oklch(27.4% 0.072 132.109);
+  --color-lime-100: oklch(40.5% 0.101 131.063);
+  --color-lime-200: oklch(45.3% 0.124 130.933);
+  --color-lime-300: oklch(53.2% 0.157 131.589);
+  --color-lime-400: oklch(64.8% 0.2 131.684);
+  --color-lime-500: oklch(76.8% 0.233 130.85);
+  --color-lime-600: oklch(84.1% 0.238 128.85);
+  --color-lime-700: oklch(89.7% 0.196 126.665);
+  --color-lime-800: oklch(93.8% 0.127 124.321);
+  --color-lime-900: oklch(96.7% 0.067 122.328);
+  --color-lime-950: oklch(98.6% 0.031 120.757);
+  --color-green-50: oklch(26.6% 0.065 152.934);
+  --color-green-100: oklch(39.3% 0.095 152.535);
+  --color-green-200: oklch(44.8% 0.119 151.328);
+  --color-green-300: oklch(52.7% 0.154 150.069);
+  --color-green-400: oklch(62.7% 0.194 149.214);
+  --color-green-500: oklch(72.3% 0.219 149.579);
+  --color-green-600: oklch(79.2% 0.209 151.711);
+  --color-green-700: oklch(87.1% 0.15 154.449);
+  --color-green-800: oklch(92.5% 0.084 155.995);
+  --color-green-900: oklch(96.2% 0.044 156.743);
+  --color-green-950: oklch(98.2% 0.018 155.826);
+  --color-emerald-50: oklch(26.2% 0.051 172.552);
+  --color-emerald-100: oklch(37.8% 0.077 168.94);
+  --color-emerald-200: oklch(43.2% 0.095 166.913);
+  --color-emerald-300: oklch(50.8% 0.118 165.612);
+  --color-emerald-400: oklch(59.6% 0.145 163.225);
+  --color-emerald-500: oklch(69.6% 0.17 162.48);
+  --color-emerald-600: oklch(76.5% 0.177 163.223);
+  --color-emerald-700: oklch(84.5% 0.143 164.978);
+  --color-emerald-800: oklch(90.5% 0.093 164.15);
+  --color-emerald-900: oklch(95% 0.052 163.051);
+  --color-emerald-950: oklch(97.9% 0.021 166.113);
+  --color-teal-50: oklch(27.7% 0.046 192.524);
+  --color-teal-100: oklch(38.6% 0.063 188.416);
+  --color-teal-200: oklch(43.7% 0.078 188.216);
+  --color-teal-300: oklch(51.1% 0.096 186.391);
+  --color-teal-400: oklch(60% 0.118 184.704);
+  --color-teal-500: oklch(70.4% 0.14 182.503);
+  --color-teal-600: oklch(77.7% 0.152 181.912);
+  --color-teal-700: oklch(85.5% 0.138 181.071);
+  --color-teal-800: oklch(91% 0.096 180.426);
+  --color-teal-900: oklch(95.3% 0.051 180.801);
+  --color-teal-950: oklch(98.4% 0.014 180.72);
+  --color-cyan-50: oklch(30.2% 0.056 229.695);
+  --color-cyan-100: oklch(39.8% 0.07 227.392);
+  --color-cyan-200: oklch(45% 0.085 224.283);
+  --color-cyan-300: oklch(52% 0.105 223.128);
+  --color-cyan-400: oklch(60.9% 0.126 221.723);
+  --color-cyan-500: oklch(71.5% 0.143 215.221);
+  --color-cyan-600: oklch(78.9% 0.154 211.53);
+  --color-cyan-700: oklch(86.5% 0.127 207.078);
+  --color-cyan-800: oklch(91.7% 0.08 205.041);
+  --color-cyan-900: oklch(95.6% 0.045 203.388);
+  --color-cyan-950: oklch(98.4% 0.019 200.873);
+  --color-sky-50: oklch(29.3% 0.066 243.157);
+  --color-sky-100: oklch(39.1% 0.09 240.876);
+  --color-sky-200: oklch(44.3% 0.11 240.79);
+  --color-sky-300: oklch(50% 0.134 242.749);
+  --color-sky-400: oklch(58.8% 0.158 241.966);
+  --color-sky-500: oklch(68.5% 0.169 237.323);
+  --color-sky-600: oklch(74.6% 0.16 232.661);
+  --color-sky-700: oklch(82.8% 0.111 230.318);
+  --color-sky-800: oklch(90.1% 0.058 230.902);
+  --color-sky-900: oklch(95.1% 0.026 236.824);
+  --color-sky-950: oklch(97.7% 0.013 236.62);
+  --color-blue-50: oklch(28.2% 0.091 267.935);
+  --color-blue-100: oklch(37.9% 0.146 265.522);
+  --color-blue-200: oklch(42.4% 0.199 265.638);
+  --color-blue-300: oklch(48.8% 0.243 264.376);
+  --color-blue-400: oklch(54.6% 0.245 262.881);
+  --color-blue-500: oklch(62.3% 0.214 259.815);
+  --color-blue-600: oklch(70.7% 0.165 254.624);
+  --color-blue-700: oklch(80.9% 0.105 251.813);
+  --color-blue-800: oklch(88.2% 0.059 254.128);
+  --color-blue-900: oklch(93.2% 0.032 255.585);
+  --color-blue-950: oklch(97% 0.014 254.604);
+  --color-indigo-50: oklch(25.7% 0.09 281.288);
+  --color-indigo-100: oklch(35.9% 0.144 278.697);
+  --color-indigo-200: oklch(39.8% 0.195 277.366);
+  --color-indigo-300: oklch(45.7% 0.24 277.023);
+  --color-indigo-400: oklch(51.1% 0.262 276.966);
+  --color-indigo-500: oklch(58.5% 0.233 277.117);
+  --color-indigo-600: oklch(67.3% 0.182 276.935);
+  --color-indigo-700: oklch(78.5% 0.115 274.713);
+  --color-indigo-800: oklch(87% 0.065 274.039);
+  --color-indigo-900: oklch(93% 0.034 272.788);
+  --color-indigo-950: oklch(96.2% 0.018 272.314);
+  --color-violet-50: oklch(28.3% 0.141 291.089);
+  --color-violet-100: oklch(38% 0.189 293.745);
+  --color-violet-200: oklch(43.2% 0.232 292.759);
+  --color-violet-300: oklch(49.1% 0.27 292.581);
+  --color-violet-400: oklch(54.1% 0.281 293.009);
+  --color-violet-500: oklch(60.6% 0.25 292.717);
+  --color-violet-600: oklch(70.2% 0.183 293.541);
+  --color-violet-700: oklch(81.1% 0.111 293.571);
+  --color-violet-800: oklch(89.4% 0.057 293.283);
+  --color-violet-900: oklch(94.3% 0.029 294.588);
+  --color-violet-950: oklch(96.9% 0.016 293.756);
+  --color-purple-50: oklch(29.1% 0.149 302.717);
+  --color-purple-100: oklch(38.1% 0.176 304.987);
+  --color-purple-200: oklch(43.8% 0.218 303.724);
+  --color-purple-300: oklch(49.6% 0.265 301.924);
+  --color-purple-400: oklch(55.8% 0.288 302.321);
+  --color-purple-500: oklch(62.7% 0.265 303.9);
+  --color-purple-600: oklch(71.4% 0.203 305.504);
+  --color-purple-700: oklch(82.7% 0.119 306.383);
+  --color-purple-800: oklch(90.2% 0.063 306.703);
+  --color-purple-900: oklch(94.6% 0.033 307.174);
+  --color-purple-950: oklch(97.7% 0.014 308.299);
+  --color-fuchsia-50: oklch(29.3% 0.136 325.661);
+  --color-fuchsia-100: oklch(40.1% 0.17 325.612);
+  --color-fuchsia-200: oklch(45.2% 0.211 324.591);
+  --color-fuchsia-300: oklch(51.8% 0.253 323.949);
+  --color-fuchsia-400: oklch(59.1% 0.293 322.896);
+  --color-fuchsia-500: oklch(66.7% 0.295 322.15);
+  --color-fuchsia-600: oklch(74% 0.238 322.16);
+  --color-fuchsia-700: oklch(83.3% 0.145 321.434);
+  --color-fuchsia-800: oklch(90.3% 0.076 319.62);
+  --color-fuchsia-900: oklch(95.2% 0.037 318.852);
+  --color-fuchsia-950: oklch(97.7% 0.017 320.058);
+  --color-pink-50: oklch(28.4% 0.109 3.907);
+  --color-pink-100: oklch(40.8% 0.153 2.432);
+  --color-pink-200: oklch(45.9% 0.187 3.815);
+  --color-pink-300: oklch(52.5% 0.223 3.958);
+  --color-pink-400: oklch(59.2% 0.249 0.584);
+  --color-pink-500: oklch(65.6% 0.241 354.308);
+  --color-pink-600: oklch(71.8% 0.202 349.761);
+  --color-pink-700: oklch(82.3% 0.12 346.018);
+  --color-pink-800: oklch(89.9% 0.061 343.231);
+  --color-pink-900: oklch(94.8% 0.028 342.258);
+  --color-pink-950: oklch(97.1% 0.014 343.198);
+  --color-rose-50: oklch(27.1% 0.105 12.094);
+  --color-rose-100: oklch(41% 0.159 10.272);
+  --color-rose-200: oklch(45.5% 0.188 13.697);
+  --color-rose-300: oklch(51.4% 0.222 16.935);
+  --color-rose-400: oklch(58.6% 0.253 17.585);
+  --color-rose-500: oklch(64.5% 0.246 16.439);
+  --color-rose-600: oklch(71.2% 0.194 13.428);
+  --color-rose-700: oklch(81% 0.117 11.638);
+  --color-rose-800: oklch(89.2% 0.058 10.001);
+  --color-rose-900: oklch(94.1% 0.03 12.58);
+  --color-rose-950: oklch(96.9% 0.015 12.422);
+  --color-brand-emerald-200: #065f46;
+  --color-brand-emerald-400: #059669;
+  --color-brand-emerald-950: #ecfdf5;
+  --color-brand-violet-400: #8b5cf6;
+  --color-brand-pink-400: #ec4899;
+  --color-brand-cyan-400: #06b6d4;
+  --color-brand-red-400: #dc2626;
+  --color-brand-yellow-50: #291404;
+  --color-brand-yellow-400: #ca8a04;
+  --color-brand-yellow-700: #fde047;
+  --color-brand-yellow-900: #fef9c3;
+  --color-brand-yellow-950: #fefce8;
+  --color-inherit: inherit;
+  --color-current: currentcolor;
+  --color-transparent: transparent;
+  --color-black: #000;
+  --color-white: #fff;
+}
 .markdown-body {
   color-scheme: dark;
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
-  color: #f0f6fc;
+  color: var(--color-white);
   background-color: transparent;
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
   font-size: 16px;
@@ -36,7 +558,7 @@
 }
 .markdown-body a {
   background-color: transparent;
-  color: #4493f8;
+  color: var(--color-blue-400);
   text-decoration: none;
 }
 .markdown-body abbr[title] {
@@ -57,8 +579,8 @@
   font-size: 2em;
 }
 .markdown-body mark {
-  background-color: #bb800926;
-  color: #f0f6fc;
+  background-color: var(--color-yellow-800);
+  color: var(--color-white);
 }
 .markdown-body small {
   font-size: 90%;
@@ -91,11 +613,11 @@
   box-sizing: content-box;
   overflow: hidden;
   background: transparent;
-  border-bottom: 1px solid #3d444db3;
+  border-bottom: 1px solid var(--color-zinc-700);
   height: .25em;
   padding: 0;
   margin: 1.5rem 0;
-  background-color: #3d444d;
+  background-color: var(--color-zinc-700);
   border: 0;
 }
 .markdown-body input {
@@ -134,7 +656,7 @@
   text-decoration: underline;
 }
 .markdown-body ::placeholder {
-  color: #9198a1;
+  color: var(--color-zinc-400);
   opacity: 1;
 }
 .markdown-body hr::before {
@@ -162,7 +684,7 @@
   cursor: pointer;
 }
 .markdown-body a:focus, .markdown-body [role=button]:focus, .markdown-body input[type=radio]:focus, .markdown-body input[type=checkbox]:focus {
-  outline: 2px solid #1f6feb;
+  outline: 2px solid var(--color-blue-500);
   outline-offset: -2px;
   box-shadow: none;
 }
@@ -170,7 +692,7 @@
   outline: solid 1px transparent;
 }
 .markdown-body a:focus-visible, .markdown-body [role=button]:focus-visible, .markdown-body input[type=radio]:focus-visible, .markdown-body input[type=checkbox]:focus-visible {
-  outline: 2px solid #1f6feb;
+  outline: 2px solid var(--color-blue-500);
   outline-offset: -2px;
   box-shadow: none;
 }
@@ -182,13 +704,13 @@
   padding: 0.25rem;
   font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
   line-height: 10px;
-  color: #f0f6fc;
+  color: var(--color-white);
   vertical-align: middle;
-  background-color: #151b23;
-  border: solid 1px #3d444db3;
-  border-bottom-color: #3d444db3;
+  background-color: var(--color-zinc-900);
+  border: solid 1px var(--color-zinc-700);
+  border-bottom-color: var(--color-zinc-700);
   border-radius: 6px;
-  box-shadow: inset 0 -1px 0 #3d444db3;
+  box-shadow: inset 0 -1px 0 var(--color-zinc-700);
 }
 .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 {
   margin-top: 1.5rem;
@@ -216,7 +738,7 @@
 .markdown-body h6 {
   font-weight: 600;
   font-size: .85em;
-  color: #9198a1;
+  color: var(--color-zinc-400);
 }
 .markdown-body p {
   margin-top: 0;
@@ -225,8 +747,8 @@
 .markdown-body blockquote {
   margin: 0;
   padding: 0 1em;
-  color: #9198a1;
-  border-left: .25em solid #3d444d;
+  color: var(--color-zinc-400);
+  border-left: .25em solid var(--color-zinc-700);
 }
 .markdown-body ul, .markdown-body ol {
   margin-top: 0;
@@ -286,7 +808,7 @@
   text-decoration: none;
 }
 .markdown-body .absent {
-  color: #f85149;
+  color: var(--color-brand-red-400);
 }
 .markdown-body .anchor {
   float: left;
@@ -308,7 +830,7 @@
   margin-bottom: 0;
 }
 .markdown-body h1 .octicon-link, .markdown-body h2 .octicon-link, .markdown-body h3 .octicon-link, .markdown-body h4 .octicon-link, .markdown-body h5 .octicon-link, .markdown-body h6 .octicon-link {
-  color: #f0f6fc;
+  color: var(--color-white);
   vertical-align: middle;
   visibility: hidden;
 }
@@ -383,17 +905,17 @@
 }
 .markdown-body table th, .markdown-body table td {
   padding: 6px 13px;
-  border: 1px solid #3d444d;
+  border: 1px solid var(--color-zinc-700);
 }
 .markdown-body table td>:last-child {
   margin-bottom: 0;
 }
 .markdown-body table tr {
-  background-color: #0d1117;
-  border-top: 1px solid #3d444db3;
+  background-color: var(--color-zinc-900);
+  border-top: 1px solid var(--color-zinc-700);
 }
 .markdown-body table tr:nth-child(2n) {
-  background-color: #151b23;
+  background-color: var(--color-zinc-900);
 }
 .markdown-body table img {
   background-color: transparent;
@@ -420,7 +942,7 @@
   padding: 7px;
   margin: 13px 0 0;
   overflow: hidden;
-  border: 1px solid #3d444d;
+  border: 1px solid var(--color-zinc-700);
 }
 .markdown-body span.frame span img {
   display: block;
@@ -430,7 +952,7 @@
   display: block;
   padding: 5px 0 0;
   clear: both;
-  color: #f0f6fc;
+  color: var(--color-white);
 }
 .markdown-body span.align-center {
   display: block;
@@ -488,7 +1010,7 @@
   margin: 0;
   font-size: 85%;
   white-space: break-spaces;
-  background-color: #656c7633;
+  background-color: var(--color-zinc-800);
   border-radius: 6px;
 }
 .markdown-body code br, .markdown-body tt br {
@@ -523,8 +1045,8 @@
   overflow: auto;
   font-size: 85%;
   line-height: 1.45;
-  color: #f0f6fc;
-  background-color: #151b23;
+  color: var(--color-white);
+  background-color: var(--color-zinc-900);
   border-radius: 6px;
 }
 .markdown-body pre code, .markdown-body pre tt {
@@ -549,7 +1071,7 @@
 .markdown-body .csv-data .blob-num {
   padding: 10px 0.5rem 9px;
   text-align: right;
-  background: #0d1117;
+  background: var(--color-zinc-900);
   border: 0;
 }
 .markdown-body .csv-data tr {
@@ -557,7 +1079,7 @@
 }
 .markdown-body .csv-data th {
   font-weight: 600;
-  background: #151b23;
+  background: var(--color-zinc-900);
   border-top: 0;
 }
 .markdown-body [data-footnote-ref]::before {
@@ -568,8 +1090,8 @@
 }
 .markdown-body .footnotes {
   font-size: 12px;
-  color: #9198a1;
-  border-top: 1px solid #3d444d;
+  color: var(--color-zinc-400);
+  border-top: 1px solid var(--color-zinc-700);
 }
 .markdown-body .footnotes ol {
   padding-left: 1rem;
@@ -590,11 +1112,11 @@
   left: calc(1.5rem*-1);
   pointer-events: none;
   content: "";
-  border: 2px solid #1f6feb;
+  border: 2px solid var(--color-blue-500);
   border-radius: 6px;
 }
 .markdown-body .footnotes li:target {
-  color: #f0f6fc;
+  color: var(--color-white);
 }
 .markdown-body .footnotes .data-footnote-backref g-emoji {
   font-family: monospace;
@@ -603,88 +1125,88 @@
   padding-right: var(--dialog-scrollgutter) !important;
 }
 .markdown-body .pl-c {
-  color: #9198a1;
+  color: var(--color-zinc-400);
 }
 .markdown-body .pl-c1, .markdown-body .pl-s .pl-v {
-  color: #79c0ff;
+  color: var(--color-blue-300);
 }
 .markdown-body .pl-e, .markdown-body .pl-en {
-  color: #d2a8ff;
+  color: var(--color-brand-violet-400);
 }
 .markdown-body .pl-smi, .markdown-body .pl-s .pl-s1 {
-  color: #f0f6fc;
+  color: var(--color-white);
 }
 .markdown-body .pl-ent {
-  color: #7ee787;
+  color: var(--color-brand-emerald-400);
 }
 .markdown-body .pl-k {
-  color: #ff7b72;
+  color: var(--color-brand-red-400);
 }
 .markdown-body .pl-s, .markdown-body .pl-pds, .markdown-body .pl-s .pl-pse .pl-s1, .markdown-body .pl-sr, .markdown-body .pl-sr .pl-cce, .markdown-body .pl-sr .pl-sre, .markdown-body .pl-sr .pl-sra {
-  color: #a5d6ff;
+  color: var(--color-blue-300);
 }
 .markdown-body .pl-v, .markdown-body .pl-smw {
-  color: #ffa657;
+  color: var(--color-orange-300);
 }
 .markdown-body .pl-bu {
-  color: #f85149;
+  color: var(--color-brand-red-400);
 }
 .markdown-body .pl-ii {
-  color: #f0f6fc;
-  background-color: #8e1519;
+  color: var(--color-white);
+  background-color: var(--color-red-900);
 }
 .markdown-body .pl-c2 {
-  color: #f0f6fc;
-  background-color: #b62324;
+  color: var(--color-white);
+  background-color: var(--color-red-900);
 }
 .markdown-body .pl-sr .pl-cce {
   font-weight: bold;
-  color: #7ee787;
+  color: var(--color-brand-emerald-400);
 }
 .markdown-body .pl-ml {
-  color: #f2cc60;
+  color: var(--color-yellow-200);
 }
 .markdown-body .pl-mh, .markdown-body .pl-mh .pl-en, .markdown-body .pl-ms {
   font-weight: bold;
-  color: #1f6feb;
+  color: var(--color-blue-400);
 }
 .markdown-body .pl-mi {
   font-style: italic;
-  color: #f0f6fc;
+  color: var(--color-white);
 }
 .markdown-body .pl-mb {
   font-weight: bold;
-  color: #f0f6fc;
+  color: var(--color-white);
 }
 .markdown-body .pl-md {
-  color: #ffdcd7;
+  color: var(--color-red-200);
   background-color: #67060c;
 }
 .markdown-body .pl-mi1 {
-  color: #aff5b4;
-  background-color: #033a16;
+  color: var(--color-green-200);
+  background-color: var(--color-green-950);
 }
 .markdown-body .pl-mc {
-  color: #ffdfb6;
-  background-color: #5a1e02;
+  color: var(--color-orange-200);
+  background-color: var(--color-orange-950);
 }
 .markdown-body .pl-mi2 {
-  color: #f0f6fc;
-  background-color: #1158c7;
+  color: var(--color-white);
+  background-color: var(--color-blue-800);
 }
 .markdown-body .pl-mdr {
   font-weight: bold;
-  color: #d2a8ff;
+  color: var(--color-brand-violet-400);
 }
 .markdown-body .pl-ba {
-  color: #9198a1;
+  color: var(--color-zinc-400);
 }
 .markdown-body .pl-sg {
-  color: #3d444d;
+  color: var(--color-zinc-700);
 }
 .markdown-body .pl-corl {
   text-decoration: underline;
-  color: #a5d6ff;
+  color: var(--color-blue-300);
 }
 .markdown-body [role=button]:focus:not(:focus-visible), .markdown-body [role=tabpanel][tabindex="0"]:focus:not(:focus-visible), .markdown-body button:focus:not(:focus-visible), .markdown-body summary:focus:not(:focus-visible), .markdown-body a:focus:not(:focus-visible) {
   outline: none;
@@ -746,7 +1268,7 @@
   padding: 0.5rem 1rem;
   margin-bottom: 1rem;
   color: inherit;
-  border-left: .25em solid #3d444d;
+  border-left: .25em solid var(--color-zinc-700);
 }
 .markdown-body .markdown-alert>:first-child {
   margin-top: 0;
@@ -761,34 +1283,34 @@
   line-height: 1;
 }
 .markdown-body .markdown-alert.markdown-alert-note {
-  border-left-color: #1f6feb;
+  border-left-color: var(--color-blue-500);
 }
 .markdown-body .markdown-alert.markdown-alert-note .markdown-alert-title {
-  color: #4493f8;
+  color: var(--color-blue-400);
 }
 .markdown-body .markdown-alert.markdown-alert-important {
-  border-left-color: #8957e5;
+  border-left-color: var(--color-violet-500);
 }
 .markdown-body .markdown-alert.markdown-alert-important .markdown-alert-title {
-  color: #ab7df8;
+  color: var(--color-brand-violet-400);
 }
 .markdown-body .markdown-alert.markdown-alert-warning {
-  border-left-color: #9e6a03;
+  border-left-color: var(--color-brand-yellow-700);
 }
 .markdown-body .markdown-alert.markdown-alert-warning .markdown-alert-title {
-  color: #d29922;
+  color: var(--color-brand-yellow-700);
 }
 .markdown-body .markdown-alert.markdown-alert-tip {
-  border-left-color: #238636;
+  border-left-color: var(--color-green-600);
 }
 .markdown-body .markdown-alert.markdown-alert-tip .markdown-alert-title {
-  color: #3fb950;
+  color: var(--color-green-600);
 }
 .markdown-body .markdown-alert.markdown-alert-caution {
-  border-left-color: #da3633;
+  border-left-color: var(--color-red-600);
 }
 .markdown-body .markdown-alert.markdown-alert-caution .markdown-alert-title {
-  color: #f85149;
+  color: var(--color-brand-red-400);
 }
 .markdown-body>*:first-child>.heading-element:first-child {
   margin-top: 0 !important;
@@ -802,20 +1324,25 @@
     --font-sans: "DM Sans";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
-    --color-red-400: oklch(70.4% 0.191 22.216);
+    --color-red-200: oklch(88.5% 0.062 18.334);
+    --color-red-600: oklch(57.7% 0.245 27.325);
+    --color-red-900: oklch(39.6% 0.141 25.723);
     --color-red-950: oklch(25.8% 0.092 26.042);
-    --color-yellow-50: oklch(98.7% 0.026 102.212);
-    --color-yellow-900: oklch(42.1% 0.095 57.708);
+    --color-orange-200: oklch(90.1% 0.076 70.697);
+    --color-orange-300: oklch(83.7% 0.128 66.29);
+    --color-orange-950: oklch(26.6% 0.079 36.259);
+    --color-yellow-200: oklch(94.5% 0.129 101.54);
+    --color-yellow-800: oklch(47.6% 0.114 61.907);
     --color-green-200: oklch(92.5% 0.084 155.995);
-    --color-green-400: oklch(79.2% 0.209 151.711);
     --color-green-600: oklch(62.7% 0.194 149.214);
     --color-green-950: oklch(26.6% 0.065 152.934);
-    --color-emerald-300: oklch(84.5% 0.143 164.978);
-    --color-emerald-400: oklch(76.5% 0.177 163.223);
-    --color-violet-300: oklch(81.1% 0.111 293.571);
-    --color-violet-400: oklch(70.2% 0.183 293.541);
-    --color-pink-300: oklch(82.3% 0.12 346.018);
-    --color-pink-400: oklch(71.8% 0.202 349.761);
+    --color-blue-300: oklch(80.9% 0.105 251.813);
+    --color-blue-400: oklch(70.7% 0.165 254.624);
+    --color-blue-500: oklch(62.3% 0.214 259.815);
+    --color-blue-800: oklch(42.4% 0.199 265.638);
+    --color-violet-200: oklch(89.4% 0.057 293.283);
+    --color-violet-500: oklch(60.6% 0.25 292.717);
+    --color-pink-200: oklch(89.9% 0.061 343.231);
     --color-slate-50: oklch(98.4% 0.003 247.858);
     --color-slate-100: oklch(96.8% 0.007 247.896);
     --color-slate-200: oklch(92.9% 0.013 255.508);
@@ -829,7 +1356,10 @@
     --color-slate-950: oklch(12.9% 0.042 264.695);
     --color-gray-700: oklch(37.3% 0.034 259.733);
     --color-gray-800: oklch(27.8% 0.033 256.848);
-    --color-black: #000;
+    --color-zinc-400: oklch(70.5% 0.015 286.067);
+    --color-zinc-700: oklch(37% 0.013 285.805);
+    --color-zinc-800: oklch(27.4% 0.006 286.033);
+    --color-zinc-900: oklch(21% 0.006 285.885);
     --color-white: #fff;
     --spacing: 0.25rem;
     --container-xs: 20rem;
@@ -861,6 +1391,18 @@
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
+    --color-brand-emerald-200: var(--color-brand-emerald-200);
+    --color-brand-emerald-400: var(--color-brand-emerald-400);
+    --color-brand-emerald-950: var(--color-brand-emerald-950);
+    --color-brand-violet-400: var(--color-brand-violet-400);
+    --color-brand-pink-400: var(--color-brand-pink-400);
+    --color-brand-cyan-400: var(--color-brand-cyan-400);
+    --color-brand-red-400: var(--color-brand-red-400);
+    --color-brand-yellow-50: var(--color-brand-yellow-50);
+    --color-brand-yellow-400: var(--color-brand-yellow-400);
+    --color-brand-yellow-700: var(--color-brand-yellow-700);
+    --color-brand-yellow-900: var(--color-brand-yellow-900);
+    --color-brand-yellow-950: var(--color-brand-yellow-950);
   }
 }
 @layer base {
@@ -1100,9 +1642,15 @@
     width: calc(var(--spacing) * 12);
     height: calc(var(--spacing) * 12);
   }
+  .h-8 {
+    height: calc(var(--spacing) * 8);
+  }
   .h-10 {
     height: calc(var(--spacing) * 10);
   }
+  .w-8 {
+    width: calc(var(--spacing) * 8);
+  }
   .w-\[120px\] {
     width: 120px;
   }
@@ -1125,19 +1673,43 @@
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .cursor-pointer {
+    cursor: pointer;
+  }
   .resize {
     resize: both;
   }
+  .flex-row-reverse {
+    flex-direction: row-reverse;
+  }
   .place-content-center {
     place-content: center;
   }
+  .items-center {
+    align-items: center;
+  }
+  .items-start {
+    align-items: flex-start;
+  }
+  .justify-between {
+    justify-content: space-between;
+  }
+  .justify-center {
+    justify-content: center;
+  }
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
+  .rounded-md {
+    border-radius: var(--radius-md);
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .border-slate-700 {
+    border-color: var(--color-slate-700);
+  }
   .border-b-slate-50 {
     border-bottom-color: var(--color-slate-50);
   }
@@ -1159,6 +1731,10 @@
   .text-center {
     text-align: center;
   }
+  .text-lg {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+  }
   .text-sm {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
@@ -1173,21 +1749,24 @@
   .whitespace-normal {
     white-space: normal;
   }
-  .text-emerald-400 {
-    color: var(--color-emerald-400);
+  .text-brand-emerald-400 {
+    color: var(--color-brand-emerald-400);
   }
-  .text-pink-400 {
-    color: var(--color-pink-400);
+  .text-brand-pink-400 {
+    color: var(--color-brand-pink-400);
+  }
+  .text-brand-violet-400 {
+    color: var(--color-brand-violet-400);
   }
   .text-slate-50 {
     color: var(--color-slate-50);
   }
+  .text-slate-300 {
+    color: var(--color-slate-300);
+  }
   .text-slate-500 {
     color: var(--color-slate-500);
   }
-  .text-violet-400 {
-    color: var(--color-violet-400);
-  }
   .italic {
     font-style: italic;
   }
@@ -1203,6 +1782,9 @@
   .opacity-40 {
     opacity: 40%;
   }
+  .opacity-50 {
+    opacity: 50%;
+  }
   .shadow {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1236,6 +1818,13 @@
       }
     }
   }
+  .hover\:border-slate-500 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-slate-500);
+      }
+    }
+  }
   .hover\:bg-slate-700 {
     &:hover {
       @media (hover: hover) {
@@ -1250,24 +1839,24 @@
       }
     }
   }
-  .hover\:text-emerald-300 {
+  .hover\:text-brand-emerald-200 {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-emerald-300);
+        color: var(--color-brand-emerald-200);
       }
     }
   }
-  .hover\:text-pink-300 {
+  .hover\:text-pink-200 {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-pink-300);
+        color: var(--color-pink-200);
       }
     }
   }
-  .hover\:text-violet-300 {
+  .hover\:text-violet-200 {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-violet-300);
+        color: var(--color-violet-200);
       }
     }
   }
@@ -1278,6 +1867,21 @@
       }
     }
   }
+  .light\:block {
+    .light & {
+      display: block;
+    }
+  }
+  .light\:hidden {
+    .light & {
+      display: none;
+    }
+  }
+  .light\:opacity-60 {
+    .light & {
+      opacity: 60%;
+    }
+  }
 }
 [x-cloak] {
   display: none !important;
@@ -1340,7 +1944,7 @@
     height: 100vh;
     width: calc(var(--spacing) * 72);
     scrollbar-width: thin;
-    scrollbar-color: #4b5563 #1f2937;
+    scrollbar-color: var(--color-slate-900) var(--color-slate-700);
   }
   .layout__main-center {
     height: 100vh;
@@ -1351,7 +1955,7 @@
     padding: calc(var(--spacing) * 10);
     color: var(--color-slate-300);
     scrollbar-width: thin;
-    scrollbar-color: #4b5563 #1f2937;
+    scrollbar-color: var(--color-slate-900) var(--color-slate-700);
   }
   .layout__main-center-content {
     @media (width >= 80rem) {
@@ -1528,7 +2132,7 @@
     height: calc(var(--spacing) * 1.5);
     width: calc(var(--spacing) * 1.5);
     border-radius: calc(infinity * 1px);
-    background-color: var(--color-green-600);
+    background-color: var(--color-brand-emerald-400);
   }
   .main__badge-inner-text {
     font-size: var(--text-xs);
@@ -1536,9 +2140,12 @@
     color: var(--color-slate-100);
   }
   .main__badge--success {
-    border-color: var(--color-green-400);
-    background-color: var(--color-green-950);
-    color: var(--color-green-200);
+    border-color: var(--color-brand-emerald-400);
+    background-color: var(--color-brand-emerald-950);
+    color: var(--color-brand-emerald-200);
+  }
+  .main__badge--success .main__badge-text {
+    color: var(--color-brand-emerald-200);
   }
   .main__badge--success::before {
     content: "✓";
@@ -1548,9 +2155,9 @@
     align-items: center;
     justify-content: center;
     border-radius: calc(infinity * 1px);
-    background-color: var(--color-green-400);
+    background-color: var(--color-brand-emerald-400);
     font-size: 8px;
-    color: var(--color-green-950);
+    color: var(--color-brand-emerald-950);
   }
   .main__badge--disabled::before {
     content: "-";
@@ -1560,7 +2167,7 @@
     align-items: center;
     justify-content: center;
     border-radius: calc(infinity * 1px);
-    background-color: var(--color-red-400);
+    background-color: var(--color-brand-red-400);
     font-size: 10px;
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
@@ -1584,10 +2191,7 @@
     }
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(96.8% 0.007 247.896) 10%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-slate-100) 10%, transparent);
-        }
+        background-color: var(--color-slate-800);
       }
     }
     &>b {
@@ -1613,12 +2217,16 @@
     border-radius: var(--radius-lg);
     border-style: var(--tw-border-style);
     border-width: 1px;
-    border-color: var(--color-yellow-900);
-    background-color: #291404;
+    border-color: var(--color-brand-yellow-700);
+    background-color: var(--color-brand-yellow-950);
     padding: calc(var(--spacing) * 3);
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
-    color: var(--color-yellow-50);
+    color: var(--color-brand-yellow-50);
+  }
+  .metadata__warning code {
+    border-color: var(--color-brand-yellow-700);
+    background-color: var(--color-brand-yellow-900);
   }
   .main__run-with-container {
     margin-top: calc(var(--spacing) * 4);
@@ -1689,7 +2297,7 @@
   .main__run-with-content-text {
     border-radius: var(--radius-md);
     border-color: var(--color-slate-700);
-    background-color: var(--color-black);
+    background-color: var(--color-slate-950);
     padding-inline: 0.4em;
     padding-block: 0.2em;
     font-family: var(--font-mono);
@@ -1811,7 +2419,7 @@
     width: 100%;
     height: 100%;
     flex-direction: column;
-    background-color: #111420;
+    background-color: var(--color-slate-900);
     padding-top: calc(var(--spacing) * 4);
     text-wrap: nowrap;
     color: var(--color-slate-400);
@@ -1852,6 +2460,9 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
     --tw-outline-style: none;
     outline-style: none;
+    &::placeholder {
+      color: var(--color-slate-400);
+    }
     &:focus {
       border-color: var(--color-slate-400);
     }
@@ -2089,9 +2700,9 @@
     color: var(--color-slate-400);
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 30%, transparent);
+        background-color: color-mix(in srgb, oklch(44.6% 0.043 257.281) 20%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-slate-400) 30%, transparent);
+          background-color: color-mix(in oklab, var(--color-slate-600) 20%, transparent);
         }
       }
     }
@@ -2167,6 +2778,15 @@
   font-size: 0.8em;
   color: var(--color-slate-200);
 }
+.markdown-body pre {
+  border-radius: var(--radius-md);
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  border-color: var(--color-slate-700);
+  background-color: var(--color-slate-900);
+  font-family: var(--font-mono);
+  color: var(--color-slate-200);
+}
 .main__container .markdown-body {
   max-width: var(--container-4xl);
 }
diff --git a/tests/cli/doc/ignorefile/outputs/docs/file/index.html b/tests/cli/doc/ignorefile/outputs/docs/file/index.html
index 526665c8..893345dd 100644
--- a/tests/cli/doc/ignorefile/outputs/docs/file/index.html
+++ b/tests/cli/doc/ignorefile/outputs/docs/file/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html class="dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>file</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&amp;display=swap" rel="stylesheet"><script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script defer src="../index.js"></script><link rel="stylesheet" type="text/css" href="../style.css"></head><body class="body--base"><div class="layout__container layout__container--alt-layout" x-transition x-data="{
+<!DOCTYPE html><html x-data="{ DEFAULT_THEME: '' }" x-bind:class="(localStorage.getItem('theme') ?? DEFAULT_THEME) === 'light' ? 'light' : ''" x-cloak><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>file</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&amp;display=swap" rel="stylesheet"><script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script defer src="../index.js"></script><link rel="stylesheet" type="text/css" href="../style.css"></head><body class="body--base"><div class="layout__container layout__container--alt-layout" x-transition x-data="{
                 sidebarState: $persist(window.innerWidth &lt; 768 ? 'hidden' : 'normal').using(sessionStorage),
                 get showSidebarButtons() { return this.sidebarState !== 'hidden'; },
                 get showCenterButtons() { return this.sidebarState === 'hidden'; },
@@ -16,7 +16,7 @@
                 collapseSidebar() { this.sidebarState = 'hidden'; },
                 restoreSidebar() { this.sidebarState = 'normal'; },
                 expandSidebar() { this.sidebarState = 'xl'; }
-            }" x-bind:class="containerClasses"><div class="layout__sidebar-left" x-transition><div class="absolute top-5 right-2 flex gap-1 z-10" x-cloak x-show="showSidebarButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../assets/sidebar-icon-hide.svg" alt=""></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../assets/sidebar-icon-default.svg" alt=""></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../assets/sidebar-icon-expand.svg" alt=""></img></button></div><div x-data="{
+            }" x-bind:class="containerClasses"><div class="layout__sidebar-left" x-transition><div class="absolute top-5 right-2 flex gap-1 z-10" x-cloak x-show="showSidebarButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../assets/sidebar-icon-hide.svg" alt="" class="block light:hidden"></img><img src="../assets/sidebar-icon-hide.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../assets/sidebar-icon-default.svg" alt="" class="block light:hidden"></img><img src="../assets/sidebar-icon-default.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../assets/sidebar-icon-expand.svg" alt="" class="block light:hidden"></img><img src="../assets/sidebar-icon-expand.light.svg" alt="" class="hidden light:block"></img></button></div><div x-data="{
                 showWorkflows: $persist(false).using(sessionStorage),
                 search: $persist('').using(sessionStorage),
                 dirOpen: '../assets/chevron-up.svg',
@@ -68,9 +68,12 @@
                         this.showChildrenCache[n.key] = true;
                     });
                 }
-            }" x-cloak x-init="$nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__container"><div class="sticky px-4"><a href="../index.html"><img src="../assets/logo.svg" class="w-[120px] flex-none mb-8" alt="Logo"></a><div class="relative w-full h-10"><input id="searchbox" x-model.debounce="search" type="text" placeholder="Search..." class="left-sidebar__searchbox"><img src="../assets/search.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none" alt="Search icon"><img src="../assets/x-mark.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"></div><div class="left-sidebar__tabs-container mt-4"><button x-on:click="showWorkflows = true; search = ''; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="! showWorkflows ? 'opacity-40 hover:opacity-80' : ''"><img src="../assets/list-bullet-selected.svg" class="left-sidebar__icon" alt="List icon"><p>Workflows</p></button><button x-on:click="showWorkflows = false; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="showWorkflows ? 'opacity-40 hover:opacity-80' : ''"><img src="../assets/folder-selected.svg" class="left-sidebar__icon" alt="List icon"><p>Full Directory</p></button></div></div><div x-cloak class="left-sidebar__content-container pt-4"><ul x-show="! showWorkflows || search != ''" class="left-sidebar__content"><sprocket-tooltip content="docs" class="block"><a href="../index.html" x-show="search === ''" aria-label="docs" class="left-sidebar__row hover:bg-slate-700"><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative shrink-0"><img src="../assets/dir-open.svg" class="left-sidebar__icon" alt="Directory icon"></div><div class="text-slate-50">docs</div></div></a></sprocket-tooltip><template x-for="node in shownNodes"><sprocket-tooltip x-bind:content="node.display_name" class="block isolate"><a x-bind:href="node.href" x-show="showSelfCache[node.key]" x-on:click="if (node.href === null) toggleChildren(node.key)" x-bind:aria-label="node.display_name" class="left-sidebar__row" x-bind:class="`${node.current ? 'is-scrolled-to left-sidebar__row--active' : (node.href === null) ? showChildrenCache[node.key] ? 'left-sidebar__row-folder left-sidebar__row-folder--open' : 'left-sidebar__row-folder left-sidebar__row-folder--closed' : 'left-sidebar__row-page'} ${node.ancestor ? 'left-sidebar__content-item-container--ancestor' : ''}`"><template x-for="i in Array.from({ length: node.nest_level })"><div class="left-sidebar__indent -z-1"></div></template><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative left-sidebar__icon shrink-0"><img x-bind:src="node.icon || dirOpen" class="left-sidebar__icon" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"></div><div class="crop-ellipsis" x-text="node.display_name"></div></div></a></sprocket-tooltip></template><template x-for="node in searchedNodes"><li class="left-sidebar__search-result-item"><p class="text-xs text-slate-500 crop-ellipsis" x-text="node.parent"></p><div class="left-sidebar__search-result-item-container"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Node icon"><sprocket-tooltip class="crop-ellipsis" x-bind:content="node.display_name"><a x-bind:href="node.href" x-text="node.display_name"></a></sprocket-tooltip></div></li></template><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex place-content-center"><img src="../assets/search.svg" class="size-8" alt="Search icon"></li><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex gap-1 place-content-center text-center break-words whitespace-normal text-sm text-slate-500"><span x-text="'No results found for'"></span><span x-text="`&quot;${search}&quot;`" class="text-slate-50"></span></li></ul><ul x-show="showWorkflows &amp;&amp; search === ''" class="left-sidebar__content"><li class=""><div class="left-sidebar__row"><img src="../assets/category-selected.svg" class="left-sidebar__icon" alt="Category icon"><p class="text-slate-50">Other</p></div><ul class=""><a href="test-workflow.html" x-data="{
+            }" x-cloak x-init="$nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__container"><div class="sticky px-4"><a href="../index.html"><img src="../assets/logo.svg" class="w-[120px] flex-none mb-8 block light:hidden" alt="Logo"><img src="../assets/logo.light.svg" class="w-[120px] flex-none mb-8 hidden light:block" alt="Logo"></a><div class="relative w-full h-10"><input id="searchbox" x-model.debounce="search" type="text" placeholder="Search..." class="left-sidebar__searchbox"><img src="../assets/search.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none block light:hidden" alt="Search icon"><img src="../assets/search.light.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none hidden light:block" alt="Search icon"><img src="../assets/x-mark.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer block light:hidden" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"><img src="../assets/x-mark.light.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer hidden light:block" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"></div><div class="left-sidebar__tabs-container mt-4"><button x-on:click="showWorkflows = true; search = ''; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="! showWorkflows ? 'opacity-40 light:opacity-60 hover:opacity-80' : ''"><img src="../assets/list-bullet-selected.svg" class="left-sidebar__icon block light:hidden" alt="List icon"><img src="../assets/list-bullet-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="List icon"><p>Workflows</p></button><button x-on:click="showWorkflows = false; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="showWorkflows ? 'opacity-50 light:opacity-60 hover:opacity-80' : ''"><img src="../assets/folder-selected.svg" class="left-sidebar__icon block light:hidden" alt="List icon"><img src="../assets/folder-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="List icon"><p>Full Directory</p></button></div></div><div x-cloak class="left-sidebar__content-container pt-4"><ul x-show="! showWorkflows || search != ''" class="left-sidebar__content"><sprocket-tooltip content="docs" class="block"><a href="../index.html" x-show="search === ''" aria-label="docs" class="left-sidebar__row hover:bg-slate-700"><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative shrink-0"><img src="../assets/dir-open.svg" class="left-sidebar__icon block light:hidden" alt="Directory icon"><img src="../assets/dir-open.light.svg" class="left-sidebar__icon hidden light:block" alt="Directory icon"></div><div class="text-slate-50">docs</div></div></a></sprocket-tooltip><template x-for="node in shownNodes"><sprocket-tooltip x-bind:content="node.display_name" class="block isolate"><a x-bind:href="node.href" x-show="showSelfCache[node.key]" x-on:click="if (node.href === null) toggleChildren(node.key)" x-bind:aria-label="node.display_name" class="left-sidebar__row" x-bind:class="`${node.current ? 'is-scrolled-to left-sidebar__row--active' : (node.href === null) ? showChildrenCache[node.key] ? 'left-sidebar__row-folder left-sidebar__row-folder--open' : 'left-sidebar__row-folder left-sidebar__row-folder--closed' : 'left-sidebar__row-page'} ${node.ancestor ? 'left-sidebar__content-item-container--ancestor' : ''}`"><template x-for="i in Array.from({ length: node.nest_level })"><div class="left-sidebar__indent -z-1"></div></template><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative left-sidebar__icon shrink-0"><img x-bind:src="node.icon || dirOpen" class="left-sidebar__icon block light:hidden" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"><img x-bind:src="(node.icon || dirOpen).replace('.svg', '.light.svg')" class="left-sidebar__icon hidden light:block" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"></div><div class="crop-ellipsis" x-text="node.display_name"></div></div></a></sprocket-tooltip></template><template x-for="node in searchedNodes"><li class="left-sidebar__search-result-item"><p class="text-xs text-slate-500 crop-ellipsis" x-text="node.parent"></p><div class="left-sidebar__search-result-item-container"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Node icon"><sprocket-tooltip class="crop-ellipsis" x-bind:content="node.display_name"><a x-bind:href="node.href" x-text="node.display_name"></a></sprocket-tooltip></div></li></template><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex place-content-center"><img src="../assets/search.svg" class="size-8 block light:hidden" alt="Search icon"><img src="../assets/search.light.svg" class="size-8 hidden light:block" alt="Search icon"></li><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex gap-1 place-content-center text-center break-words whitespace-normal text-sm text-slate-500"><span x-text="'No results found for'"></span><span x-text="`&quot;${search}&quot;`" class="text-slate-50"></span></li></ul><ul x-show="showWorkflows &amp;&amp; search === ''" class="left-sidebar__content"><li class=""><div class="left-sidebar__row"><img src="../assets/category-selected.svg" class="left-sidebar__icon block light:hidden" alt="Category icon"><img src="../assets/category-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="Category icon"><p class="text-slate-50">Other</p></div><ul class=""><a href="test-workflow.html" x-data="{
                                     node: {
                                         current: false,
                                         icon: '../assets/workflow-unselected.svg',
                                     }
-                                }" class="left-sidebar__row" x-bind:class="node.current ? 'bg-slate-700/50 is-scrolled-to' : 'hover:bg-slate-800'"><div class="left-sidebar__indent -1"></div><div class="left-sidebar__content-item-container crop-ellipsis"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Workflow icon"><sprocket-tooltip content="test" class="crop-ellipsis" x-bind:class="node.current ? 'text-slate-50' : 'group-hover:text-slate-50'"><span>test</span></sprocket-tooltip></div></a></ul></li></ul></div></div></div><div class="layout__main-center"><div class="layout__main-center-content"><div><div class="flex gap-1 mb-3" x-show="showCenterButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../assets/sidebar-icon-hide.svg" alt=""></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../assets/sidebar-icon-default.svg" alt=""></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../assets/sidebar-icon-expand.svg" alt=""></img></button></div><div class="layout__breadcrumbs"><div class="layout__breadcrumb-container"><a class="layout__breadcrumb-clickable" href="../index.html">docs</a><span> / </span><span class="layout__breadcrumb-inactive">file</span></div></div></div><div class="main__container"><h1 id="title" class="main__title">file</h1><div class="main__badge-container"><div class="main__badge"><span class="main__badge-text">WDL Version</span><div class="main__badge-inner"><span class="main__badge-inner-text">1.2</span></div><div class="main__badge-inner main__badge-inner-latest"><span class="main__badge-inner-text">Latest</span></div></div></div><div id="preamble" class="main__section"><div class="markdown-body">This file should be documented</div></div><div class="main__section"><h2 id="toc" class="main__section-header">Table of Contents</h2><div class="main__grid-container"><div class="main__grid-toc-container"><div class="main__grid-header-cell">Page</div><div class="main__grid-header-cell">Type</div><div class="main__grid-header-cell">Description</div><div class="main__grid-header-separator"></div><div class="main__grid-row" x-data="{ description_expanded: false }"><div class="main__grid-cell"><a class="text-emerald-400 hover:text-emerald-300" href="test-workflow.html">test</a></div><div class="main__grid-cell"><code>workflow</code></div><div class="main__grid-cell">No description provided</div><div x-show="description_expanded" class="main__grid-full-width-cell">No description provided</div></div></div></div></div></div></div></div><div class="layout__sidebar-right"><div class="right-sidebar__container"><div class="right-sidebar__header">ON THIS PAGE</div><a href="#preamble" class="right-sidebar__section-header">Preamble</a><a href="#toc" class="right-sidebar__section-header">Table of Contents</a><div class="right-sidebar__back-to-top-container"><a href="#title" class="right-sidebar__back-to-top"><span class="right-sidebar__back-to-top-icon">↑</span><span class="right-sidebar__back-to-top-text">Back to top</span></a></div></div></div></div></body></html>
\ No newline at end of file
+                                }" class="left-sidebar__row" x-bind:class="node.current ? 'bg-slate-700/50 is-scrolled-to' : 'hover:bg-slate-800'"><div class="left-sidebar__indent -1"></div><div class="left-sidebar__content-item-container crop-ellipsis"><img x-bind:src="node.icon?.replace('.svg', '.light.svg')" class="left-sidebar__icon" alt="Workflow icon"><sprocket-tooltip content="test" class="crop-ellipsis" x-bind:class="node.current ? 'text-slate-50' : 'group-hover:text-slate-50'"><span>test</span></sprocket-tooltip></div></a></ul></li></ul></div></div></div><div class="layout__main-center"><div class="layout__main-center-content"><div><div class="flex gap-1 mb-3" x-show="showCenterButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../assets/sidebar-icon-hide.svg" alt="" class="block light:hidden"></img><img src="../assets/sidebar-icon-hide.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../assets/sidebar-icon-default.svg" alt="" class="block light:hidden"></img><img src="../assets/sidebar-icon-default.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../assets/sidebar-icon-expand.svg" alt="" class="block light:hidden"></img><img src="../assets/sidebar-icon-expand.light.svg" alt="" class="hidden light:block"></img></button></div><div class="flex flex-row-reverse items-start justify-between"><button x-on:click="
+                                document.documentElement.classList.toggle('light')
+                                localStorage.setItem('theme', document.documentElement.classList.contains('light') ? 'light' : 'dark')
+                                " class="border border-slate-700 rounded-md h-8 flex items-center justify-center text-slate-300 text-lg w-8 cursor-pointer hover:border-slate-500">☀︎</button><div class="layout__breadcrumbs"><div class="layout__breadcrumb-container"><a class="layout__breadcrumb-clickable" href="../index.html">docs</a><span> / </span><span class="layout__breadcrumb-inactive">file</span></div></div></div></div><div class="main__container"><h1 id="title" class="main__title">file</h1><div class="main__badge-container"><div class="main__badge"><span class="main__badge-text">WDL Version</span><div class="main__badge-inner"><span class="main__badge-inner-text">1.2</span></div><div class="main__badge-inner main__badge-inner-latest"><span class="main__badge-inner-text">Latest</span></div></div></div><div id="preamble" class="main__section"><div class="markdown-body">This file should be documented</div></div><div class="main__section"><h2 id="toc" class="main__section-header">Table of Contents</h2><div class="main__grid-container"><div class="main__grid-toc-container"><div class="main__grid-header-cell">Page</div><div class="main__grid-header-cell">Type</div><div class="main__grid-header-cell">Description</div><div class="main__grid-header-separator"></div><div class="main__grid-row" x-data="{ description_expanded: false }"><div class="main__grid-cell"><a class="text-brand-emerald-400 hover:text-brand-emerald-200" href="test-workflow.html">test</a></div><div class="main__grid-cell"><code>workflow</code></div><div class="main__grid-cell">No description provided</div><div x-show="description_expanded" class="main__grid-full-width-cell">No description provided</div></div></div></div></div></div></div></div><div class="layout__sidebar-right"><div class="right-sidebar__container"><div class="right-sidebar__header">ON THIS PAGE</div><a href="#preamble" class="right-sidebar__section-header">Preamble</a><a href="#toc" class="right-sidebar__section-header">Table of Contents</a><div class="right-sidebar__back-to-top-container"><a href="#title" class="right-sidebar__back-to-top"><span class="right-sidebar__back-to-top-icon">↑</span><span class="right-sidebar__back-to-top-text">Back to top</span></a></div></div></div></div></body></html>
\ No newline at end of file
diff --git a/tests/cli/doc/ignorefile/outputs/docs/file/test-workflow.html b/tests/cli/doc/ignorefile/outputs/docs/file/test-workflow.html
index ab33212c..7adeae53 100644
--- a/tests/cli/doc/ignorefile/outputs/docs/file/test-workflow.html
+++ b/tests/cli/doc/ignorefile/outputs/docs/file/test-workflow.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html class="dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>test</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&amp;display=swap" rel="stylesheet"><script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script defer src="../index.js"></script><link rel="stylesheet" type="text/css" href="../style.css"></head><body class="body--base"><div class="layout__container layout__container--alt-layout" x-transition x-data="{
+<!DOCTYPE html><html x-data="{ DEFAULT_THEME: '' }" x-bind:class="(localStorage.getItem('theme') ?? DEFAULT_THEME) === 'light' ? 'light' : ''" x-cloak><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>test</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&amp;display=swap" rel="stylesheet"><script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script defer src="../index.js"></script><link rel="stylesheet" type="text/css" href="../style.css"></head><body class="body--base"><div class="layout__container layout__container--alt-layout" x-transition x-data="{
                 sidebarState: $persist(window.innerWidth &lt; 768 ? 'hidden' : 'normal').using(sessionStorage),
                 get showSidebarButtons() { return this.sidebarState !== 'hidden'; },
                 get showCenterButtons() { return this.sidebarState === 'hidden'; },
@@ -16,7 +16,7 @@
                 collapseSidebar() { this.sidebarState = 'hidden'; },
                 restoreSidebar() { this.sidebarState = 'normal'; },
                 expandSidebar() { this.sidebarState = 'xl'; }
-            }" x-bind:class="containerClasses"><div class="layout__sidebar-left" x-transition><div class="absolute top-5 right-2 flex gap-1 z-10" x-cloak x-show="showSidebarButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../assets/sidebar-icon-hide.svg" alt=""></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../assets/sidebar-icon-default.svg" alt=""></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../assets/sidebar-icon-expand.svg" alt=""></img></button></div><div x-data="{
+            }" x-bind:class="containerClasses"><div class="layout__sidebar-left" x-transition><div class="absolute top-5 right-2 flex gap-1 z-10" x-cloak x-show="showSidebarButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../assets/sidebar-icon-hide.svg" alt="" class="block light:hidden"></img><img src="../assets/sidebar-icon-hide.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../assets/sidebar-icon-default.svg" alt="" class="block light:hidden"></img><img src="../assets/sidebar-icon-default.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../assets/sidebar-icon-expand.svg" alt="" class="block light:hidden"></img><img src="../assets/sidebar-icon-expand.light.svg" alt="" class="hidden light:block"></img></button></div><div x-data="{
                 showWorkflows: $persist(false).using(sessionStorage),
                 search: $persist('').using(sessionStorage),
                 dirOpen: '../assets/chevron-up.svg',
@@ -68,9 +68,12 @@
                         this.showChildrenCache[n.key] = true;
                     });
                 }
-            }" x-cloak x-init="$nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__container"><div class="sticky px-4"><a href="../index.html"><img src="../assets/logo.svg" class="w-[120px] flex-none mb-8" alt="Logo"></a><div class="relative w-full h-10"><input id="searchbox" x-model.debounce="search" type="text" placeholder="Search..." class="left-sidebar__searchbox"><img src="../assets/search.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none" alt="Search icon"><img src="../assets/x-mark.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"></div><div class="left-sidebar__tabs-container mt-4"><button x-on:click="showWorkflows = true; search = ''; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="! showWorkflows ? 'opacity-40 hover:opacity-80' : ''"><img src="../assets/list-bullet-selected.svg" class="left-sidebar__icon" alt="List icon"><p>Workflows</p></button><button x-on:click="showWorkflows = false; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="showWorkflows ? 'opacity-40 hover:opacity-80' : ''"><img src="../assets/folder-selected.svg" class="left-sidebar__icon" alt="List icon"><p>Full Directory</p></button></div></div><div x-cloak class="left-sidebar__content-container pt-4"><ul x-show="! showWorkflows || search != ''" class="left-sidebar__content"><sprocket-tooltip content="docs" class="block"><a href="../index.html" x-show="search === ''" aria-label="docs" class="left-sidebar__row hover:bg-slate-700"><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative shrink-0"><img src="../assets/dir-open.svg" class="left-sidebar__icon" alt="Directory icon"></div><div class="text-slate-50">docs</div></div></a></sprocket-tooltip><template x-for="node in shownNodes"><sprocket-tooltip x-bind:content="node.display_name" class="block isolate"><a x-bind:href="node.href" x-show="showSelfCache[node.key]" x-on:click="if (node.href === null) toggleChildren(node.key)" x-bind:aria-label="node.display_name" class="left-sidebar__row" x-bind:class="`${node.current ? 'is-scrolled-to left-sidebar__row--active' : (node.href === null) ? showChildrenCache[node.key] ? 'left-sidebar__row-folder left-sidebar__row-folder--open' : 'left-sidebar__row-folder left-sidebar__row-folder--closed' : 'left-sidebar__row-page'} ${node.ancestor ? 'left-sidebar__content-item-container--ancestor' : ''}`"><template x-for="i in Array.from({ length: node.nest_level })"><div class="left-sidebar__indent -z-1"></div></template><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative left-sidebar__icon shrink-0"><img x-bind:src="node.icon || dirOpen" class="left-sidebar__icon" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"></div><div class="crop-ellipsis" x-text="node.display_name"></div></div></a></sprocket-tooltip></template><template x-for="node in searchedNodes"><li class="left-sidebar__search-result-item"><p class="text-xs text-slate-500 crop-ellipsis" x-text="node.parent"></p><div class="left-sidebar__search-result-item-container"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Node icon"><sprocket-tooltip class="crop-ellipsis" x-bind:content="node.display_name"><a x-bind:href="node.href" x-text="node.display_name"></a></sprocket-tooltip></div></li></template><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex place-content-center"><img src="../assets/search.svg" class="size-8" alt="Search icon"></li><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex gap-1 place-content-center text-center break-words whitespace-normal text-sm text-slate-500"><span x-text="'No results found for'"></span><span x-text="`&quot;${search}&quot;`" class="text-slate-50"></span></li></ul><ul x-show="showWorkflows &amp;&amp; search === ''" class="left-sidebar__content"><li class=""><div class="left-sidebar__row"><img src="../assets/category-selected.svg" class="left-sidebar__icon" alt="Category icon"><p class="text-slate-50">Other</p></div><ul class=""><a href="test-workflow.html" x-data="{
+            }" x-cloak x-init="$nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__container"><div class="sticky px-4"><a href="../index.html"><img src="../assets/logo.svg" class="w-[120px] flex-none mb-8 block light:hidden" alt="Logo"><img src="../assets/logo.light.svg" class="w-[120px] flex-none mb-8 hidden light:block" alt="Logo"></a><div class="relative w-full h-10"><input id="searchbox" x-model.debounce="search" type="text" placeholder="Search..." class="left-sidebar__searchbox"><img src="../assets/search.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none block light:hidden" alt="Search icon"><img src="../assets/search.light.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none hidden light:block" alt="Search icon"><img src="../assets/x-mark.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer block light:hidden" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"><img src="../assets/x-mark.light.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer hidden light:block" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"></div><div class="left-sidebar__tabs-container mt-4"><button x-on:click="showWorkflows = true; search = ''; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="! showWorkflows ? 'opacity-40 light:opacity-60 hover:opacity-80' : ''"><img src="../assets/list-bullet-selected.svg" class="left-sidebar__icon block light:hidden" alt="List icon"><img src="../assets/list-bullet-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="List icon"><p>Workflows</p></button><button x-on:click="showWorkflows = false; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="showWorkflows ? 'opacity-50 light:opacity-60 hover:opacity-80' : ''"><img src="../assets/folder-selected.svg" class="left-sidebar__icon block light:hidden" alt="List icon"><img src="../assets/folder-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="List icon"><p>Full Directory</p></button></div></div><div x-cloak class="left-sidebar__content-container pt-4"><ul x-show="! showWorkflows || search != ''" class="left-sidebar__content"><sprocket-tooltip content="docs" class="block"><a href="../index.html" x-show="search === ''" aria-label="docs" class="left-sidebar__row hover:bg-slate-700"><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative shrink-0"><img src="../assets/dir-open.svg" class="left-sidebar__icon block light:hidden" alt="Directory icon"><img src="../assets/dir-open.light.svg" class="left-sidebar__icon hidden light:block" alt="Directory icon"></div><div class="text-slate-50">docs</div></div></a></sprocket-tooltip><template x-for="node in shownNodes"><sprocket-tooltip x-bind:content="node.display_name" class="block isolate"><a x-bind:href="node.href" x-show="showSelfCache[node.key]" x-on:click="if (node.href === null) toggleChildren(node.key)" x-bind:aria-label="node.display_name" class="left-sidebar__row" x-bind:class="`${node.current ? 'is-scrolled-to left-sidebar__row--active' : (node.href === null) ? showChildrenCache[node.key] ? 'left-sidebar__row-folder left-sidebar__row-folder--open' : 'left-sidebar__row-folder left-sidebar__row-folder--closed' : 'left-sidebar__row-page'} ${node.ancestor ? 'left-sidebar__content-item-container--ancestor' : ''}`"><template x-for="i in Array.from({ length: node.nest_level })"><div class="left-sidebar__indent -z-1"></div></template><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative left-sidebar__icon shrink-0"><img x-bind:src="node.icon || dirOpen" class="left-sidebar__icon block light:hidden" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"><img x-bind:src="(node.icon || dirOpen).replace('.svg', '.light.svg')" class="left-sidebar__icon hidden light:block" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"></div><div class="crop-ellipsis" x-text="node.display_name"></div></div></a></sprocket-tooltip></template><template x-for="node in searchedNodes"><li class="left-sidebar__search-result-item"><p class="text-xs text-slate-500 crop-ellipsis" x-text="node.parent"></p><div class="left-sidebar__search-result-item-container"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Node icon"><sprocket-tooltip class="crop-ellipsis" x-bind:content="node.display_name"><a x-bind:href="node.href" x-text="node.display_name"></a></sprocket-tooltip></div></li></template><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex place-content-center"><img src="../assets/search.svg" class="size-8 block light:hidden" alt="Search icon"><img src="../assets/search.light.svg" class="size-8 hidden light:block" alt="Search icon"></li><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex gap-1 place-content-center text-center break-words whitespace-normal text-sm text-slate-500"><span x-text="'No results found for'"></span><span x-text="`&quot;${search}&quot;`" class="text-slate-50"></span></li></ul><ul x-show="showWorkflows &amp;&amp; search === ''" class="left-sidebar__content"><li class=""><div class="left-sidebar__row"><img src="../assets/category-selected.svg" class="left-sidebar__icon block light:hidden" alt="Category icon"><img src="../assets/category-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="Category icon"><p class="text-slate-50">Other</p></div><ul class=""><a href="test-workflow.html" x-data="{
                                     node: {
                                         current: true,
                                         icon: '../assets/workflow-selected.svg',
                                     }
-                                }" class="left-sidebar__row" x-bind:class="node.current ? 'bg-slate-700/50 is-scrolled-to' : 'hover:bg-slate-800'"><div class="left-sidebar__indent -1"></div><div class="left-sidebar__content-item-container crop-ellipsis"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Workflow icon"><sprocket-tooltip content="test" class="crop-ellipsis" x-bind:class="node.current ? 'text-slate-50' : 'group-hover:text-slate-50'"><span>test</span></sprocket-tooltip></div></a></ul></li></ul></div></div></div><div class="layout__main-center"><div class="layout__main-center-content"><div><div class="flex gap-1 mb-3" x-show="showCenterButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../assets/sidebar-icon-hide.svg" alt=""></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../assets/sidebar-icon-default.svg" alt=""></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../assets/sidebar-icon-expand.svg" alt=""></img></button></div><div class="layout__breadcrumbs"><div class="layout__breadcrumb-container"><a class="layout__breadcrumb-clickable" href="../index.html">docs</a><span> / </span><a href="index.html" class="layout__breadcrumb-clickable">file</a><span> / </span><span class="layout__breadcrumb-inactive">test</span></div></div></div><div class="main__container"><span class="text-emerald-400">Workflow</span><h1 id="title" class="main__title">test</h1><div class="markdown-body mb-4">No description provided</div><div class="main__badge-container"><div class="main__badge"><span class="main__badge-text">WDL Version</span><div class="main__badge-inner"><span class="main__badge-inner-text">1.2</span></div><div class="main__badge-inner main__badge-inner-latest"><span class="main__badge-inner-text">Latest</span></div></div><div class="main__badge main__badge--disabled"><span class="main__badge-text">Nested Inputs Not Allowed</span></div></div><div x-data="{ unix: true }" class="main__run-with-container"><div class="main__run-with-label"><span class="main__run-with-label-text">RUN WITH</span><button x-on:click="unix = !unix" class="main__run-with-toggle"><div x-bind:class="unix ? 'main__run-with-toggle-label--active' : 'main__run-with-toggle-label--inactive'">Unix</div><div x-bind:class="!unix ? 'main__run-with-toggle-label--active' : 'main__run-with-toggle-label--inactive'">Windows</div></button></div><div class="main__run-with-content"><p class="main__run-with-content-text">sprocket run --entrypoint test <span x-show="unix">file.wdl</span><span x-show="!unix">file.wdl</span> [INPUTS]...</p></div></div><div class="main__section"></div><div class="main__section"><h2 id="inputs" class="main__section-header">Inputs</h2></div><div class="main__section"><h2 id="outputs" class="main__section-header">Outputs</h2><div class="main__grid-container"><div class="main__grid-non-req-param-container"><div class="main__grid-header-cell">Name</div><div class="main__grid-header-cell">Type</div><div class="main__grid-header-cell">Default</div><div class="main__grid-header-cell">Description</div><div class="main__grid-header-separator"></div></div></div></div></div></div></div><div class="layout__sidebar-right"><div class="right-sidebar__container"><div class="right-sidebar__header">ON THIS PAGE</div><a href="#inputs" class="right-sidebar__section-header">Inputs</a><a href="#outputs" class="right-sidebar__section-header">Outputs</a><div class="right-sidebar__back-to-top-container"><a href="#title" class="right-sidebar__back-to-top"><span class="right-sidebar__back-to-top-icon">↑</span><span class="right-sidebar__back-to-top-text">Back to top</span></a></div></div></div></div></body></html>
\ No newline at end of file
+                                }" class="left-sidebar__row" x-bind:class="node.current ? 'bg-slate-700/50 is-scrolled-to' : 'hover:bg-slate-800'"><div class="left-sidebar__indent -1"></div><div class="left-sidebar__content-item-container crop-ellipsis"><img x-bind:src="node.icon?.replace('.svg', '.light.svg')" class="left-sidebar__icon" alt="Workflow icon"><sprocket-tooltip content="test" class="crop-ellipsis" x-bind:class="node.current ? 'text-slate-50' : 'group-hover:text-slate-50'"><span>test</span></sprocket-tooltip></div></a></ul></li></ul></div></div></div><div class="layout__main-center"><div class="layout__main-center-content"><div><div class="flex gap-1 mb-3" x-show="showCenterButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="../assets/sidebar-icon-hide.svg" alt="" class="block light:hidden"></img><img src="../assets/sidebar-icon-hide.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="../assets/sidebar-icon-default.svg" alt="" class="block light:hidden"></img><img src="../assets/sidebar-icon-default.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="../assets/sidebar-icon-expand.svg" alt="" class="block light:hidden"></img><img src="../assets/sidebar-icon-expand.light.svg" alt="" class="hidden light:block"></img></button></div><div class="flex flex-row-reverse items-start justify-between"><button x-on:click="
+                                document.documentElement.classList.toggle('light')
+                                localStorage.setItem('theme', document.documentElement.classList.contains('light') ? 'light' : 'dark')
+                                " class="border border-slate-700 rounded-md h-8 flex items-center justify-center text-slate-300 text-lg w-8 cursor-pointer hover:border-slate-500">☀︎</button><div class="layout__breadcrumbs"><div class="layout__breadcrumb-container"><a class="layout__breadcrumb-clickable" href="../index.html">docs</a><span> / </span><a href="index.html" class="layout__breadcrumb-clickable">file</a><span> / </span><span class="layout__breadcrumb-inactive">test</span></div></div></div></div><div class="main__container"><span class="text-brand-emerald-400">Workflow</span><h1 id="title" class="main__title">test</h1><div class="markdown-body mb-4">No description provided</div><div class="main__badge-container"><div class="main__badge"><span class="main__badge-text">WDL Version</span><div class="main__badge-inner"><span class="main__badge-inner-text">1.2</span></div><div class="main__badge-inner main__badge-inner-latest"><span class="main__badge-inner-text">Latest</span></div></div><div class="main__badge main__badge--disabled"><span class="main__badge-text">Nested Inputs Not Allowed</span></div></div><div x-data="{ unix: true }" class="main__run-with-container"><div class="main__run-with-label"><span class="main__run-with-label-text">RUN WITH</span><button x-on:click="unix = !unix" class="main__run-with-toggle"><div x-bind:class="unix ? 'main__run-with-toggle-label--active' : 'main__run-with-toggle-label--inactive'">Unix</div><div x-bind:class="!unix ? 'main__run-with-toggle-label--active' : 'main__run-with-toggle-label--inactive'">Windows</div></button></div><div class="main__run-with-content"><p class="main__run-with-content-text">sprocket run --entrypoint test <span x-show="unix">file.wdl</span><span x-show="!unix">file.wdl</span> [INPUTS]...</p></div></div><div class="main__section"></div><div class="main__section"><h2 id="inputs" class="main__section-header">Inputs</h2></div><div class="main__section"><h2 id="outputs" class="main__section-header">Outputs</h2><div class="main__grid-container"><div class="main__grid-non-req-param-container"><div class="main__grid-header-cell">Name</div><div class="main__grid-header-cell">Type</div><div class="main__grid-header-cell">Default</div><div class="main__grid-header-cell">Description</div><div class="main__grid-header-separator"></div></div></div></div></div></div></div><div class="layout__sidebar-right"><div class="right-sidebar__container"><div class="right-sidebar__header">ON THIS PAGE</div><a href="#inputs" class="right-sidebar__section-header">Inputs</a><a href="#outputs" class="right-sidebar__section-header">Outputs</a><div class="right-sidebar__back-to-top-container"><a href="#title" class="right-sidebar__back-to-top"><span class="right-sidebar__back-to-top-icon">↑</span><span class="right-sidebar__back-to-top-text">Back to top</span></a></div></div></div></div></body></html>
\ No newline at end of file
diff --git a/tests/cli/doc/ignorefile/outputs/docs/index.html b/tests/cli/doc/ignorefile/outputs/docs/index.html
index 36831e1e..097d1987 100644
--- a/tests/cli/doc/ignorefile/outputs/docs/index.html
+++ b/tests/cli/doc/ignorefile/outputs/docs/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html class="dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Home</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&amp;display=swap" rel="stylesheet"><script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script defer src="index.js"></script><link rel="stylesheet" type="text/css" href="style.css"></head><body class="body--base"><div class="layout__container layout__container--alt-layout" x-transition x-data="{
+<!DOCTYPE html><html x-data="{ DEFAULT_THEME: '' }" x-bind:class="(localStorage.getItem('theme') ?? DEFAULT_THEME) === 'light' ? 'light' : ''" x-cloak><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Home</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&amp;display=swap" rel="stylesheet"><script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script defer src="index.js"></script><link rel="stylesheet" type="text/css" href="style.css"></head><body class="body--base"><div class="layout__container layout__container--alt-layout" x-transition x-data="{
                 sidebarState: $persist(window.innerWidth &lt; 768 ? 'hidden' : 'normal').using(sessionStorage),
                 get showSidebarButtons() { return this.sidebarState !== 'hidden'; },
                 get showCenterButtons() { return this.sidebarState === 'hidden'; },
@@ -16,7 +16,7 @@
                 collapseSidebar() { this.sidebarState = 'hidden'; },
                 restoreSidebar() { this.sidebarState = 'normal'; },
                 expandSidebar() { this.sidebarState = 'xl'; }
-            }" x-bind:class="containerClasses"><div class="layout__sidebar-left" x-transition><div class="absolute top-5 right-2 flex gap-1 z-10" x-cloak x-show="showSidebarButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="assets/sidebar-icon-hide.svg" alt=""></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="assets/sidebar-icon-default.svg" alt=""></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="assets/sidebar-icon-expand.svg" alt=""></img></button></div><div x-data="{
+            }" x-bind:class="containerClasses"><div class="layout__sidebar-left" x-transition><div class="absolute top-5 right-2 flex gap-1 z-10" x-cloak x-show="showSidebarButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="assets/sidebar-icon-hide.svg" alt="" class="block light:hidden"></img><img src="assets/sidebar-icon-hide.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="assets/sidebar-icon-default.svg" alt="" class="block light:hidden"></img><img src="assets/sidebar-icon-default.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="assets/sidebar-icon-expand.svg" alt="" class="block light:hidden"></img><img src="assets/sidebar-icon-expand.light.svg" alt="" class="hidden light:block"></img></button></div><div x-data="{
                 showWorkflows: $persist(false).using(sessionStorage),
                 search: $persist('').using(sessionStorage),
                 dirOpen: 'assets/chevron-up.svg',
@@ -68,9 +68,12 @@
                         this.showChildrenCache[n.key] = true;
                     });
                 }
-            }" x-cloak x-init="$nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__container"><div class="sticky px-4"><a href="index.html"><img src="assets/logo.svg" class="w-[120px] flex-none mb-8" alt="Logo"></a><div class="relative w-full h-10"><input id="searchbox" x-model.debounce="search" type="text" placeholder="Search..." class="left-sidebar__searchbox"><img src="assets/search.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none" alt="Search icon"><img src="assets/x-mark.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"></div><div class="left-sidebar__tabs-container mt-4"><button x-on:click="showWorkflows = true; search = ''; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="! showWorkflows ? 'opacity-40 hover:opacity-80' : ''"><img src="assets/list-bullet-selected.svg" class="left-sidebar__icon" alt="List icon"><p>Workflows</p></button><button x-on:click="showWorkflows = false; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="showWorkflows ? 'opacity-40 hover:opacity-80' : ''"><img src="assets/folder-selected.svg" class="left-sidebar__icon" alt="List icon"><p>Full Directory</p></button></div></div><div x-cloak class="left-sidebar__content-container pt-4"><ul x-show="! showWorkflows || search != ''" class="left-sidebar__content"><sprocket-tooltip content="docs" class="block"><a href="index.html" x-show="search === ''" aria-label="docs" class="left-sidebar__row hover:bg-slate-700"><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative shrink-0"><img src="assets/dir-open.svg" class="left-sidebar__icon" alt="Directory icon"></div><div class="text-slate-50">docs</div></div></a></sprocket-tooltip><template x-for="node in shownNodes"><sprocket-tooltip x-bind:content="node.display_name" class="block isolate"><a x-bind:href="node.href" x-show="showSelfCache[node.key]" x-on:click="if (node.href === null) toggleChildren(node.key)" x-bind:aria-label="node.display_name" class="left-sidebar__row" x-bind:class="`${node.current ? 'is-scrolled-to left-sidebar__row--active' : (node.href === null) ? showChildrenCache[node.key] ? 'left-sidebar__row-folder left-sidebar__row-folder--open' : 'left-sidebar__row-folder left-sidebar__row-folder--closed' : 'left-sidebar__row-page'} ${node.ancestor ? 'left-sidebar__content-item-container--ancestor' : ''}`"><template x-for="i in Array.from({ length: node.nest_level })"><div class="left-sidebar__indent -z-1"></div></template><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative left-sidebar__icon shrink-0"><img x-bind:src="node.icon || dirOpen" class="left-sidebar__icon" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"></div><div class="crop-ellipsis" x-text="node.display_name"></div></div></a></sprocket-tooltip></template><template x-for="node in searchedNodes"><li class="left-sidebar__search-result-item"><p class="text-xs text-slate-500 crop-ellipsis" x-text="node.parent"></p><div class="left-sidebar__search-result-item-container"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Node icon"><sprocket-tooltip class="crop-ellipsis" x-bind:content="node.display_name"><a x-bind:href="node.href" x-text="node.display_name"></a></sprocket-tooltip></div></li></template><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex place-content-center"><img src="assets/search.svg" class="size-8" alt="Search icon"></li><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex gap-1 place-content-center text-center break-words whitespace-normal text-sm text-slate-500"><span x-text="'No results found for'"></span><span x-text="`&quot;${search}&quot;`" class="text-slate-50"></span></li></ul><ul x-show="showWorkflows &amp;&amp; search === ''" class="left-sidebar__content"><li class=""><div class="left-sidebar__row"><img src="assets/category-selected.svg" class="left-sidebar__icon" alt="Category icon"><p class="text-slate-50">Other</p></div><ul class=""><a href="file/test-workflow.html" x-data="{
+            }" x-cloak x-init="$nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__container"><div class="sticky px-4"><a href="index.html"><img src="assets/logo.svg" class="w-[120px] flex-none mb-8 block light:hidden" alt="Logo"><img src="assets/logo.light.svg" class="w-[120px] flex-none mb-8 hidden light:block" alt="Logo"></a><div class="relative w-full h-10"><input id="searchbox" x-model.debounce="search" type="text" placeholder="Search..." class="left-sidebar__searchbox"><img src="assets/search.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none block light:hidden" alt="Search icon"><img src="assets/search.light.svg" class="absolute left-2 top-1/2 -translate-y-1/2 size-6 pointer-events-none hidden light:block" alt="Search icon"><img src="assets/x-mark.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer block light:hidden" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"><img src="assets/x-mark.light.svg" class="absolute right-2 top-1/2 -translate-y-1/2 size-6 hover:cursor-pointer hidden light:block" alt="Clear icon" x-show="search !== ''" x-on:click="search = ''"></div><div class="left-sidebar__tabs-container mt-4"><button x-on:click="showWorkflows = true; search = ''; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="! showWorkflows ? 'opacity-40 light:opacity-60 hover:opacity-80' : ''"><img src="assets/list-bullet-selected.svg" class="left-sidebar__icon block light:hidden" alt="List icon"><img src="assets/list-bullet-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="List icon"><p>Workflows</p></button><button x-on:click="showWorkflows = false; $nextTick(() =&gt; { document.querySelector('.is-scrolled-to')?.scrollIntoView({ block: 'center', behavior: 'instant' }); })" class="left-sidebar__tabs text-slate-50 border-b-slate-50" x-bind:class="showWorkflows ? 'opacity-50 light:opacity-60 hover:opacity-80' : ''"><img src="assets/folder-selected.svg" class="left-sidebar__icon block light:hidden" alt="List icon"><img src="assets/folder-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="List icon"><p>Full Directory</p></button></div></div><div x-cloak class="left-sidebar__content-container pt-4"><ul x-show="! showWorkflows || search != ''" class="left-sidebar__content"><sprocket-tooltip content="docs" class="block"><a href="index.html" x-show="search === ''" aria-label="docs" class="left-sidebar__row hover:bg-slate-700"><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative shrink-0"><img src="assets/dir-open.svg" class="left-sidebar__icon block light:hidden" alt="Directory icon"><img src="assets/dir-open.light.svg" class="left-sidebar__icon hidden light:block" alt="Directory icon"></div><div class="text-slate-50">docs</div></div></a></sprocket-tooltip><template x-for="node in shownNodes"><sprocket-tooltip x-bind:content="node.display_name" class="block isolate"><a x-bind:href="node.href" x-show="showSelfCache[node.key]" x-on:click="if (node.href === null) toggleChildren(node.key)" x-bind:aria-label="node.display_name" class="left-sidebar__row" x-bind:class="`${node.current ? 'is-scrolled-to left-sidebar__row--active' : (node.href === null) ? showChildrenCache[node.key] ? 'left-sidebar__row-folder left-sidebar__row-folder--open' : 'left-sidebar__row-folder left-sidebar__row-folder--closed' : 'left-sidebar__row-page'} ${node.ancestor ? 'left-sidebar__content-item-container--ancestor' : ''}`"><template x-for="i in Array.from({ length: node.nest_level })"><div class="left-sidebar__indent -z-1"></div></template><div class="left-sidebar__content-item-container crop-ellipsis"><div class="relative left-sidebar__icon shrink-0"><img x-bind:src="node.icon || dirOpen" class="left-sidebar__icon block light:hidden" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"><img x-bind:src="(node.icon || dirOpen).replace('.svg', '.light.svg')" class="left-sidebar__icon hidden light:block" alt="Node icon" x-bind:class="`${(node.icon === null) &amp;&amp; !showChildrenCache[node.key] ? 'rotate-180' : ''}`"></div><div class="crop-ellipsis" x-text="node.display_name"></div></div></a></sprocket-tooltip></template><template x-for="node in searchedNodes"><li class="left-sidebar__search-result-item"><p class="text-xs text-slate-500 crop-ellipsis" x-text="node.parent"></p><div class="left-sidebar__search-result-item-container"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Node icon"><sprocket-tooltip class="crop-ellipsis" x-bind:content="node.display_name"><a x-bind:href="node.href" x-text="node.display_name"></a></sprocket-tooltip></div></li></template><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex place-content-center"><img src="assets/search.svg" class="size-8 block light:hidden" alt="Search icon"><img src="assets/search.light.svg" class="size-8 hidden light:block" alt="Search icon"></li><li x-show="search !== '' &amp;&amp; searchedNodes.length === 0" class="flex gap-1 place-content-center text-center break-words whitespace-normal text-sm text-slate-500"><span x-text="'No results found for'"></span><span x-text="`&quot;${search}&quot;`" class="text-slate-50"></span></li></ul><ul x-show="showWorkflows &amp;&amp; search === ''" class="left-sidebar__content"><li class=""><div class="left-sidebar__row"><img src="assets/category-selected.svg" class="left-sidebar__icon block light:hidden" alt="Category icon"><img src="assets/category-selected.light.svg" class="left-sidebar__icon hidden light:block" alt="Category icon"><p class="text-slate-50">Other</p></div><ul class=""><a href="file/test-workflow.html" x-data="{
                                     node: {
                                         current: false,
                                         icon: 'assets/workflow-unselected.svg',
                                     }
-                                }" class="left-sidebar__row" x-bind:class="node.current ? 'bg-slate-700/50 is-scrolled-to' : 'hover:bg-slate-800'"><div class="left-sidebar__indent -1"></div><div class="left-sidebar__content-item-container crop-ellipsis"><img x-bind:src="node.icon" class="left-sidebar__icon" alt="Workflow icon"><sprocket-tooltip content="test" class="crop-ellipsis" x-bind:class="node.current ? 'text-slate-50' : 'group-hover:text-slate-50'"><span>test</span></sprocket-tooltip></div></a></ul></li></ul></div></div></div><div class="layout__main-center"><div class="layout__main-center-content"><div><div class="flex gap-1 mb-3" x-show="showCenterButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="assets/sidebar-icon-hide.svg" alt=""></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="assets/sidebar-icon-default.svg" alt=""></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="assets/sidebar-icon-expand.svg" alt=""></img></button></div></div><h5 class="main__homepage-header">Home</h5><div class="main__section--empty"><img src="assets/missing-home.svg" class="size-12" alt="Missing home icon"><h2 class="main__section-header">There's nothing to see on this page</h2><p>The markdown file for this page wasn't supplied.</p></div></div></div><div class="layout__sidebar-right"><div class="right-sidebar__container"><div class="right-sidebar__header">ON THIS PAGE</div><div class="right-sidebar__back-to-top-container"><a href="#title" class="right-sidebar__back-to-top"><span class="right-sidebar__back-to-top-icon">↑</span><span class="right-sidebar__back-to-top-text">Back to top</span></a></div></div></div></div></body></html>
\ No newline at end of file
+                                }" class="left-sidebar__row" x-bind:class="node.current ? 'bg-slate-700/50 is-scrolled-to' : 'hover:bg-slate-800'"><div class="left-sidebar__indent -1"></div><div class="left-sidebar__content-item-container crop-ellipsis"><img x-bind:src="node.icon?.replace('.svg', '.light.svg')" class="left-sidebar__icon" alt="Workflow icon"><sprocket-tooltip content="test" class="crop-ellipsis" x-bind:class="node.current ? 'text-slate-50' : 'group-hover:text-slate-50'"><span>test</span></sprocket-tooltip></div></a></ul></li></ul></div></div></div><div class="layout__main-center"><div class="layout__main-center-content"><div><div class="flex gap-1 mb-3" x-show="showCenterButtons"><button x-on:click="collapseSidebar()" x-bind:disabled="sidebarState === 'hidden'" x-bind:class="getSidebarButtonClass('hidden')"><img src="assets/sidebar-icon-hide.svg" alt="" class="block light:hidden"></img><img src="assets/sidebar-icon-hide.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="restoreSidebar()" x-bind:disabled="sidebarState === 'normal'" x-bind:class="getSidebarButtonClass('normal')"><img src="assets/sidebar-icon-default.svg" alt="" class="block light:hidden"></img><img src="assets/sidebar-icon-default.light.svg" alt="" class="hidden light:block"></img></button><button x-on:click="expandSidebar()" x-bind:disabled="sidebarState === 'xl'" x-bind:class="getSidebarButtonClass('xl')"><img src="assets/sidebar-icon-expand.svg" alt="" class="block light:hidden"></img><img src="assets/sidebar-icon-expand.light.svg" alt="" class="hidden light:block"></img></button></div><div class="flex flex-row-reverse items-start justify-between"><button x-on:click="
+                                document.documentElement.classList.toggle('light')
+                                localStorage.setItem('theme', document.documentElement.classList.contains('light') ? 'light' : 'dark')
+                                " class="border border-slate-700 rounded-md h-8 flex items-center justify-center text-slate-300 text-lg w-8 cursor-pointer hover:border-slate-500">☀︎</button></div></div><h5 class="main__homepage-header">Home</h5><div class="main__section--empty"><img src="assets/missing-home.svg" class="size-12 block light:hidden" alt="Missing home icon"><img src="assets/missing-home.light.svg" class="size-12 hidden light:block" alt="Missing home icon"><h2 class="main__section-header">There's nothing to see on this page</h2><p>The markdown file for this page wasn't supplied.</p></div></div></div><div class="layout__sidebar-right"><div class="right-sidebar__container"><div class="right-sidebar__header">ON THIS PAGE</div><div class="right-sidebar__back-to-top-container"><a href="#title" class="right-sidebar__back-to-top"><span class="right-sidebar__back-to-top-icon">↑</span><span class="right-sidebar__back-to-top-text">Back to top</span></a></div></div></div></div></body></html>
\ No newline at end of file
diff --git a/tests/cli/doc/ignorefile/outputs/docs/style.css b/tests/cli/doc/ignorefile/outputs/docs/style.css
index 9df776d3..1edebf13 100644
--- a/tests/cli/doc/ignorefile/outputs/docs/style.css
+++ b/tests/cli/doc/ignorefile/outputs/docs/style.css
@@ -1,10 +1,532 @@
 /*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
 @layer properties;
+:root {
+  --color-slate-50: #f8f9fc;
+  --color-slate-100: #f1f3f9;
+  --color-slate-200: #e2e5f0;
+  --color-slate-300: #cbcfe1;
+  --color-slate-400: #949bb8;
+  --color-slate-500: #646c8b;
+  --color-slate-600: #474e69;
+  --color-slate-700: #333a55;
+  --color-slate-800: #22273b;
+  --color-slate-900: #111420;
+  --color-slate-950: #070a1a;
+  --color-gray-50: #f8f9fc;
+  --color-gray-100: #f1f3f9;
+  --color-gray-200: #e2e5f0;
+  --color-gray-300: #cbcfe1;
+  --color-gray-400: #949bb8;
+  --color-gray-500: #646c8b;
+  --color-gray-600: #474e69;
+  --color-gray-700: #333a55;
+  --color-gray-800: #22273b;
+  --color-gray-900: #111420;
+  --color-gray-950: #070a1a;
+  --color-zinc-50: oklch(98.5% 0 0);
+  --color-zinc-100: oklch(96.7% 0.001 286.375);
+  --color-zinc-200: oklch(92% 0.004 286.32);
+  --color-zinc-300: oklch(87.1% 0.006 286.286);
+  --color-zinc-400: oklch(70.5% 0.015 286.067);
+  --color-zinc-500: oklch(55.2% 0.016 285.938);
+  --color-zinc-600: oklch(44.2% 0.017 285.786);
+  --color-zinc-700: oklch(37% 0.013 285.805);
+  --color-zinc-800: oklch(27.4% 0.006 286.033);
+  --color-zinc-900: oklch(21% 0.006 285.885);
+  --color-zinc-950: oklch(14.1% 0.005 285.823);
+  --color-neutral-50: oklch(98.5% 0 0);
+  --color-neutral-100: oklch(97% 0 0);
+  --color-neutral-200: oklch(92.2% 0 0);
+  --color-neutral-300: oklch(87% 0 0);
+  --color-neutral-400: oklch(70.8% 0 0);
+  --color-neutral-500: oklch(55.6% 0 0);
+  --color-neutral-600: oklch(43.9% 0 0);
+  --color-neutral-700: oklch(37.1% 0 0);
+  --color-neutral-800: oklch(26.9% 0 0);
+  --color-neutral-900: oklch(20.5% 0 0);
+  --color-neutral-950: oklch(14.5% 0 0);
+  --color-stone-50: oklch(98.5% 0.001 106.423);
+  --color-stone-100: oklch(97% 0.001 106.424);
+  --color-stone-200: oklch(92.3% 0.003 48.717);
+  --color-stone-300: oklch(86.9% 0.005 56.366);
+  --color-stone-400: oklch(70.9% 0.01 56.259);
+  --color-stone-500: oklch(55.3% 0.013 58.071);
+  --color-stone-600: oklch(44.4% 0.011 73.639);
+  --color-stone-700: oklch(37.4% 0.01 67.558);
+  --color-stone-800: oklch(26.8% 0.007 34.298);
+  --color-stone-900: oklch(21.6% 0.006 56.043);
+  --color-stone-950: oklch(14.7% 0.004 49.25);
+  --color-red-50: oklch(97.1% 0.013 17.38);
+  --color-red-100: oklch(93.6% 0.032 17.717);
+  --color-red-200: oklch(88.5% 0.062 18.334);
+  --color-red-300: oklch(80.8% 0.114 19.571);
+  --color-red-400: oklch(70.4% 0.191 22.216);
+  --color-red-500: oklch(63.7% 0.237 25.331);
+  --color-red-600: oklch(57.7% 0.245 27.325);
+  --color-red-700: oklch(50.5% 0.213 27.518);
+  --color-red-800: oklch(44.4% 0.177 26.899);
+  --color-red-900: oklch(39.6% 0.141 25.723);
+  --color-red-950: oklch(25.8% 0.092 26.042);
+  --color-orange-50: oklch(98% 0.016 73.684);
+  --color-orange-100: oklch(95.4% 0.038 75.164);
+  --color-orange-200: oklch(90.1% 0.076 70.697);
+  --color-orange-300: oklch(83.7% 0.128 66.29);
+  --color-orange-400: oklch(75% 0.183 55.934);
+  --color-orange-500: oklch(70.5% 0.213 47.604);
+  --color-orange-600: oklch(64.6% 0.222 41.116);
+  --color-orange-700: oklch(55.3% 0.195 38.402);
+  --color-orange-800: oklch(47% 0.157 37.304);
+  --color-orange-900: oklch(40.8% 0.123 38.172);
+  --color-orange-950: oklch(26.6% 0.079 36.259);
+  --color-amber-50: oklch(98.7% 0.022 95.277);
+  --color-amber-100: oklch(96.2% 0.059 95.617);
+  --color-amber-200: oklch(92.4% 0.12 95.746);
+  --color-amber-300: oklch(87.9% 0.169 91.605);
+  --color-amber-400: oklch(82.8% 0.189 84.429);
+  --color-amber-500: oklch(76.9% 0.188 70.08);
+  --color-amber-600: oklch(66.6% 0.179 58.318);
+  --color-amber-700: oklch(55.5% 0.163 48.998);
+  --color-amber-800: oklch(47.3% 0.137 46.201);
+  --color-amber-900: oklch(41.4% 0.112 45.904);
+  --color-amber-950: oklch(27.9% 0.077 45.635);
+  --color-yellow-50: oklch(98.7% 0.026 102.212);
+  --color-yellow-100: oklch(97.3% 0.071 103.193);
+  --color-yellow-200: oklch(94.5% 0.129 101.54);
+  --color-yellow-300: oklch(90.5% 0.182 98.111);
+  --color-yellow-400: oklch(85.2% 0.199 91.936);
+  --color-yellow-500: oklch(79.5% 0.184 86.047);
+  --color-yellow-600: oklch(68.1% 0.162 75.834);
+  --color-yellow-700: oklch(55.4% 0.135 66.442);
+  --color-yellow-800: oklch(47.6% 0.114 61.907);
+  --color-yellow-900: oklch(42.1% 0.095 57.708);
+  --color-yellow-950: oklch(28.6% 0.066 53.813);
+  --color-lime-50: oklch(98.6% 0.031 120.757);
+  --color-lime-100: oklch(96.7% 0.067 122.328);
+  --color-lime-200: oklch(93.8% 0.127 124.321);
+  --color-lime-300: oklch(89.7% 0.196 126.665);
+  --color-lime-400: oklch(84.1% 0.238 128.85);
+  --color-lime-500: oklch(76.8% 0.233 130.85);
+  --color-lime-600: oklch(64.8% 0.2 131.684);
+  --color-lime-700: oklch(53.2% 0.157 131.589);
+  --color-lime-800: oklch(45.3% 0.124 130.933);
+  --color-lime-900: oklch(40.5% 0.101 131.063);
+  --color-lime-950: oklch(27.4% 0.072 132.109);
+  --color-green-50: oklch(98.2% 0.018 155.826);
+  --color-green-100: oklch(96.2% 0.044 156.743);
+  --color-green-200: oklch(92.5% 0.084 155.995);
+  --color-green-300: oklch(87.1% 0.15 154.449);
+  --color-green-400: oklch(79.2% 0.209 151.711);
+  --color-green-500: oklch(72.3% 0.219 149.579);
+  --color-green-600: oklch(62.7% 0.194 149.214);
+  --color-green-700: oklch(52.7% 0.154 150.069);
+  --color-green-800: oklch(44.8% 0.119 151.328);
+  --color-green-900: oklch(39.3% 0.095 152.535);
+  --color-green-950: oklch(26.6% 0.065 152.934);
+  --color-emerald-50: oklch(97.9% 0.021 166.113);
+  --color-emerald-100: oklch(95% 0.052 163.051);
+  --color-emerald-200: oklch(90.5% 0.093 164.15);
+  --color-emerald-300: oklch(84.5% 0.143 164.978);
+  --color-emerald-400: oklch(76.5% 0.177 163.223);
+  --color-emerald-500: oklch(69.6% 0.17 162.48);
+  --color-emerald-600: oklch(59.6% 0.145 163.225);
+  --color-emerald-700: oklch(50.8% 0.118 165.612);
+  --color-emerald-800: oklch(43.2% 0.095 166.913);
+  --color-emerald-900: oklch(37.8% 0.077 168.94);
+  --color-emerald-950: oklch(26.2% 0.051 172.552);
+  --color-teal-50: oklch(98.4% 0.014 180.72);
+  --color-teal-100: oklch(95.3% 0.051 180.801);
+  --color-teal-200: oklch(91% 0.096 180.426);
+  --color-teal-300: oklch(85.5% 0.138 181.071);
+  --color-teal-400: oklch(77.7% 0.152 181.912);
+  --color-teal-500: oklch(70.4% 0.14 182.503);
+  --color-teal-600: oklch(60% 0.118 184.704);
+  --color-teal-700: oklch(51.1% 0.096 186.391);
+  --color-teal-800: oklch(43.7% 0.078 188.216);
+  --color-teal-900: oklch(38.6% 0.063 188.416);
+  --color-teal-950: oklch(27.7% 0.046 192.524);
+  --color-cyan-50: oklch(98.4% 0.019 200.873);
+  --color-cyan-100: oklch(95.6% 0.045 203.388);
+  --color-cyan-200: oklch(91.7% 0.08 205.041);
+  --color-cyan-300: oklch(86.5% 0.127 207.078);
+  --color-cyan-400: oklch(78.9% 0.154 211.53);
+  --color-cyan-500: oklch(71.5% 0.143 215.221);
+  --color-cyan-600: oklch(60.9% 0.126 221.723);
+  --color-cyan-700: oklch(52% 0.105 223.128);
+  --color-cyan-800: oklch(45% 0.085 224.283);
+  --color-cyan-900: oklch(39.8% 0.07 227.392);
+  --color-cyan-950: oklch(30.2% 0.056 229.695);
+  --color-sky-50: oklch(97.7% 0.013 236.62);
+  --color-sky-100: oklch(95.1% 0.026 236.824);
+  --color-sky-200: oklch(90.1% 0.058 230.902);
+  --color-sky-300: oklch(82.8% 0.111 230.318);
+  --color-sky-400: oklch(74.6% 0.16 232.661);
+  --color-sky-500: oklch(68.5% 0.169 237.323);
+  --color-sky-600: oklch(58.8% 0.158 241.966);
+  --color-sky-700: oklch(50% 0.134 242.749);
+  --color-sky-800: oklch(44.3% 0.11 240.79);
+  --color-sky-900: oklch(39.1% 0.09 240.876);
+  --color-sky-950: oklch(29.3% 0.066 243.157);
+  --color-blue-50: oklch(97% 0.014 254.604);
+  --color-blue-100: oklch(93.2% 0.032 255.585);
+  --color-blue-200: oklch(88.2% 0.059 254.128);
+  --color-blue-300: oklch(80.9% 0.105 251.813);
+  --color-blue-400: oklch(70.7% 0.165 254.624);
+  --color-blue-500: oklch(62.3% 0.214 259.815);
+  --color-blue-600: oklch(54.6% 0.245 262.881);
+  --color-blue-700: oklch(48.8% 0.243 264.376);
+  --color-blue-800: oklch(42.4% 0.199 265.638);
+  --color-blue-900: oklch(37.9% 0.146 265.522);
+  --color-blue-950: oklch(28.2% 0.091 267.935);
+  --color-indigo-50: oklch(96.2% 0.018 272.314);
+  --color-indigo-100: oklch(93% 0.034 272.788);
+  --color-indigo-200: oklch(87% 0.065 274.039);
+  --color-indigo-300: oklch(78.5% 0.115 274.713);
+  --color-indigo-400: oklch(67.3% 0.182 276.935);
+  --color-indigo-500: oklch(58.5% 0.233 277.117);
+  --color-indigo-600: oklch(51.1% 0.262 276.966);
+  --color-indigo-700: oklch(45.7% 0.24 277.023);
+  --color-indigo-800: oklch(39.8% 0.195 277.366);
+  --color-indigo-900: oklch(35.9% 0.144 278.697);
+  --color-indigo-950: oklch(25.7% 0.09 281.288);
+  --color-violet-50: oklch(96.9% 0.016 293.756);
+  --color-violet-100: oklch(94.3% 0.029 294.588);
+  --color-violet-200: oklch(89.4% 0.057 293.283);
+  --color-violet-300: oklch(81.1% 0.111 293.571);
+  --color-violet-400: oklch(70.2% 0.183 293.541);
+  --color-violet-500: oklch(60.6% 0.25 292.717);
+  --color-violet-600: oklch(54.1% 0.281 293.009);
+  --color-violet-700: oklch(49.1% 0.27 292.581);
+  --color-violet-800: oklch(43.2% 0.232 292.759);
+  --color-violet-900: oklch(38% 0.189 293.745);
+  --color-violet-950: oklch(28.3% 0.141 291.089);
+  --color-purple-50: oklch(97.7% 0.014 308.299);
+  --color-purple-100: oklch(94.6% 0.033 307.174);
+  --color-purple-200: oklch(90.2% 0.063 306.703);
+  --color-purple-300: oklch(82.7% 0.119 306.383);
+  --color-purple-400: oklch(71.4% 0.203 305.504);
+  --color-purple-500: oklch(62.7% 0.265 303.9);
+  --color-purple-600: oklch(55.8% 0.288 302.321);
+  --color-purple-700: oklch(49.6% 0.265 301.924);
+  --color-purple-800: oklch(43.8% 0.218 303.724);
+  --color-purple-900: oklch(38.1% 0.176 304.987);
+  --color-purple-950: oklch(29.1% 0.149 302.717);
+  --color-fuchsia-50: oklch(97.7% 0.017 320.058);
+  --color-fuchsia-100: oklch(95.2% 0.037 318.852);
+  --color-fuchsia-200: oklch(90.3% 0.076 319.62);
+  --color-fuchsia-300: oklch(83.3% 0.145 321.434);
+  --color-fuchsia-400: oklch(74% 0.238 322.16);
+  --color-fuchsia-500: oklch(66.7% 0.295 322.15);
+  --color-fuchsia-600: oklch(59.1% 0.293 322.896);
+  --color-fuchsia-700: oklch(51.8% 0.253 323.949);
+  --color-fuchsia-800: oklch(45.2% 0.211 324.591);
+  --color-fuchsia-900: oklch(40.1% 0.17 325.612);
+  --color-fuchsia-950: oklch(29.3% 0.136 325.661);
+  --color-pink-50: oklch(97.1% 0.014 343.198);
+  --color-pink-100: oklch(94.8% 0.028 342.258);
+  --color-pink-200: oklch(89.9% 0.061 343.231);
+  --color-pink-300: oklch(82.3% 0.12 346.018);
+  --color-pink-400: oklch(71.8% 0.202 349.761);
+  --color-pink-500: oklch(65.6% 0.241 354.308);
+  --color-pink-600: oklch(59.2% 0.249 0.584);
+  --color-pink-700: oklch(52.5% 0.223 3.958);
+  --color-pink-800: oklch(45.9% 0.187 3.815);
+  --color-pink-900: oklch(40.8% 0.153 2.432);
+  --color-pink-950: oklch(28.4% 0.109 3.907);
+  --color-rose-50: oklch(96.9% 0.015 12.422);
+  --color-rose-100: oklch(94.1% 0.03 12.58);
+  --color-rose-200: oklch(89.2% 0.058 10.001);
+  --color-rose-300: oklch(81% 0.117 11.638);
+  --color-rose-400: oklch(71.2% 0.194 13.428);
+  --color-rose-500: oklch(64.5% 0.246 16.439);
+  --color-rose-600: oklch(58.6% 0.253 17.585);
+  --color-rose-700: oklch(51.4% 0.222 16.935);
+  --color-rose-800: oklch(45.5% 0.188 13.697);
+  --color-rose-900: oklch(41% 0.159 10.272);
+  --color-rose-950: oklch(27.1% 0.105 12.094);
+  --color-brand-emerald-200: #a7f3d0;
+  --color-brand-emerald-400: #34d399;
+  --color-brand-emerald-950: #022c22;
+  --color-brand-violet-400: #a78bfa;
+  --color-brand-pink-400: #f472b6;
+  --color-brand-cyan-400: #4bd8fa;
+  --color-brand-red-400: #f87171;
+  --color-brand-yellow-50: #fefce8;
+  --color-brand-yellow-400: #facc15;
+  --color-brand-yellow-700: #a16207;
+  --color-brand-yellow-900: #713f12;
+  --color-brand-yellow-950: #291404;
+  --color-inherit: inherit;
+  --color-current: currentcolor;
+  --color-transparent: transparent;
+  --color-black: #000;
+  --color-white: #fff;
+}
+:root.light {
+  --color-slate-50: #070a1a;
+  --color-slate-100: #111420;
+  --color-slate-200: #22273b;
+  --color-slate-300: #333a55;
+  --color-slate-400: #474e69;
+  --color-slate-500: #646c8b;
+  --color-slate-600: #949bb8;
+  --color-slate-700: #cbcfe1;
+  --color-slate-800: #e2e5f0;
+  --color-slate-900: #f1f3f9;
+  --color-slate-950: #f8f9fc;
+  --color-gray-50: #070a1a;
+  --color-gray-100: #111420;
+  --color-gray-200: #22273b;
+  --color-gray-300: #333a55;
+  --color-gray-400: #474e69;
+  --color-gray-500: #646c8b;
+  --color-gray-600: #949bb8;
+  --color-gray-700: #cbcfe1;
+  --color-gray-800: #e2e5f0;
+  --color-gray-900: #f1f3f9;
+  --color-gray-950: #f8f9fc;
+  --color-zinc-50: oklch(14.1% 0.005 285.823);
+  --color-zinc-100: oklch(21% 0.006 285.885);
+  --color-zinc-200: oklch(27.4% 0.006 286.033);
+  --color-zinc-300: oklch(37% 0.013 285.805);
+  --color-zinc-400: oklch(44.2% 0.017 285.786);
+  --color-zinc-500: oklch(55.2% 0.016 285.938);
+  --color-zinc-600: oklch(70.5% 0.015 286.067);
+  --color-zinc-700: oklch(87.1% 0.006 286.286);
+  --color-zinc-800: oklch(92% 0.004 286.32);
+  --color-zinc-900: oklch(96.7% 0.001 286.375);
+  --color-zinc-950: oklch(98.5% 0 0);
+  --color-neutral-50: oklch(14.5% 0 0);
+  --color-neutral-100: oklch(20.5% 0 0);
+  --color-neutral-200: oklch(26.9% 0 0);
+  --color-neutral-300: oklch(37.1% 0 0);
+  --color-neutral-400: oklch(43.9% 0 0);
+  --color-neutral-500: oklch(55.6% 0 0);
+  --color-neutral-600: oklch(70.8% 0 0);
+  --color-neutral-700: oklch(87% 0 0);
+  --color-neutral-800: oklch(92.2% 0 0);
+  --color-neutral-900: oklch(97% 0 0);
+  --color-neutral-950: oklch(98.5% 0 0);
+  --color-stone-50: oklch(14.7% 0.004 49.25);
+  --color-stone-100: oklch(21.6% 0.006 56.043);
+  --color-stone-200: oklch(26.8% 0.007 34.298);
+  --color-stone-300: oklch(37.4% 0.01 67.558);
+  --color-stone-400: oklch(44.4% 0.011 73.639);
+  --color-stone-500: oklch(55.3% 0.013 58.071);
+  --color-stone-600: oklch(70.9% 0.01 56.259);
+  --color-stone-700: oklch(86.9% 0.005 56.366);
+  --color-stone-800: oklch(92.3% 0.003 48.717);
+  --color-stone-900: oklch(97% 0.001 106.424);
+  --color-stone-950: oklch(98.5% 0.001 106.423);
+  --color-red-50: oklch(25.8% 0.092 26.042);
+  --color-red-100: oklch(39.6% 0.141 25.723);
+  --color-red-200: oklch(44.4% 0.177 26.899);
+  --color-red-300: oklch(50.5% 0.213 27.518);
+  --color-red-400: oklch(57.7% 0.245 27.325);
+  --color-red-500: oklch(63.7% 0.237 25.331);
+  --color-red-600: oklch(70.4% 0.191 22.216);
+  --color-red-700: oklch(80.8% 0.114 19.571);
+  --color-red-800: oklch(88.5% 0.062 18.334);
+  --color-red-900: oklch(93.6% 0.032 17.717);
+  --color-red-950: oklch(97.1% 0.013 17.38);
+  --color-orange-50: oklch(26.6% 0.079 36.259);
+  --color-orange-100: oklch(40.8% 0.123 38.172);
+  --color-orange-200: oklch(47% 0.157 37.304);
+  --color-orange-300: oklch(55.3% 0.195 38.402);
+  --color-orange-400: oklch(64.6% 0.222 41.116);
+  --color-orange-500: oklch(70.5% 0.213 47.604);
+  --color-orange-600: oklch(75% 0.183 55.934);
+  --color-orange-700: oklch(83.7% 0.128 66.29);
+  --color-orange-800: oklch(90.1% 0.076 70.697);
+  --color-orange-900: oklch(95.4% 0.038 75.164);
+  --color-orange-950: oklch(98% 0.016 73.684);
+  --color-amber-50: oklch(27.9% 0.077 45.635);
+  --color-amber-100: oklch(41.4% 0.112 45.904);
+  --color-amber-200: oklch(47.3% 0.137 46.201);
+  --color-amber-300: oklch(55.5% 0.163 48.998);
+  --color-amber-400: oklch(66.6% 0.179 58.318);
+  --color-amber-500: oklch(76.9% 0.188 70.08);
+  --color-amber-600: oklch(82.8% 0.189 84.429);
+  --color-amber-700: oklch(87.9% 0.169 91.605);
+  --color-amber-800: oklch(92.4% 0.12 95.746);
+  --color-amber-900: oklch(96.2% 0.059 95.617);
+  --color-amber-950: oklch(98.7% 0.022 95.277);
+  --color-yellow-50: oklch(28.6% 0.066 53.813);
+  --color-yellow-100: oklch(42.1% 0.095 57.708);
+  --color-yellow-200: oklch(47.6% 0.114 61.907);
+  --color-yellow-300: oklch(55.4% 0.135 66.442);
+  --color-yellow-400: oklch(68.1% 0.162 75.834);
+  --color-yellow-500: oklch(79.5% 0.184 86.047);
+  --color-yellow-600: oklch(85.2% 0.199 91.936);
+  --color-yellow-700: oklch(90.5% 0.182 98.111);
+  --color-yellow-800: oklch(94.5% 0.129 101.54);
+  --color-yellow-900: oklch(97.3% 0.071 103.193);
+  --color-yellow-950: oklch(98.7% 0.026 102.212);
+  --color-lime-50: oklch(27.4% 0.072 132.109);
+  --color-lime-100: oklch(40.5% 0.101 131.063);
+  --color-lime-200: oklch(45.3% 0.124 130.933);
+  --color-lime-300: oklch(53.2% 0.157 131.589);
+  --color-lime-400: oklch(64.8% 0.2 131.684);
+  --color-lime-500: oklch(76.8% 0.233 130.85);
+  --color-lime-600: oklch(84.1% 0.238 128.85);
+  --color-lime-700: oklch(89.7% 0.196 126.665);
+  --color-lime-800: oklch(93.8% 0.127 124.321);
+  --color-lime-900: oklch(96.7% 0.067 122.328);
+  --color-lime-950: oklch(98.6% 0.031 120.757);
+  --color-green-50: oklch(26.6% 0.065 152.934);
+  --color-green-100: oklch(39.3% 0.095 152.535);
+  --color-green-200: oklch(44.8% 0.119 151.328);
+  --color-green-300: oklch(52.7% 0.154 150.069);
+  --color-green-400: oklch(62.7% 0.194 149.214);
+  --color-green-500: oklch(72.3% 0.219 149.579);
+  --color-green-600: oklch(79.2% 0.209 151.711);
+  --color-green-700: oklch(87.1% 0.15 154.449);
+  --color-green-800: oklch(92.5% 0.084 155.995);
+  --color-green-900: oklch(96.2% 0.044 156.743);
+  --color-green-950: oklch(98.2% 0.018 155.826);
+  --color-emerald-50: oklch(26.2% 0.051 172.552);
+  --color-emerald-100: oklch(37.8% 0.077 168.94);
+  --color-emerald-200: oklch(43.2% 0.095 166.913);
+  --color-emerald-300: oklch(50.8% 0.118 165.612);
+  --color-emerald-400: oklch(59.6% 0.145 163.225);
+  --color-emerald-500: oklch(69.6% 0.17 162.48);
+  --color-emerald-600: oklch(76.5% 0.177 163.223);
+  --color-emerald-700: oklch(84.5% 0.143 164.978);
+  --color-emerald-800: oklch(90.5% 0.093 164.15);
+  --color-emerald-900: oklch(95% 0.052 163.051);
+  --color-emerald-950: oklch(97.9% 0.021 166.113);
+  --color-teal-50: oklch(27.7% 0.046 192.524);
+  --color-teal-100: oklch(38.6% 0.063 188.416);
+  --color-teal-200: oklch(43.7% 0.078 188.216);
+  --color-teal-300: oklch(51.1% 0.096 186.391);
+  --color-teal-400: oklch(60% 0.118 184.704);
+  --color-teal-500: oklch(70.4% 0.14 182.503);
+  --color-teal-600: oklch(77.7% 0.152 181.912);
+  --color-teal-700: oklch(85.5% 0.138 181.071);
+  --color-teal-800: oklch(91% 0.096 180.426);
+  --color-teal-900: oklch(95.3% 0.051 180.801);
+  --color-teal-950: oklch(98.4% 0.014 180.72);
+  --color-cyan-50: oklch(30.2% 0.056 229.695);
+  --color-cyan-100: oklch(39.8% 0.07 227.392);
+  --color-cyan-200: oklch(45% 0.085 224.283);
+  --color-cyan-300: oklch(52% 0.105 223.128);
+  --color-cyan-400: oklch(60.9% 0.126 221.723);
+  --color-cyan-500: oklch(71.5% 0.143 215.221);
+  --color-cyan-600: oklch(78.9% 0.154 211.53);
+  --color-cyan-700: oklch(86.5% 0.127 207.078);
+  --color-cyan-800: oklch(91.7% 0.08 205.041);
+  --color-cyan-900: oklch(95.6% 0.045 203.388);
+  --color-cyan-950: oklch(98.4% 0.019 200.873);
+  --color-sky-50: oklch(29.3% 0.066 243.157);
+  --color-sky-100: oklch(39.1% 0.09 240.876);
+  --color-sky-200: oklch(44.3% 0.11 240.79);
+  --color-sky-300: oklch(50% 0.134 242.749);
+  --color-sky-400: oklch(58.8% 0.158 241.966);
+  --color-sky-500: oklch(68.5% 0.169 237.323);
+  --color-sky-600: oklch(74.6% 0.16 232.661);
+  --color-sky-700: oklch(82.8% 0.111 230.318);
+  --color-sky-800: oklch(90.1% 0.058 230.902);
+  --color-sky-900: oklch(95.1% 0.026 236.824);
+  --color-sky-950: oklch(97.7% 0.013 236.62);
+  --color-blue-50: oklch(28.2% 0.091 267.935);
+  --color-blue-100: oklch(37.9% 0.146 265.522);
+  --color-blue-200: oklch(42.4% 0.199 265.638);
+  --color-blue-300: oklch(48.8% 0.243 264.376);
+  --color-blue-400: oklch(54.6% 0.245 262.881);
+  --color-blue-500: oklch(62.3% 0.214 259.815);
+  --color-blue-600: oklch(70.7% 0.165 254.624);
+  --color-blue-700: oklch(80.9% 0.105 251.813);
+  --color-blue-800: oklch(88.2% 0.059 254.128);
+  --color-blue-900: oklch(93.2% 0.032 255.585);
+  --color-blue-950: oklch(97% 0.014 254.604);
+  --color-indigo-50: oklch(25.7% 0.09 281.288);
+  --color-indigo-100: oklch(35.9% 0.144 278.697);
+  --color-indigo-200: oklch(39.8% 0.195 277.366);
+  --color-indigo-300: oklch(45.7% 0.24 277.023);
+  --color-indigo-400: oklch(51.1% 0.262 276.966);
+  --color-indigo-500: oklch(58.5% 0.233 277.117);
+  --color-indigo-600: oklch(67.3% 0.182 276.935);
+  --color-indigo-700: oklch(78.5% 0.115 274.713);
+  --color-indigo-800: oklch(87% 0.065 274.039);
+  --color-indigo-900: oklch(93% 0.034 272.788);
+  --color-indigo-950: oklch(96.2% 0.018 272.314);
+  --color-violet-50: oklch(28.3% 0.141 291.089);
+  --color-violet-100: oklch(38% 0.189 293.745);
+  --color-violet-200: oklch(43.2% 0.232 292.759);
+  --color-violet-300: oklch(49.1% 0.27 292.581);
+  --color-violet-400: oklch(54.1% 0.281 293.009);
+  --color-violet-500: oklch(60.6% 0.25 292.717);
+  --color-violet-600: oklch(70.2% 0.183 293.541);
+  --color-violet-700: oklch(81.1% 0.111 293.571);
+  --color-violet-800: oklch(89.4% 0.057 293.283);
+  --color-violet-900: oklch(94.3% 0.029 294.588);
+  --color-violet-950: oklch(96.9% 0.016 293.756);
+  --color-purple-50: oklch(29.1% 0.149 302.717);
+  --color-purple-100: oklch(38.1% 0.176 304.987);
+  --color-purple-200: oklch(43.8% 0.218 303.724);
+  --color-purple-300: oklch(49.6% 0.265 301.924);
+  --color-purple-400: oklch(55.8% 0.288 302.321);
+  --color-purple-500: oklch(62.7% 0.265 303.9);
+  --color-purple-600: oklch(71.4% 0.203 305.504);
+  --color-purple-700: oklch(82.7% 0.119 306.383);
+  --color-purple-800: oklch(90.2% 0.063 306.703);
+  --color-purple-900: oklch(94.6% 0.033 307.174);
+  --color-purple-950: oklch(97.7% 0.014 308.299);
+  --color-fuchsia-50: oklch(29.3% 0.136 325.661);
+  --color-fuchsia-100: oklch(40.1% 0.17 325.612);
+  --color-fuchsia-200: oklch(45.2% 0.211 324.591);
+  --color-fuchsia-300: oklch(51.8% 0.253 323.949);
+  --color-fuchsia-400: oklch(59.1% 0.293 322.896);
+  --color-fuchsia-500: oklch(66.7% 0.295 322.15);
+  --color-fuchsia-600: oklch(74% 0.238 322.16);
+  --color-fuchsia-700: oklch(83.3% 0.145 321.434);
+  --color-fuchsia-800: oklch(90.3% 0.076 319.62);
+  --color-fuchsia-900: oklch(95.2% 0.037 318.852);
+  --color-fuchsia-950: oklch(97.7% 0.017 320.058);
+  --color-pink-50: oklch(28.4% 0.109 3.907);
+  --color-pink-100: oklch(40.8% 0.153 2.432);
+  --color-pink-200: oklch(45.9% 0.187 3.815);
+  --color-pink-300: oklch(52.5% 0.223 3.958);
+  --color-pink-400: oklch(59.2% 0.249 0.584);
+  --color-pink-500: oklch(65.6% 0.241 354.308);
+  --color-pink-600: oklch(71.8% 0.202 349.761);
+  --color-pink-700: oklch(82.3% 0.12 346.018);
+  --color-pink-800: oklch(89.9% 0.061 343.231);
+  --color-pink-900: oklch(94.8% 0.028 342.258);
+  --color-pink-950: oklch(97.1% 0.014 343.198);
+  --color-rose-50: oklch(27.1% 0.105 12.094);
+  --color-rose-100: oklch(41% 0.159 10.272);
+  --color-rose-200: oklch(45.5% 0.188 13.697);
+  --color-rose-300: oklch(51.4% 0.222 16.935);
+  --color-rose-400: oklch(58.6% 0.253 17.585);
+  --color-rose-500: oklch(64.5% 0.246 16.439);
+  --color-rose-600: oklch(71.2% 0.194 13.428);
+  --color-rose-700: oklch(81% 0.117 11.638);
+  --color-rose-800: oklch(89.2% 0.058 10.001);
+  --color-rose-900: oklch(94.1% 0.03 12.58);
+  --color-rose-950: oklch(96.9% 0.015 12.422);
+  --color-brand-emerald-200: #065f46;
+  --color-brand-emerald-400: #059669;
+  --color-brand-emerald-950: #ecfdf5;
+  --color-brand-violet-400: #8b5cf6;
+  --color-brand-pink-400: #ec4899;
+  --color-brand-cyan-400: #06b6d4;
+  --color-brand-red-400: #dc2626;
+  --color-brand-yellow-50: #291404;
+  --color-brand-yellow-400: #ca8a04;
+  --color-brand-yellow-700: #fde047;
+  --color-brand-yellow-900: #fef9c3;
+  --color-brand-yellow-950: #fefce8;
+  --color-inherit: inherit;
+  --color-current: currentcolor;
+  --color-transparent: transparent;
+  --color-black: #000;
+  --color-white: #fff;
+}
 .markdown-body {
   color-scheme: dark;
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
-  color: #f0f6fc;
+  color: var(--color-white);
   background-color: transparent;
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
   font-size: 16px;
@@ -36,7 +558,7 @@
 }
 .markdown-body a {
   background-color: transparent;
-  color: #4493f8;
+  color: var(--color-blue-400);
   text-decoration: none;
 }
 .markdown-body abbr[title] {
@@ -57,8 +579,8 @@
   font-size: 2em;
 }
 .markdown-body mark {
-  background-color: #bb800926;
-  color: #f0f6fc;
+  background-color: var(--color-yellow-800);
+  color: var(--color-white);
 }
 .markdown-body small {
   font-size: 90%;
@@ -91,11 +613,11 @@
   box-sizing: content-box;
   overflow: hidden;
   background: transparent;
-  border-bottom: 1px solid #3d444db3;
+  border-bottom: 1px solid var(--color-zinc-700);
   height: .25em;
   padding: 0;
   margin: 1.5rem 0;
-  background-color: #3d444d;
+  background-color: var(--color-zinc-700);
   border: 0;
 }
 .markdown-body input {
@@ -134,7 +656,7 @@
   text-decoration: underline;
 }
 .markdown-body ::placeholder {
-  color: #9198a1;
+  color: var(--color-zinc-400);
   opacity: 1;
 }
 .markdown-body hr::before {
@@ -162,7 +684,7 @@
   cursor: pointer;
 }
 .markdown-body a:focus, .markdown-body [role=button]:focus, .markdown-body input[type=radio]:focus, .markdown-body input[type=checkbox]:focus {
-  outline: 2px solid #1f6feb;
+  outline: 2px solid var(--color-blue-500);
   outline-offset: -2px;
   box-shadow: none;
 }
@@ -170,7 +692,7 @@
   outline: solid 1px transparent;
 }
 .markdown-body a:focus-visible, .markdown-body [role=button]:focus-visible, .markdown-body input[type=radio]:focus-visible, .markdown-body input[type=checkbox]:focus-visible {
-  outline: 2px solid #1f6feb;
+  outline: 2px solid var(--color-blue-500);
   outline-offset: -2px;
   box-shadow: none;
 }
@@ -182,13 +704,13 @@
   padding: 0.25rem;
   font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
   line-height: 10px;
-  color: #f0f6fc;
+  color: var(--color-white);
   vertical-align: middle;
-  background-color: #151b23;
-  border: solid 1px #3d444db3;
-  border-bottom-color: #3d444db3;
+  background-color: var(--color-zinc-900);
+  border: solid 1px var(--color-zinc-700);
+  border-bottom-color: var(--color-zinc-700);
   border-radius: 6px;
-  box-shadow: inset 0 -1px 0 #3d444db3;
+  box-shadow: inset 0 -1px 0 var(--color-zinc-700);
 }
 .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 {
   margin-top: 1.5rem;
@@ -216,7 +738,7 @@
 .markdown-body h6 {
   font-weight: 600;
   font-size: .85em;
-  color: #9198a1;
+  color: var(--color-zinc-400);
 }
 .markdown-body p {
   margin-top: 0;
@@ -225,8 +747,8 @@
 .markdown-body blockquote {
   margin: 0;
   padding: 0 1em;
-  color: #9198a1;
-  border-left: .25em solid #3d444d;
+  color: var(--color-zinc-400);
+  border-left: .25em solid var(--color-zinc-700);
 }
 .markdown-body ul, .markdown-body ol {
   margin-top: 0;
@@ -286,7 +808,7 @@
   text-decoration: none;
 }
 .markdown-body .absent {
-  color: #f85149;
+  color: var(--color-brand-red-400);
 }
 .markdown-body .anchor {
   float: left;
@@ -308,7 +830,7 @@
   margin-bottom: 0;
 }
 .markdown-body h1 .octicon-link, .markdown-body h2 .octicon-link, .markdown-body h3 .octicon-link, .markdown-body h4 .octicon-link, .markdown-body h5 .octicon-link, .markdown-body h6 .octicon-link {
-  color: #f0f6fc;
+  color: var(--color-white);
   vertical-align: middle;
   visibility: hidden;
 }
@@ -383,17 +905,17 @@
 }
 .markdown-body table th, .markdown-body table td {
   padding: 6px 13px;
-  border: 1px solid #3d444d;
+  border: 1px solid var(--color-zinc-700);
 }
 .markdown-body table td>:last-child {
   margin-bottom: 0;
 }
 .markdown-body table tr {
-  background-color: #0d1117;
-  border-top: 1px solid #3d444db3;
+  background-color: var(--color-zinc-900);
+  border-top: 1px solid var(--color-zinc-700);
 }
 .markdown-body table tr:nth-child(2n) {
-  background-color: #151b23;
+  background-color: var(--color-zinc-900);
 }
 .markdown-body table img {
   background-color: transparent;
@@ -420,7 +942,7 @@
   padding: 7px;
   margin: 13px 0 0;
   overflow: hidden;
-  border: 1px solid #3d444d;
+  border: 1px solid var(--color-zinc-700);
 }
 .markdown-body span.frame span img {
   display: block;
@@ -430,7 +952,7 @@
   display: block;
   padding: 5px 0 0;
   clear: both;
-  color: #f0f6fc;
+  color: var(--color-white);
 }
 .markdown-body span.align-center {
   display: block;
@@ -488,7 +1010,7 @@
   margin: 0;
   font-size: 85%;
   white-space: break-spaces;
-  background-color: #656c7633;
+  background-color: var(--color-zinc-800);
   border-radius: 6px;
 }
 .markdown-body code br, .markdown-body tt br {
@@ -523,8 +1045,8 @@
   overflow: auto;
   font-size: 85%;
   line-height: 1.45;
-  color: #f0f6fc;
-  background-color: #151b23;
+  color: var(--color-white);
+  background-color: var(--color-zinc-900);
   border-radius: 6px;
 }
 .markdown-body pre code, .markdown-body pre tt {
@@ -549,7 +1071,7 @@
 .markdown-body .csv-data .blob-num {
   padding: 10px 0.5rem 9px;
   text-align: right;
-  background: #0d1117;
+  background: var(--color-zinc-900);
   border: 0;
 }
 .markdown-body .csv-data tr {
@@ -557,7 +1079,7 @@
 }
 .markdown-body .csv-data th {
   font-weight: 600;
-  background: #151b23;
+  background: var(--color-zinc-900);
   border-top: 0;
 }
 .markdown-body [data-footnote-ref]::before {
@@ -568,8 +1090,8 @@
 }
 .markdown-body .footnotes {
   font-size: 12px;
-  color: #9198a1;
-  border-top: 1px solid #3d444d;
+  color: var(--color-zinc-400);
+  border-top: 1px solid var(--color-zinc-700);
 }
 .markdown-body .footnotes ol {
   padding-left: 1rem;
@@ -590,11 +1112,11 @@
   left: calc(1.5rem*-1);
   pointer-events: none;
   content: "";
-  border: 2px solid #1f6feb;
+  border: 2px solid var(--color-blue-500);
   border-radius: 6px;
 }
 .markdown-body .footnotes li:target {
-  color: #f0f6fc;
+  color: var(--color-white);
 }
 .markdown-body .footnotes .data-footnote-backref g-emoji {
   font-family: monospace;
@@ -603,88 +1125,88 @@
   padding-right: var(--dialog-scrollgutter) !important;
 }
 .markdown-body .pl-c {
-  color: #9198a1;
+  color: var(--color-zinc-400);
 }
 .markdown-body .pl-c1, .markdown-body .pl-s .pl-v {
-  color: #79c0ff;
+  color: var(--color-blue-300);
 }
 .markdown-body .pl-e, .markdown-body .pl-en {
-  color: #d2a8ff;
+  color: var(--color-brand-violet-400);
 }
 .markdown-body .pl-smi, .markdown-body .pl-s .pl-s1 {
-  color: #f0f6fc;
+  color: var(--color-white);
 }
 .markdown-body .pl-ent {
-  color: #7ee787;
+  color: var(--color-brand-emerald-400);
 }
 .markdown-body .pl-k {
-  color: #ff7b72;
+  color: var(--color-brand-red-400);
 }
 .markdown-body .pl-s, .markdown-body .pl-pds, .markdown-body .pl-s .pl-pse .pl-s1, .markdown-body .pl-sr, .markdown-body .pl-sr .pl-cce, .markdown-body .pl-sr .pl-sre, .markdown-body .pl-sr .pl-sra {
-  color: #a5d6ff;
+  color: var(--color-blue-300);
 }
 .markdown-body .pl-v, .markdown-body .pl-smw {
-  color: #ffa657;
+  color: var(--color-orange-300);
 }
 .markdown-body .pl-bu {
-  color: #f85149;
+  color: var(--color-brand-red-400);
 }
 .markdown-body .pl-ii {
-  color: #f0f6fc;
-  background-color: #8e1519;
+  color: var(--color-white);
+  background-color: var(--color-red-900);
 }
 .markdown-body .pl-c2 {
-  color: #f0f6fc;
-  background-color: #b62324;
+  color: var(--color-white);
+  background-color: var(--color-red-900);
 }
 .markdown-body .pl-sr .pl-cce {
   font-weight: bold;
-  color: #7ee787;
+  color: var(--color-brand-emerald-400);
 }
 .markdown-body .pl-ml {
-  color: #f2cc60;
+  color: var(--color-yellow-200);
 }
 .markdown-body .pl-mh, .markdown-body .pl-mh .pl-en, .markdown-body .pl-ms {
   font-weight: bold;
-  color: #1f6feb;
+  color: var(--color-blue-400);
 }
 .markdown-body .pl-mi {
   font-style: italic;
-  color: #f0f6fc;
+  color: var(--color-white);
 }
 .markdown-body .pl-mb {
   font-weight: bold;
-  color: #f0f6fc;
+  color: var(--color-white);
 }
 .markdown-body .pl-md {
-  color: #ffdcd7;
+  color: var(--color-red-200);
   background-color: #67060c;
 }
 .markdown-body .pl-mi1 {
-  color: #aff5b4;
-  background-color: #033a16;
+  color: var(--color-green-200);
+  background-color: var(--color-green-950);
 }
 .markdown-body .pl-mc {
-  color: #ffdfb6;
-  background-color: #5a1e02;
+  color: var(--color-orange-200);
+  background-color: var(--color-orange-950);
 }
 .markdown-body .pl-mi2 {
-  color: #f0f6fc;
-  background-color: #1158c7;
+  color: var(--color-white);
+  background-color: var(--color-blue-800);
 }
 .markdown-body .pl-mdr {
   font-weight: bold;
-  color: #d2a8ff;
+  color: var(--color-brand-violet-400);
 }
 .markdown-body .pl-ba {
-  color: #9198a1;
+  color: var(--color-zinc-400);
 }
 .markdown-body .pl-sg {
-  color: #3d444d;
+  color: var(--color-zinc-700);
 }
 .markdown-body .pl-corl {
   text-decoration: underline;
-  color: #a5d6ff;
+  color: var(--color-blue-300);
 }
 .markdown-body [role=button]:focus:not(:focus-visible), .markdown-body [role=tabpanel][tabindex="0"]:focus:not(:focus-visible), .markdown-body button:focus:not(:focus-visible), .markdown-body summary:focus:not(:focus-visible), .markdown-body a:focus:not(:focus-visible) {
   outline: none;
@@ -746,7 +1268,7 @@
   padding: 0.5rem 1rem;
   margin-bottom: 1rem;
   color: inherit;
-  border-left: .25em solid #3d444d;
+  border-left: .25em solid var(--color-zinc-700);
 }
 .markdown-body .markdown-alert>:first-child {
   margin-top: 0;
@@ -761,34 +1283,34 @@
   line-height: 1;
 }
 .markdown-body .markdown-alert.markdown-alert-note {
-  border-left-color: #1f6feb;
+  border-left-color: var(--color-blue-500);
 }
 .markdown-body .markdown-alert.markdown-alert-note .markdown-alert-title {
-  color: #4493f8;
+  color: var(--color-blue-400);
 }
 .markdown-body .markdown-alert.markdown-alert-important {
-  border-left-color: #8957e5;
+  border-left-color: var(--color-violet-500);
 }
 .markdown-body .markdown-alert.markdown-alert-important .markdown-alert-title {
-  color: #ab7df8;
+  color: var(--color-brand-violet-400);
 }
 .markdown-body .markdown-alert.markdown-alert-warning {
-  border-left-color: #9e6a03;
+  border-left-color: var(--color-brand-yellow-700);
 }
 .markdown-body .markdown-alert.markdown-alert-warning .markdown-alert-title {
-  color: #d29922;
+  color: var(--color-brand-yellow-700);
 }
 .markdown-body .markdown-alert.markdown-alert-tip {
-  border-left-color: #238636;
+  border-left-color: var(--color-green-600);
 }
 .markdown-body .markdown-alert.markdown-alert-tip .markdown-alert-title {
-  color: #3fb950;
+  color: var(--color-green-600);
 }
 .markdown-body .markdown-alert.markdown-alert-caution {
-  border-left-color: #da3633;
+  border-left-color: var(--color-red-600);
 }
 .markdown-body .markdown-alert.markdown-alert-caution .markdown-alert-title {
-  color: #f85149;
+  color: var(--color-brand-red-400);
 }
 .markdown-body>*:first-child>.heading-element:first-child {
   margin-top: 0 !important;
@@ -802,20 +1324,25 @@
     --font-sans: "DM Sans";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
-    --color-red-400: oklch(70.4% 0.191 22.216);
+    --color-red-200: oklch(88.5% 0.062 18.334);
+    --color-red-600: oklch(57.7% 0.245 27.325);
+    --color-red-900: oklch(39.6% 0.141 25.723);
     --color-red-950: oklch(25.8% 0.092 26.042);
-    --color-yellow-50: oklch(98.7% 0.026 102.212);
-    --color-yellow-900: oklch(42.1% 0.095 57.708);
+    --color-orange-200: oklch(90.1% 0.076 70.697);
+    --color-orange-300: oklch(83.7% 0.128 66.29);
+    --color-orange-950: oklch(26.6% 0.079 36.259);
+    --color-yellow-200: oklch(94.5% 0.129 101.54);
+    --color-yellow-800: oklch(47.6% 0.114 61.907);
     --color-green-200: oklch(92.5% 0.084 155.995);
-    --color-green-400: oklch(79.2% 0.209 151.711);
     --color-green-600: oklch(62.7% 0.194 149.214);
     --color-green-950: oklch(26.6% 0.065 152.934);
-    --color-emerald-300: oklch(84.5% 0.143 164.978);
-    --color-emerald-400: oklch(76.5% 0.177 163.223);
-    --color-violet-300: oklch(81.1% 0.111 293.571);
-    --color-violet-400: oklch(70.2% 0.183 293.541);
-    --color-pink-300: oklch(82.3% 0.12 346.018);
-    --color-pink-400: oklch(71.8% 0.202 349.761);
+    --color-blue-300: oklch(80.9% 0.105 251.813);
+    --color-blue-400: oklch(70.7% 0.165 254.624);
+    --color-blue-500: oklch(62.3% 0.214 259.815);
+    --color-blue-800: oklch(42.4% 0.199 265.638);
+    --color-violet-200: oklch(89.4% 0.057 293.283);
+    --color-violet-500: oklch(60.6% 0.25 292.717);
+    --color-pink-200: oklch(89.9% 0.061 343.231);
     --color-slate-50: oklch(98.4% 0.003 247.858);
     --color-slate-100: oklch(96.8% 0.007 247.896);
     --color-slate-200: oklch(92.9% 0.013 255.508);
@@ -829,7 +1356,10 @@
     --color-slate-950: oklch(12.9% 0.042 264.695);
     --color-gray-700: oklch(37.3% 0.034 259.733);
     --color-gray-800: oklch(27.8% 0.033 256.848);
-    --color-black: #000;
+    --color-zinc-400: oklch(70.5% 0.015 286.067);
+    --color-zinc-700: oklch(37% 0.013 285.805);
+    --color-zinc-800: oklch(27.4% 0.006 286.033);
+    --color-zinc-900: oklch(21% 0.006 285.885);
     --color-white: #fff;
     --spacing: 0.25rem;
     --container-xs: 20rem;
@@ -861,6 +1391,18 @@
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
+    --color-brand-emerald-200: var(--color-brand-emerald-200);
+    --color-brand-emerald-400: var(--color-brand-emerald-400);
+    --color-brand-emerald-950: var(--color-brand-emerald-950);
+    --color-brand-violet-400: var(--color-brand-violet-400);
+    --color-brand-pink-400: var(--color-brand-pink-400);
+    --color-brand-cyan-400: var(--color-brand-cyan-400);
+    --color-brand-red-400: var(--color-brand-red-400);
+    --color-brand-yellow-50: var(--color-brand-yellow-50);
+    --color-brand-yellow-400: var(--color-brand-yellow-400);
+    --color-brand-yellow-700: var(--color-brand-yellow-700);
+    --color-brand-yellow-900: var(--color-brand-yellow-900);
+    --color-brand-yellow-950: var(--color-brand-yellow-950);
   }
 }
 @layer base {
@@ -1100,9 +1642,15 @@
     width: calc(var(--spacing) * 12);
     height: calc(var(--spacing) * 12);
   }
+  .h-8 {
+    height: calc(var(--spacing) * 8);
+  }
   .h-10 {
     height: calc(var(--spacing) * 10);
   }
+  .w-8 {
+    width: calc(var(--spacing) * 8);
+  }
   .w-\[120px\] {
     width: 120px;
   }
@@ -1125,19 +1673,43 @@
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .cursor-pointer {
+    cursor: pointer;
+  }
   .resize {
     resize: both;
   }
+  .flex-row-reverse {
+    flex-direction: row-reverse;
+  }
   .place-content-center {
     place-content: center;
   }
+  .items-center {
+    align-items: center;
+  }
+  .items-start {
+    align-items: flex-start;
+  }
+  .justify-between {
+    justify-content: space-between;
+  }
+  .justify-center {
+    justify-content: center;
+  }
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
+  .rounded-md {
+    border-radius: var(--radius-md);
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .border-slate-700 {
+    border-color: var(--color-slate-700);
+  }
   .border-b-slate-50 {
     border-bottom-color: var(--color-slate-50);
   }
@@ -1159,6 +1731,10 @@
   .text-center {
     text-align: center;
   }
+  .text-lg {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+  }
   .text-sm {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
@@ -1173,21 +1749,24 @@
   .whitespace-normal {
     white-space: normal;
   }
-  .text-emerald-400 {
-    color: var(--color-emerald-400);
+  .text-brand-emerald-400 {
+    color: var(--color-brand-emerald-400);
   }
-  .text-pink-400 {
-    color: var(--color-pink-400);
+  .text-brand-pink-400 {
+    color: var(--color-brand-pink-400);
+  }
+  .text-brand-violet-400 {
+    color: var(--color-brand-violet-400);
   }
   .text-slate-50 {
     color: var(--color-slate-50);
   }
+  .text-slate-300 {
+    color: var(--color-slate-300);
+  }
   .text-slate-500 {
     color: var(--color-slate-500);
   }
-  .text-violet-400 {
-    color: var(--color-violet-400);
-  }
   .italic {
     font-style: italic;
   }
@@ -1203,6 +1782,9 @@
   .opacity-40 {
     opacity: 40%;
   }
+  .opacity-50 {
+    opacity: 50%;
+  }
   .shadow {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1236,6 +1818,13 @@
       }
     }
   }
+  .hover\:border-slate-500 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-slate-500);
+      }
+    }
+  }
   .hover\:bg-slate-700 {
     &:hover {
       @media (hover: hover) {
@@ -1250,24 +1839,24 @@
       }
     }
   }
-  .hover\:text-emerald-300 {
+  .hover\:text-brand-emerald-200 {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-emerald-300);
+        color: var(--color-brand-emerald-200);
       }
     }
   }
-  .hover\:text-pink-300 {
+  .hover\:text-pink-200 {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-pink-300);
+        color: var(--color-pink-200);
       }
     }
   }
-  .hover\:text-violet-300 {
+  .hover\:text-violet-200 {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-violet-300);
+        color: var(--color-violet-200);
       }
     }
   }
@@ -1278,6 +1867,21 @@
       }
     }
   }
+  .light\:block {
+    .light & {
+      display: block;
+    }
+  }
+  .light\:hidden {
+    .light & {
+      display: none;
+    }
+  }
+  .light\:opacity-60 {
+    .light & {
+      opacity: 60%;
+    }
+  }
 }
 [x-cloak] {
   display: none !important;
@@ -1340,7 +1944,7 @@
     height: 100vh;
     width: calc(var(--spacing) * 72);
     scrollbar-width: thin;
-    scrollbar-color: #4b5563 #1f2937;
+    scrollbar-color: var(--color-slate-900) var(--color-slate-700);
   }
   .layout__main-center {
     height: 100vh;
@@ -1351,7 +1955,7 @@
     padding: calc(var(--spacing) * 10);
     color: var(--color-slate-300);
     scrollbar-width: thin;
-    scrollbar-color: #4b5563 #1f2937;
+    scrollbar-color: var(--color-slate-900) var(--color-slate-700);
   }
   .layout__main-center-content {
     @media (width >= 80rem) {
@@ -1528,7 +2132,7 @@
     height: calc(var(--spacing) * 1.5);
     width: calc(var(--spacing) * 1.5);
     border-radius: calc(infinity * 1px);
-    background-color: var(--color-green-600);
+    background-color: var(--color-brand-emerald-400);
   }
   .main__badge-inner-text {
     font-size: var(--text-xs);
@@ -1536,9 +2140,12 @@
     color: var(--color-slate-100);
   }
   .main__badge--success {
-    border-color: var(--color-green-400);
-    background-color: var(--color-green-950);
-    color: var(--color-green-200);
+    border-color: var(--color-brand-emerald-400);
+    background-color: var(--color-brand-emerald-950);
+    color: var(--color-brand-emerald-200);
+  }
+  .main__badge--success .main__badge-text {
+    color: var(--color-brand-emerald-200);
   }
   .main__badge--success::before {
     content: "✓";
@@ -1548,9 +2155,9 @@
     align-items: center;
     justify-content: center;
     border-radius: calc(infinity * 1px);
-    background-color: var(--color-green-400);
+    background-color: var(--color-brand-emerald-400);
     font-size: 8px;
-    color: var(--color-green-950);
+    color: var(--color-brand-emerald-950);
   }
   .main__badge--disabled::before {
     content: "-";
@@ -1560,7 +2167,7 @@
     align-items: center;
     justify-content: center;
     border-radius: calc(infinity * 1px);
-    background-color: var(--color-red-400);
+    background-color: var(--color-brand-red-400);
     font-size: 10px;
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
@@ -1584,10 +2191,7 @@
     }
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(96.8% 0.007 247.896) 10%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-slate-100) 10%, transparent);
-        }
+        background-color: var(--color-slate-800);
       }
     }
     &>b {
@@ -1613,12 +2217,16 @@
     border-radius: var(--radius-lg);
     border-style: var(--tw-border-style);
     border-width: 1px;
-    border-color: var(--color-yellow-900);
-    background-color: #291404;
+    border-color: var(--color-brand-yellow-700);
+    background-color: var(--color-brand-yellow-950);
     padding: calc(var(--spacing) * 3);
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
-    color: var(--color-yellow-50);
+    color: var(--color-brand-yellow-50);
+  }
+  .metadata__warning code {
+    border-color: var(--color-brand-yellow-700);
+    background-color: var(--color-brand-yellow-900);
   }
   .main__run-with-container {
     margin-top: calc(var(--spacing) * 4);
@@ -1689,7 +2297,7 @@
   .main__run-with-content-text {
     border-radius: var(--radius-md);
     border-color: var(--color-slate-700);
-    background-color: var(--color-black);
+    background-color: var(--color-slate-950);
     padding-inline: 0.4em;
     padding-block: 0.2em;
     font-family: var(--font-mono);
@@ -1811,7 +2419,7 @@
     width: 100%;
     height: 100%;
     flex-direction: column;
-    background-color: #111420;
+    background-color: var(--color-slate-900);
     padding-top: calc(var(--spacing) * 4);
     text-wrap: nowrap;
     color: var(--color-slate-400);
@@ -1852,6 +2460,9 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
     --tw-outline-style: none;
     outline-style: none;
+    &::placeholder {
+      color: var(--color-slate-400);
+    }
     &:focus {
       border-color: var(--color-slate-400);
     }
@@ -2089,9 +2700,9 @@
     color: var(--color-slate-400);
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 30%, transparent);
+        background-color: color-mix(in srgb, oklch(44.6% 0.043 257.281) 20%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-slate-400) 30%, transparent);
+          background-color: color-mix(in oklab, var(--color-slate-600) 20%, transparent);
         }
       }
     }
@@ -2167,6 +2778,15 @@
   font-size: 0.8em;
   color: var(--color-slate-200);
 }
+.markdown-body pre {
+  border-radius: var(--radius-md);
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  border-color: var(--color-slate-700);
+  background-color: var(--color-slate-900);
+  font-family: var(--font-mono);
+  color: var(--color-slate-200);
+}
 .main__container .markdown-body {
   max-width: var(--container-4xl);
 }