| 1 | /** |
| 2 | * Customize default theme styling by overriding CSS variables: |
| 3 | * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css |
| 4 | */ |
| 5 | |
| 6 | /** |
| 7 | * Colors |
| 8 | * |
| 9 | * Each colors have exact same color scale system with 3 levels of solid |
| 10 | * colors with different brightness, and 1 soft color. |
| 11 | * |
| 12 | * - `XXX-1`: The most solid color used mainly for colored text. It must |
| 13 | * satisfy the contrast ratio against when used on top of `XXX-soft`. |
| 14 | * |
| 15 | * - `XXX-2`: The color used mainly for hover state of the button. |
| 16 | * |
| 17 | * - `XXX-3`: The color for solid background, such as bg color of the button. |
| 18 | * It must satisfy the contrast ratio with pure white (#ffffff) text on |
| 19 | * top of it. |
| 20 | * |
| 21 | * - `XXX-soft`: The color used for subtle background such as custom container |
| 22 | * or badges. It must satisfy the contrast ratio when putting `XXX-1` colors |
| 23 | * on top of it. |
| 24 | * |
| 25 | * The soft color must be semi transparent alpha channel. This is crucial |
| 26 | * because it allows adding multiple "soft" colors on top of each other |
| 27 | * to create a accent, such as when having inline code block inside |
| 28 | * custom containers. |
| 29 | * |
| 30 | * - `default`: The color used purely for subtle indication without any |
| 31 | * special meanings attched to it such as bg color for menu hover state. |
| 32 | * |
| 33 | * - `brand`: Used for primary brand colors, such as link text, button with |
| 34 | * brand theme, etc. |
| 35 | * |
| 36 | * - `tip`: Used to indicate useful information. The default theme uses the |
| 37 | * brand color for this by default. |
| 38 | * |
| 39 | * - `warning`: Used to indicate warning to the users. Used in custom |
| 40 | * container, badges, etc. |
| 41 | * |
| 42 | * - `danger`: Used to show error, or dangerous message to the users. Used |
| 43 | * in custom container, badges, etc. |
| 44 | * -------------------------------------------------------------------------- */ |
| 45 | |
| 46 | :root { |
| 47 | --vp-c-brand-1: #3ab9d4; |
| 48 | --vp-c-brand-2: #60c4db; |
| 49 | --vp-c-brand-3: #6fcce1; |
| 50 | --vp-c-brand-soft: #3ab9d450; |
| 51 | --vp-c-bg-alt: #f9f9f9; |
| 52 | |
| 53 | --vp-font-family-mono: theme('fontFamily.mono'); |
| 54 | } |
| 55 | |
| 56 | .dark { |
| 57 | --vp-c-brand-1: #6fcce1; |
| 58 | --vp-c-brand-2: #60c4db; |
| 59 | --vp-c-brand-3: #3ab9d4; |
| 60 | --vp-c-brand-soft: #3ab9d450; |
| 61 | --vp-c-bg-alt: #18181b; |
| 62 | --vp-c-gutter: #8883; |
| 63 | } |
| 64 | |
| 65 | :root { |
| 66 | --vp-c-default-1: var(--vp-c-gray-1); |
| 67 | --vp-c-default-2: var(--vp-c-gray-2); |
| 68 | --vp-c-default-3: var(--vp-c-gray-3); |
| 69 | --vp-c-default-soft: var(--vp-c-gray-soft); |
| 70 | |
| 71 | --vp-c-tip-1: var(--vp-c-brand-1); |
| 72 | --vp-c-tip-2: var(--vp-c-brand-2); |
| 73 | --vp-c-tip-3: var(--vp-c-brand-3); |
| 74 | --vp-c-tip-soft: var(--vp-c-brand-soft); |
| 75 | } |
| 76 | |
| 77 | :root { |
| 78 | -vp-c-text-1: rgba(42, 40, 47); |
| 79 | -vp-c-text-2: rgba(42, 40, 47, 0.78); |
| 80 | -vp-c-text-3: rgba(42, 40, 47, 0.56); |
| 81 | --black-text-1: rgba(42, 40, 47); |
| 82 | } |
| 83 | |
| 84 | .dark { |
| 85 | --vp-c-text-1: rgba(255, 255, 245, 0.86); |
| 86 | --vp-c-text-2: rgba(235, 235, 245, 0.6); |
| 87 | --vp-c-text-3: rgba(235, 235, 245, 0.38); |
| 88 | } |
| 89 | |
| 90 | /** |
| 91 | * Component: Button |
| 92 | * -------------------------------------------------------------------------- */ |
| 93 | |
| 94 | :root { |
| 95 | --vp-button-brand-border: transparent; |
| 96 | --vp-button-brand-text: var(--vp-c-white); |
| 97 | --vp-button-brand-bg: var(--vp-c-brand-1); |
| 98 | --vp-button-brand-hover-border: transparent; |
| 99 | --vp-button-brand-hover-text: var(--vp-c-white); |
| 100 | --vp-button-brand-hover-bg: var(--vp-c-brand-2); |
| 101 | --vp-button-brand-active-border: transparent; |
| 102 | --vp-button-brand-active-text: var(--vp-c-white); |
| 103 | --vp-button-brand-active-bg: var(--vp-c-brand-1); |
| 104 | } |
| 105 | |
| 106 | .dark { |
| 107 | --vp-button-brand-text: var(--black-text-1); |
| 108 | --vp-button-brand-bg: var(--vp-c-brand-2); |
| 109 | --vp-button-brand-hover-text: var(--black-text-1); |
| 110 | --vp-button-brand-hover-bg: var(--vp-c-brand-1); |
| 111 | --vp-button-brand-active-text: var(--black-text-1); |
| 112 | --vp-button-brand-active-bg: var(--vp-c-brand-3); |
| 113 | } |
| 114 | |
| 115 | /** |
| 116 | * Component: Home |
| 117 | * -------------------------------------------------------------------------- */ |
| 118 | |
| 119 | :root { |
| 120 | --vp-home-hero-name-color: var(--vp-c-brand-1); |
| 121 | } |
| 122 | |
| 123 | @media (min-width: 640px) { |
| 124 | :root { |
| 125 | --vp-home-hero-image-filter: blur(56px); |
| 126 | } |
| 127 | } |
| 128 | |
| 129 | @media (min-width: 960px) { |
| 130 | :root { |
| 131 | --vp-home-hero-image-filter: blur(72px); |
| 132 | } |
| 133 | } |
| 134 | |
| 135 | /** |
| 136 | * Component: Custom Block |
| 137 | * -------------------------------------------------------------------------- */ |
| 138 | |
| 139 | :root { |
| 140 | --vp-custom-block-tip-border: transparent; |
| 141 | --vp-custom-block-tip-text: var(--vp-c-text-1); |
| 142 | --vp-custom-block-tip-bg: var(--vp-c-brand-soft); |
| 143 | --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft); |
| 144 | } |
| 145 | |
| 146 | /** |
| 147 | * Component: Algolia |
| 148 | * -------------------------------------------------------------------------- */ |
| 149 | |
| 150 | .DocSearch { |
| 151 | --docsearch-primary-color: var(--vp-c-brand-1) !important; |
| 152 | } |
| 153 |