diff --git a/.vitepress/theme/styles/tokens.scss b/.vitepress/theme/styles/tokens.scss index a513641..7b6c655 100644 --- a/.vitepress/theme/styles/tokens.scss +++ b/.vitepress/theme/styles/tokens.scss @@ -195,73 +195,75 @@ // Colors scheme html { - --md-sys-color-primary: var(--md-ref-palette-primary40); - --md-sys-color-primary-container: var(--md-ref-palette-primary90); - --md-sys-color-on-primary: var(--md-ref-palette-primary100); - --md-sys-color-on-primary-container: var(--md-ref-palette-primary10); - --md-sys-color-inverse-primary: var(--md-ref-palette-primary80); - --md-sys-color-secondary: var(--md-ref-palette-secondary40); - --md-sys-color-secondary-container: var(--md-ref-palette-secondary90); - --md-sys-color-on-secondary: var(--md-ref-palette-secondary100); - --md-sys-color-on-secondary-container: var(--md-ref-palette-secondary10); - --md-sys-color-tertiary: var(--md-ref-palette-tertiary40); - --md-sys-color-tertiary-container: var(--md-ref-palette-tertiary90); - --md-sys-color-on-tertiary: var(--md-ref-palette-tertiary100); - --md-sys-color-on-tertiary-container: var(--md-ref-palette-tertiary10); - --md-sys-color-surface: var(--md-ref-palette-neutral98); - --md-sys-color-surface-dim: var(--md-ref-palette-neutral87); - --md-sys-color-surface-bright: var(--md-ref-palette-neutral98); - --md-sys-color-surface-container-lowest: var(--md-ref-palette-neutral100); - --md-sys-color-surface-container-low: var(--md-ref-palette-neutral96); - --md-sys-color-surface-container: var(--md-ref-palette-neutral94); - --md-sys-color-surface-container-high: var(--md-ref-palette-neutral92); - --md-sys-color-surface-container-highest: var(--md-ref-palette-neutral90); - --md-sys-color-surface-variant: var(--md-ref-palette-neutral-variant90); - --md-sys-color-on-surface: var(--md-ref-palette-neutral10); - --md-sys-color-on-surface-variant: var(--md-ref-palette-neutral-variant30); - --md-sys-color-inverse-surface: var(--md-ref-palette-neutral20); - --md-sys-color-inverse-on-surface: var(--md-ref-palette-neutral95); - --md-sys-color-background: var(--md-ref-palette-neutral98); - --md-sys-color-on-background: var(--md-ref-palette-neutral10); - --md-sys-color-error: var(--md-ref-palette-error40); - --md-sys-color-error-container: var(--md-ref-palette-error90); - --md-sys-color-on-error: var(--md-ref-palette-error100); - --md-sys-color-on-error-container: var(--md-ref-palette-error10); - --md-sys-color-outline: var(--md-ref-palette-neutral-variant50); - --md-sys-color-outline-variant: var(--md-ref-palette-neutral-variant80); - --md-sys-color-shadow: var(--md-ref-palette-neutral0); - --md-sys-color-surface-tint-color: var(--md-sys-color-primary); - --md-sys-color-scrim: var(--md-ref-palette-neutral0); + &.light { + --md-sys-color-primary: var(--md-ref-palette-primary40); + --md-sys-color-primary-container: var(--md-ref-palette-primary90); + --md-sys-color-on-primary: var(--md-ref-palette-primary100); + --md-sys-color-on-primary-container: var(--md-ref-palette-primary10); + --md-sys-color-inverse-primary: var(--md-ref-palette-primary80); + --md-sys-color-secondary: var(--md-ref-palette-secondary40); + --md-sys-color-secondary-container: var(--md-ref-palette-secondary90); + --md-sys-color-on-secondary: var(--md-ref-palette-secondary100); + --md-sys-color-on-secondary-container: var(--md-ref-palette-secondary10); + --md-sys-color-tertiary: var(--md-ref-palette-tertiary40); + --md-sys-color-tertiary-container: var(--md-ref-palette-tertiary90); + --md-sys-color-on-tertiary: var(--md-ref-palette-tertiary100); + --md-sys-color-on-tertiary-container: var(--md-ref-palette-tertiary10); + --md-sys-color-surface: var(--md-ref-palette-neutral98); + --md-sys-color-surface-dim: var(--md-ref-palette-neutral87); + --md-sys-color-surface-bright: var(--md-ref-palette-neutral98); + --md-sys-color-surface-container-lowest: var(--md-ref-palette-neutral100); + --md-sys-color-surface-container-low: var(--md-ref-palette-neutral96); + --md-sys-color-surface-container: var(--md-ref-palette-neutral94); + --md-sys-color-surface-container-high: var(--md-ref-palette-neutral92); + --md-sys-color-surface-container-highest: var(--md-ref-palette-neutral90); + --md-sys-color-surface-variant: var(--md-ref-palette-neutral-variant90); + --md-sys-color-on-surface: var(--md-ref-palette-neutral10); + --md-sys-color-on-surface-variant: var(--md-ref-palette-neutral-variant30); + --md-sys-color-inverse-surface: var(--md-ref-palette-neutral20); + --md-sys-color-inverse-on-surface: var(--md-ref-palette-neutral95); + --md-sys-color-background: var(--md-ref-palette-neutral98); + --md-sys-color-on-background: var(--md-ref-palette-neutral10); + --md-sys-color-error: var(--md-ref-palette-error40); + --md-sys-color-error-container: var(--md-ref-palette-error90); + --md-sys-color-on-error: var(--md-ref-palette-error100); + --md-sys-color-on-error-container: var(--md-ref-palette-error10); + --md-sys-color-outline: var(--md-ref-palette-neutral-variant50); + --md-sys-color-outline-variant: var(--md-ref-palette-neutral-variant80); + --md-sys-color-shadow: var(--md-ref-palette-neutral0); + --md-sys-color-surface-tint-color: var(--md-sys-color-primary); + --md-sys-color-scrim: var(--md-ref-palette-neutral0); - --md-sys-color-red: var(--md-ref-palette-red40); - --md-sys-color-red-container: var(--md-ref-palette-red90); - --md-sys-color-on-red: var(--md-ref-palette-red95); - --md-sys-color-on-red-container: var(--md-ref-palette-red10); - --md-sys-color-inverse-red: var(--md-ref-palette-red80); + --md-sys-color-red: var(--md-ref-palette-red40); + --md-sys-color-red-container: var(--md-ref-palette-red90); + --md-sys-color-on-red: var(--md-ref-palette-red95); + --md-sys-color-on-red-container: var(--md-ref-palette-red10); + --md-sys-color-inverse-red: var(--md-ref-palette-red80); - --md-sys-color-blue: var(--md-ref-palette-blue40); - --md-sys-color-blue-container: var(--md-ref-palette-blue90); - --md-sys-color-on-blue: var(--md-ref-palette-blue95); - --md-sys-color-on-blue-container: var(--md-ref-palette-blue10); - --md-sys-color-inverse-blue: var(--md-ref-palette-blue80); + --md-sys-color-blue: var(--md-ref-palette-blue40); + --md-sys-color-blue-container: var(--md-ref-palette-blue90); + --md-sys-color-on-blue: var(--md-ref-palette-blue95); + --md-sys-color-on-blue-container: var(--md-ref-palette-blue10); + --md-sys-color-inverse-blue: var(--md-ref-palette-blue80); - --md-sys-color-green: var(--md-ref-palette-green40); - --md-sys-color-green-container: var(--md-ref-palette-green90); - --md-sys-color-on-green: var(--md-ref-palette-green95); - --md-sys-color-on-green-container: var(--md-ref-palette-green10); - --md-sys-color-inverse-green: var(--md-ref-palette-green80); + --md-sys-color-green: var(--md-ref-palette-green40); + --md-sys-color-green-container: var(--md-ref-palette-green90); + --md-sys-color-on-green: var(--md-ref-palette-green95); + --md-sys-color-on-green-container: var(--md-ref-palette-green10); + --md-sys-color-inverse-green: var(--md-ref-palette-green80); - --md-sys-color-yellow: var(--md-ref-palette-yellow40); - --md-sys-color-yellow-container: var(--md-ref-palette-yellow90); - --md-sys-color-on-yellow: var(--md-ref-palette-yellow95); - --md-sys-color-on-yellow-container: var(--md-ref-palette-yellow10); - --md-sys-color-inverse-yellow: var(--md-ref-palette-yellow80); + --md-sys-color-yellow: var(--md-ref-palette-yellow40); + --md-sys-color-yellow-container: var(--md-ref-palette-yellow90); + --md-sys-color-on-yellow: var(--md-ref-palette-yellow95); + --md-sys-color-on-yellow-container: var(--md-ref-palette-yellow10); + --md-sys-color-inverse-yellow: var(--md-ref-palette-yellow80); - --md-sys-color-purple: var(--md-ref-palette-purple40); - --md-sys-color-purple-container: var(--md-ref-palette-purple90); - --md-sys-color-on-purple: var(--md-ref-palette-purple95); - --md-sys-color-on-purple-container: var(--md-ref-palette-purple10); - --md-sys-color-inverse-purple: var(--md-ref-palette-purple80); + --md-sys-color-purple: var(--md-ref-palette-purple40); + --md-sys-color-purple-container: var(--md-ref-palette-purple90); + --md-sys-color-on-purple: var(--md-ref-palette-purple95); + --md-sys-color-on-purple-container: var(--md-ref-palette-purple10); + --md-sys-color-inverse-purple: var(--md-ref-palette-purple80); + } &.dark { --md-sys-color-primary: var(--md-ref-palette-primary80);