diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css index a7aa59809..5fde82aa5 100644 --- a/docs/.vitepress/theme/custom.css +++ b/docs/.vitepress/theme/custom.css @@ -1,72 +1,28 @@ /* Colors */ :root { - --wxt-c-green: #53bc4a; + --wxt-c-green-1: #0b8a00; + --wxt-c-green-2: #096600; + --wxt-c-green-3: #096600; + --wxt-c-green-soft: rgba(#0b8a00 / 0.14); +} + +.dark { --wxt-c-green-1: #67d45e; - --wxt-c-green-2: #4fa048; - --wxt-c-green-3: #447e3f; + --wxt-c-green-2: #329929; + --wxt-c-green-3: #21651b; + --wxt-c-green-soft: rgba(#67d45e / 0.14); } /* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */ :root { - --vp-c-brand: var(--wxt-c-green); --vp-c-brand-1: var(--wxt-c-green-1); --vp-c-brand-2: var(--wxt-c-green-2); --vp-c-brand-3: var(--wxt-c-green-3); - - --vp-button-brand-bg: var(--wxt-c-green); - --vp-button-brand-hover-bg: var(--wxt-c-green-2); - --vp-button-brand-active-bg: var(--wxt-c-green-3); - - --vp-code-link-color: var(--wxt-c-green); - - /* --vp-c-text-1: var(--wxt-c-green-1); */ - - --vp-button-brand-text: var(--vp-c-black); - --vp-button-brand-hover-text: var(--vp-c-black); - --vp-button-brand-active-text: var(--vp-c-black); - - --vp-custom-block-tip-border: var(--wxt-c-green); - --vp-custom-block-tip-text: var(--wxt-c-green); - - /* --vp-code-block-bg: #222422; - --vp-code-copy-code-bg: #313431; - --vp-code-copy-code-hover-bg: #3c403c; */ - - --vp-custom-block-tip-bg: var(--vp-code-block-bg); - --vp-custom-block-info-bg: var(--vp-code-block-bg); - - --vp-code-color: #476582; + --vp-c-brand-soft: var(--wxt-c-green-soft); } -.vp-doc a { - color: var(--wxt-c-green); -} - -.dark { - --vp-c-bg: #131413; - - --vp-c-bg-soft: #1a1b1a; - --vp-c-bg-soft-up: #1f201f; - --vp-c-bg-soft-down: #262926; - --vp-c-bg-soft-mute: #242424; - - --vp-c-bg-alt: #171817; - - --vp-c-default: #313136; - --vp-c-default-1: #3a3a3c; - --vp-c-default-2: #505053; - --vp-c-default-3: #2c2c30; - --vp-c-default-soft: #252529; - - --vp-code-block-bg: #191a19; - --vp-code-copy-code-bg: #212321; - --vp-code-copy-code-hover-bg: #292d29; - - --vp-custom-block-info-bg: #191a19; - - --vp-code-color: #c9def1; -} +/* Customize Individual Components */ .vp-doc .no-vertical-dividers th, .vp-doc .no-vertical-dividers td { diff --git a/docs/assets/init-demo.gif b/docs/assets/init-demo.gif index 03dc2acf4..0389ea738 100644 Binary files a/docs/assets/init-demo.gif and b/docs/assets/init-demo.gif differ diff --git a/docs/tapes/init-demo.tape b/docs/tapes/init-demo.tape index a57936fe4..a24d3d32b 100644 --- a/docs/tapes/init-demo.tape +++ b/docs/tapes/init-demo.tape @@ -20,7 +20,7 @@ Set Framerate 50 # Terminal theme with WXT brand colors (which was taken from the website) # Based on the standard charmbracelet/vhs theme: # https://github.com/charmbracelet/vhs/blob/88e634f4a10bbe305b6aea9a12b4d8dc3dd7f31c/style.go#L7-L28 -Set Theme {"background": "#1a1b1a", "foreground": "#dddddd", "black": "#282a2e", "brightBlack": "#4d4d4d", "red": "#D74E6F", "brightRed": "#FE5F86", "green": "#67d45e", "brightGreen": "#67d45e", "yellow": "#D3E561", "brightYellow": "#EBFF71", "blue": "#8056FF", "brightBlue": "#9B79FF", "magenta": "#ED61D7", "brightMagenta": "#FF7AEA", "cyan": "#04D7D7", "brightCyan": "#00FEFE", "white": "#bfbfbf", "brightWhite": "#e6e6e6", "indigo": "#5B56E0"} +Set Theme {"background": "#161618", "foreground": "#dddddd", "black": "#282a2e", "brightBlack": "#4d4d4d", "red": "#D74E6F", "brightRed": "#FE5F86", "green": "#67d45e", "brightGreen": "#67d45e", "yellow": "#D3E561", "brightYellow": "#EBFF71", "blue": "#8056FF", "brightBlue": "#9B79FF", "magenta": "#ED61D7", "brightMagenta": "#FF7AEA", "cyan": "#04D7D7", "brightCyan": "#00FEFE", "white": "#bfbfbf", "brightWhite": "#e6e6e6", "indigo": "#5B56E0"} Set FontSize 32 # Terminal settings