├── .prettierignore ├── .gitattributes ├── .github ├── release-please-manifest.json ├── release-please-config.json └── workflows │ ├── whiskers-check.yml │ ├── release-please.yml │ └── github-pages.yml ├── .prettierrc ├── assets ├── frappe.webp ├── latte.webp ├── mocha.webp ├── macchiato.webp └── preview.webp ├── renovate.json ├── site ├── .vitepress │ ├── theme │ │ └── index.ts │ └── config.mts ├── package.json └── src │ ├── index.md │ ├── components.md │ └── install.md ├── CHANGELOG.md ├── .editorconfig ├── tsconfig.json ├── LICENSE ├── package.json ├── .gitignore ├── README.md ├── vitepress.tera └── theme ├── mocha ├── peach.css ├── blue.css ├── flamingo.css ├── green.css ├── maroon.css ├── mauve.css ├── pink.css ├── red.css ├── sky.css ├── teal.css ├── yellow.css ├── lavender.css ├── rosewater.css └── sapphire.css └── frappe ├── peach.css ├── blue.css ├── flamingo.css ├── green.css ├── maroon.css ├── mauve.css └── pink.css /.prettierignore: -------------------------------------------------------------------------------- 1 | *.css 2 | pnpm-lock.yaml 3 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | theme/** linguist-generated=true 2 | -------------------------------------------------------------------------------- /.github/release-please-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | ".": "0.1.2" 3 | } 4 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 120, 3 | "bracketSameLine": true 4 | } 5 | -------------------------------------------------------------------------------- /assets/frappe.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/vitepress/HEAD/assets/frappe.webp -------------------------------------------------------------------------------- /assets/latte.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/vitepress/HEAD/assets/latte.webp -------------------------------------------------------------------------------- /assets/mocha.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/vitepress/HEAD/assets/mocha.webp -------------------------------------------------------------------------------- /assets/macchiato.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/vitepress/HEAD/assets/macchiato.webp -------------------------------------------------------------------------------- /assets/preview.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/vitepress/HEAD/assets/preview.webp -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://docs.renovatebot.com/renovate-schema.json", 3 | "extends": [ 4 | "local>catppuccin/renovate-config" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /site/.vitepress/theme/index.ts: -------------------------------------------------------------------------------- 1 | import DefaultTheme from "vitepress/theme"; 2 | import "@catppuccin/vitepress/theme/mocha/mauve.css"; 3 | 4 | export default DefaultTheme; 5 | -------------------------------------------------------------------------------- /.github/release-please-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://raw.githubusercontent.com/googleapis/release-please/main/schemas/config.json", 3 | "last-release-sha": "3890165d63b458be51891dca175b3d3cfc2ba011", 4 | "packages": { 5 | ".": { 6 | "package-name": "", 7 | "release-type": "node" 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## [0.1.2](https://github.com/catppuccin/vitepress/compare/v0.1.1...v0.1.2) (2025-04-27) 4 | 5 | 6 | ### Bug Fixes 7 | 8 | * tip badge background color ([#43](https://github.com/catppuccin/vitepress/issues/43)) ([f5947ec](https://github.com/catppuccin/vitepress/commit/f5947ec258d0ba4a57ee7a3a3f1ee379ad358739)) 9 | -------------------------------------------------------------------------------- /.github/workflows/whiskers-check.yml: -------------------------------------------------------------------------------- 1 | name: whiskers 2 | 3 | on: 4 | workflow_dispatch: 5 | push: 6 | branches: [main] 7 | pull_request: 8 | branches: [main] 9 | 10 | jobs: 11 | run: 12 | uses: catppuccin/actions/.github/workflows/whiskers-check.yml@v1 13 | with: 14 | args: vitepress.tera 15 | secrets: inherit 16 | -------------------------------------------------------------------------------- /site/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "author": "willow <42willow@pm.me>", 3 | "devDependencies": { 4 | "@catppuccin/vitepress": "workspace:../", 5 | "vitepress": "^1.3.4" 6 | }, 7 | "peerDependencies": { 8 | "typescript": "^5.5.3" 9 | }, 10 | "description": "📝 Soothing pastel theme for VitePress", 11 | "license": "MIT", 12 | "scripts": { 13 | "build": "vitepress build", 14 | "dev": "vitepress dev", 15 | "preview": "vitepress preview" 16 | }, 17 | "packageManager": "pnpm@10.23.0" 18 | } 19 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # EditorConfig is awesome: https://EditorConfig.org 4 | 5 | root = true 6 | 7 | [*] 8 | charset = utf-8 9 | indent_size = 2 10 | indent_style = space 11 | end_of_line = lf 12 | insert_final_newline = true 13 | trim_trailing_whitespace = true 14 | 15 | # go 16 | [*.go] 17 | indent_style = tab 18 | indent_size = 4 19 | 20 | # python 21 | [*.{ini,py,py.tpl,rst}] 22 | indent_size = 4 23 | 24 | # rust 25 | [*.rs] 26 | indent_size = 4 27 | 28 | # documentation, utils 29 | [*.{md,mdx,diff}] 30 | trim_trailing_whitespace = false 31 | 32 | # windows shell scripts 33 | [*.{cmd,bat,ps1}] 34 | end_of_line = crlf 35 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | // Enable latest features 4 | "lib": ["ESNext", "DOM"], 5 | "target": "ESNext", 6 | "module": "ESNext", 7 | "moduleDetection": "force", 8 | "jsx": "react-jsx", 9 | "allowJs": true, 10 | 11 | // Bundler mode 12 | "moduleResolution": "bundler", 13 | "allowImportingTsExtensions": true, 14 | "verbatimModuleSyntax": true, 15 | "noEmit": true, 16 | 17 | // Best practices 18 | "strict": true, 19 | "skipLibCheck": true, 20 | "noFallthroughCasesInSwitch": true, 21 | 22 | // Some stricter flags (disabled by default) 23 | "noUnusedLocals": false, 24 | "noUnusedParameters": false, 25 | "noPropertyAccessFromIndexSignature": false 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Catppuccin 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@catppuccin/vitepress", 3 | "type": "module", 4 | "version": "0.1.2", 5 | "license": "MIT", 6 | "description": "📝 Soothing pastel theme for VitePress", 7 | "author": { 8 | "name": "Catppuccin Org", 9 | "email": "releases@catppuccin.com", 10 | "url": "https://catppuccin.com" 11 | }, 12 | "contributors": [ 13 | "willow <42willow@pm.me>" 14 | ], 15 | "publishConfig": { 16 | "access": "public", 17 | "provenance": true, 18 | "registry": "https://registry.npmjs.org" 19 | }, 20 | "repository": { 21 | "type": "git", 22 | "url": "https://github.com/catppuccin/vitepress.git" 23 | }, 24 | "bugs": { 25 | "url": "https://github.com/catppuccin/vitepress/issues" 26 | }, 27 | "sponsor": { 28 | "url": "https://opencollective.com/catppuccin" 29 | }, 30 | "files": [ 31 | "theme/" 32 | ], 33 | "scripts": { 34 | "format": "prettier --write ." 35 | }, 36 | "devDependencies": { 37 | "prettier": "^3.3.3", 38 | "vitepress": "^1.2.3" 39 | }, 40 | "peerDependencies": { 41 | "typescript": "^5.0.0" 42 | }, 43 | "packageManager": "pnpm@10.23.0" 44 | } 45 | -------------------------------------------------------------------------------- /.github/workflows/release-please.yml: -------------------------------------------------------------------------------- 1 | name: release-please 2 | 3 | on: 4 | workflow_dispatch: 5 | push: 6 | branches: [main] 7 | 8 | permissions: 9 | contents: write 10 | id-token: write 11 | pull-requests: write 12 | issues: write 13 | 14 | jobs: 15 | release-please: 16 | runs-on: ubuntu-latest 17 | steps: 18 | - uses: googleapis/release-please-action@v4 19 | id: release 20 | with: 21 | config-file: .github/release-please-config.json 22 | manifest-file: .github/release-please-manifest.json 23 | outputs: 24 | release_created: ${{ steps.release.outputs.release_created }} 25 | tag_name: ${{ steps.release.outputs.tag_name }} 26 | 27 | release: 28 | runs-on: ubuntu-latest 29 | needs: release-please 30 | if: ${{ needs.release-please.outputs.release_created }} 31 | steps: 32 | - uses: actions/checkout@v6 33 | - uses: pnpm/action-setup@v4 34 | - uses: actions/setup-node@v6 35 | with: 36 | node-version: 24 37 | cache: pnpm 38 | registry-url: https://registry.npmjs.org 39 | - run: pnpm install --frozen-lockfile 40 | - run: pnpm publish 41 | env: 42 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} 43 | -------------------------------------------------------------------------------- /.github/workflows/github-pages.yml: -------------------------------------------------------------------------------- 1 | name: Deploy VitePress Preview Site 2 | 3 | on: 4 | push: 5 | branches: [main] 6 | workflow_dispatch: 7 | 8 | permissions: 9 | contents: read 10 | pages: write 11 | id-token: write 12 | 13 | jobs: 14 | deploy: 15 | runs-on: ubuntu-latest 16 | environment: 17 | name: github-pages 18 | url: ${{ steps.deployment.outputs.page_url }} 19 | steps: 20 | - name: Checkout 21 | uses: actions/checkout@v6 22 | 23 | - name: Setup pnpm 24 | uses: pnpm/action-setup@v4 25 | 26 | - name: Setup Node 27 | uses: actions/setup-node@v6 28 | with: 29 | node-version: lts/* 30 | cache: pnpm 31 | 32 | - name: Setup Pages 33 | uses: actions/configure-pages@v5 34 | 35 | - name: Install dependencies 36 | run: pnpm install 37 | working-directory: site 38 | 39 | - name: Build with VitePress 40 | run: pnpm run build 41 | working-directory: site 42 | 43 | - name: Upload artifact 44 | uses: actions/upload-pages-artifact@v3 45 | with: 46 | path: site/.vitepress/dist 47 | 48 | - name: Deploy to GitHub Pages 49 | id: deployment 50 | uses: actions/deploy-pages@v4 51 | -------------------------------------------------------------------------------- /site/.vitepress/config.mts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vitepress"; 2 | 3 | // https://vitepress.dev/reference/site-config 4 | export default defineConfig({ 5 | title: "Catppuccin", 6 | description: "A VitePress theme", 7 | srcDir: "./src", 8 | head: [ 9 | [ 10 | "link", 11 | { 12 | rel: "icon", 13 | href: "https://raw.githubusercontent.com/catppuccin/catppuccin/refs/heads/main/assets/logos/exports/1544x1544_circle.png", 14 | }, 15 | ], 16 | ], 17 | // https://vitepress.dev/guide/markdown#syntax-highlighting-in-code-blocks 18 | markdown: { 19 | theme: { 20 | light: "catppuccin-latte", 21 | dark: "catppuccin-mocha", 22 | }, 23 | }, 24 | themeConfig: { 25 | logo: { 26 | src: "https://github.com/catppuccin/catppuccin/blob/main/assets/logos/exports/1544x1544_circle.png?raw=true", 27 | alt: "Catppuccin logo", 28 | }, 29 | // https://vitepress.dev/reference/default-theme-config 30 | nav: [ 31 | { text: "Home", link: "/" }, 32 | { text: "Install", link: "/install" }, 33 | ], 34 | sidebar: [ 35 | { 36 | items: [ 37 | { text: "Installation", link: "/install" }, 38 | { text: "Components", link: "/components" }, 39 | ], 40 | }, 41 | ], 42 | socialLinks: [{ icon: "github", link: "https://github.com/catppuccin/vitepress" }], 43 | }, 44 | }); 45 | -------------------------------------------------------------------------------- /site/src/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | # https://vitepress.dev/reference/default-theme-home-page 3 | layout: home 4 | 5 | hero: 6 | name: "Catppuccin" 7 | text: "A VitePress theme" 8 | tagline: 📝 Soothing pastel theme for VitePress 9 | image: 10 | src: https://github.com/catppuccin/catppuccin/blob/main/assets/logos/exports/1544x1544_circle.png?raw=true 11 | alt: Catppuccin logo 12 | actions: 13 | - theme: brand 14 | text: Install theme! 15 | link: /install 16 | 17 | features: 18 | - title: catppuccin 19 | icon: 😸 20 | details: Soothing pastel theme for the high-spirited! 21 | link: https://github.com/catppuccin/catppuccin 22 | linkText: View on GitHub 23 | - title: palette 24 | icon: 🎨 25 | details: Soothing pastel theme to use within your projects! 26 | link: https://github.com/catppuccin/palette 27 | linkText: View on GitHub 28 | - title: nvim 29 | icon: 🍨 30 | details: Soothing pastel theme for (Neo)vim 31 | link: https://github.com/catppuccin/nvim 32 | linkText: View on GitHub 33 | - title: vscode 34 | icon: 🦌 35 | details: Soothing pastel theme for VSCode & Azure Data Studio 36 | link: https://github.com/catppuccin/vscode 37 | linkText: View on GitHub 38 | - title: tmux 39 | icon: 💽 40 | details: Soothing pastel theme for Tmux! 41 | link: https://github.com/catppuccin/tmux 42 | linkText: View on GitHub 43 | - title: discord 44 | icon: 🎮 45 | details: Soothing pastel theme for Discord 46 | link: https://github.com/catppuccin/discord 47 | linkText: View on GitHub 48 | --- 49 | -------------------------------------------------------------------------------- /site/src/components.md: -------------------------------------------------------------------------------- 1 | # Components 2 | 3 | This page exists to check the styling of different VitePress components 4 | 5 | ## Callouts 6 | 7 | ::: info 8 | This is an info box. 9 | ::: 10 | 11 | ::: tip 12 | This is a tip. 13 | ::: 14 | 15 | ::: warning 16 | This is a warning. 17 | ::: 18 | 19 | ::: danger 20 | This is a dangerous warning. 21 | ::: 22 | 23 | ::: details 24 | This is a details block. 25 | ::: 26 | 27 | ## GitHub-flavored Alerts 28 | 29 | > [!NOTE] 30 | > Highlights information that users should take into account, even when skimming. 31 | 32 | > [!TIP] 33 | > Optional information to help a user be more successful. 34 | 35 | > [!IMPORTANT] 36 | > Crucial information necessary for users to succeed. 37 | 38 | > [!WARNING] 39 | > Critical content demanding immediate user attention due to potential risks. 40 | 41 | > [!CAUTION] 42 | > Negative potential consequences of an action. 43 | 44 | ## Code Blocks 45 | 46 | ```js{1,4,6-8} 47 | export default { // Highlighted 48 | data () { 49 | return { 50 | msg: `Highlighted! 51 | This line isn't highlighted, 52 | but this and the next 2 are.`, 53 | motd: 'VitePress is awesome', 54 | lorem: 'ipsum', 55 | } 56 | } 57 | } 58 | ``` 59 | 60 | ```js 61 | export default { 62 | data() { 63 | return { 64 | msg: "Error", // [!code error] 65 | msg: "Warning", // [!code warning] 66 | }; 67 | }, 68 | }; 69 | ``` 70 | 71 | ## Badges 72 | 73 | ### Title 74 | ### Title 75 | ### Title 76 | ### Title 77 | -------------------------------------------------------------------------------- /site/src/install.md: -------------------------------------------------------------------------------- 1 | # Usage 2 | 3 | 1. Install the theme package to your project with your preferred package manager: 4 | 5 | ::: code-group 6 | 7 | ```bash [npm] 8 | npm install @catppuccin/vitepress 9 | ``` 10 | 11 | ```bash [Yarn] 12 | yarn add @catppuccin/vitepress 13 | ``` 14 | 15 | ```bash [pnpm] 16 | pnpm add @catppuccin/vitepress 17 | ``` 18 | 19 | ```bash [Bun] 20 | bun add @catppuccin/vitepress 21 | ``` 22 | 23 | ::: 24 | 25 | 2. Add the theme to your VitePress theme configuration file: 26 | 27 | ::: code-group 28 | 29 | ```ts {2} [.vitepress/theme/index.ts] 30 | import DefaultTheme from "vitepress/theme"; 31 | import "@catppuccin/vitepress/theme//.css"; 32 | 33 | export default DefaultTheme; 34 | ``` 35 | 36 | ::: 37 | 38 | > [!NOTE] 39 | > Latte is included in all flavors as the light mode variant. 40 | 41 | See ["Extending the Default Theme | VitePress"](https://vitepress.dev/guide/extending-default-theme#extending-the-default-theme) for more information. 42 | 43 | 3. Configure syntax highlighting in your VitePress configuration file: 44 | 45 | ::: code-group 46 | 47 | ```ts{6} [.vitepress/config.mts] 48 | export default defineConfig({ 49 | // ... 50 | markdown: { 51 | theme: { 52 | light: 'catppuccin-latte', 53 | dark: 'catppuccin-', 54 | }, 55 | }, 56 | // ... 57 | }); 58 | ``` 59 | 60 | ::: 61 | 62 |   63 | 64 |

65 | 66 |

67 | 68 |

69 | Copyright © 2021-present Catppuccin Org 70 |

71 | 72 |

73 | 74 |

75 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # VitePress 2 | 3 | site/.vitepress/dist 4 | site/.vitepress/cache 5 | 6 | 7 | # Based on https://raw.githubusercontent.com/github/gitignore/main/Node.gitignore 8 | 9 | # Logs 10 | 11 | logs 12 | _.log 13 | npm-debug.log_ 14 | yarn-debug.log* 15 | yarn-error.log* 16 | lerna-debug.log* 17 | .pnpm-debug.log* 18 | 19 | # Caches 20 | 21 | .cache 22 | 23 | # Diagnostic reports (https://nodejs.org/api/report.html) 24 | 25 | report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json 26 | 27 | # Runtime data 28 | 29 | pids 30 | _.pid 31 | _.seed 32 | *.pid.lock 33 | 34 | # Directory for instrumented libs generated by jscoverage/JSCover 35 | 36 | lib-cov 37 | 38 | # Coverage directory used by tools like istanbul 39 | 40 | coverage 41 | *.lcov 42 | 43 | # nyc test coverage 44 | 45 | .nyc_output 46 | 47 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 48 | 49 | .grunt 50 | 51 | # Bower dependency directory (https://bower.io/) 52 | 53 | bower_components 54 | 55 | # node-waf configuration 56 | 57 | .lock-wscript 58 | 59 | # Compiled binary addons (https://nodejs.org/api/addons.html) 60 | 61 | build/Release 62 | 63 | # Dependency directories 64 | 65 | node_modules/ 66 | jspm_packages/ 67 | 68 | # Snowpack dependency directory (https://snowpack.dev/) 69 | 70 | web_modules/ 71 | 72 | # TypeScript cache 73 | 74 | *.tsbuildinfo 75 | 76 | # Optional npm cache directory 77 | 78 | .npm 79 | 80 | # Optional eslint cache 81 | 82 | .eslintcache 83 | 84 | # Optional stylelint cache 85 | 86 | .stylelintcache 87 | 88 | # Microbundle cache 89 | 90 | .rpt2_cache/ 91 | .rts2_cache_cjs/ 92 | .rts2_cache_es/ 93 | .rts2_cache_umd/ 94 | 95 | # Optional REPL history 96 | 97 | .node_repl_history 98 | 99 | # Output of 'npm pack' 100 | 101 | *.tgz 102 | 103 | # Yarn Integrity file 104 | 105 | .yarn-integrity 106 | 107 | # dotenv environment variable files 108 | 109 | .env 110 | .env.development.local 111 | .env.test.local 112 | .env.production.local 113 | .env.local 114 | 115 | # parcel-bundler cache (https://parceljs.org/) 116 | 117 | .parcel-cache 118 | 119 | # Next.js build output 120 | 121 | .next 122 | out 123 | 124 | # Nuxt.js build / generate output 125 | 126 | .nuxt 127 | dist 128 | 129 | # Gatsby files 130 | 131 | # Comment in the public line in if your project uses Gatsby and not Next.js 132 | 133 | # https://nextjs.org/blog/next-9-1#public-directory-support 134 | 135 | # public 136 | 137 | # vuepress build output 138 | 139 | .vuepress/dist 140 | 141 | # vuepress v2.x temp and cache directory 142 | 143 | .temp 144 | 145 | # Docusaurus cache and generated files 146 | 147 | .docusaurus 148 | 149 | # Serverless directories 150 | 151 | .serverless/ 152 | 153 | # FuseBox cache 154 | 155 | .fusebox/ 156 | 157 | # DynamoDB Local files 158 | 159 | .dynamodb/ 160 | 161 | # TernJS port file 162 | 163 | .tern-port 164 | 165 | # Stores VSCode versions used for testing VSCode extensions 166 | 167 | .vscode-test 168 | 169 | # yarn v2 170 | 171 | .yarn/cache 172 | .yarn/unplugged 173 | .yarn/build-state.yml 174 | .yarn/install-state.gz 175 | .pnp.* 176 | 177 | # IntelliJ based IDEs 178 | .idea 179 | 180 | # Finder (MacOS) folder config 181 | .DS_Store 182 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | Logo
3 | 4 | Catppuccin for VitePress 5 | 6 |

7 | 8 |

9 | 10 | 11 | 12 |

13 | 14 |

15 | 16 |

17 | 18 | ## Previews 19 | 20 |
21 | 🌻 Latte 22 | 23 |
24 |
25 | 🪴 Frappé 26 | 27 |
28 |
29 | 🌺 Macchiato 30 | 31 |
32 |
33 | 🌿 Mocha 34 | 35 |
36 | 37 | ## Usage 38 | 39 | 1. Install the theme package to your project with `npm install @catppuccin/vitepress`. 40 | 41 | 2. Add the theme to your VitePress theme configuration file: 42 | 43 | `.vitepress/theme/index.ts` 44 | 45 | ```ts 46 | import DefaultTheme from "vitepress/theme"; 47 | import "@catppuccin/vitepress/theme//.css"; 48 | 49 | export default DefaultTheme; 50 | ``` 51 | 52 | See ["Extending the Default Theme | VitePress"](https://vitepress.dev/guide/extending-default-theme#extending-the-default-theme) for more information. 53 | 54 | > [!NOTE] 55 | > Latte is included in all flavors as the light mode variant. 56 | 57 | 3. Configure syntax highlighting in your VitePress configuration file: 58 | 59 | `.vitepress/config.mts` 60 | 61 | ```ts 62 | export default defineConfig({ 63 | // ... 64 | markdown: { 65 | theme: { 66 | light: "catppuccin-latte", 67 | dark: "catppuccin-", 68 | }, 69 | }, 70 | // ... 71 | }); 72 | ``` 73 | 74 | ## 💝 Thanks to 75 | 76 | - [42Willow](https://github.com/42willow) 77 | - [Strata Docs](https://github.com/StrataWM/strata/blob/5daa4f102a7a03bb73dbe84e43d7ae1cb64d2c54/docs/.vitepress/theme/colors.css) 78 | 79 |   80 | 81 |

82 | 83 |

84 | 85 |

86 | Copyright © 2021-present Catppuccin Org 87 |

88 | 89 |

90 | 91 |

92 | -------------------------------------------------------------------------------- /vitepress.tera: -------------------------------------------------------------------------------- 1 | --- 2 | whiskers: 3 | version: ^2.5.0 4 | matrix: 5 | - flavor: ["frappe", "macchiato", "mocha"] 6 | - accent 7 | filename: "theme/{{flavor.identifier}}/{{accent}}.css" 8 | hex_format: "#{{r}}{{g}}{{b}}{{z}}" 9 | --- 10 | /* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */ 11 | /* https://catppuccin.com/palette */ 12 | 13 | {% set modes = ["light", "dark"] -%} 14 | 15 | {% for mode in modes %} 16 | {%- if mode == "light" -%} 17 | {%- set palette = flavors["latte"].colors %} 18 | {%- set paletteid = flavors["latte"].identifier %} 19 | :root { 20 | {% else -%} 21 | {%- set palette = flavor.colors %} 22 | {%- set paletteid = flavor.identifier %} 23 | .dark { 24 | /* Fix button text color */ 25 | --vp-button-brand-text: var(--ctp-{{ paletteid }}-crust) !important; 26 | --vp-button-brand-hover-text: var(--ctp-{{ paletteid }}-crust) !important; 27 | --vp-button-brand-active-text: var(--ctp-mocha-crust) !important; 28 | 29 | {% endif -%} 30 | /* Fix badge background color */ 31 | --vp-badge-tip-bg: {{ palette[accent] | mod(opacity=0.2) | css_hsla }}; 32 | 33 | /* Accent Color */ 34 | --vp-c-brand-1: {{ palette[accent].hex }}; 35 | --vp-c-brand-2: {{ palette[accent] | sub(lightness=5) | css_rgb }}; 36 | --vp-c-brand-3: {{ palette[accent].hex }}; 37 | 38 | /* Solid Colors and Sponsor Color */ 39 | {%- if mode == "light" %} 40 | --vp-c-white: {{ palette.base.hex }}; 41 | --vp-c-black: {{ palette.text.hex }}; 42 | {%- else %} 43 | --vp-c-white: {{ palette.text.hex }}; 44 | --vp-c-black: {{ palette.base.hex }}; 45 | {%- endif %} 46 | --vp-c-sponsor: {{ palette.red.hex }}; 47 | 48 | /* Background Colors */ 49 | --vp-c-bg: {{ palette.base.hex }}; 50 | --vp-c-bg-alt: {{ palette.mantle.hex }}; 51 | --vp-c-bg-elv: {{ palette.crust.hex }}; 52 | --vp-c-bg-soft: {{ palette.mantle.hex }}; 53 | 54 | /* Border Colors */ 55 | --vp-c-border: {{ palette.surface0.hex }}; 56 | --vp-c-divider: {{ palette.surface0.hex }}; 57 | --vp-c-gutter: {{ palette.surface1.hex }}; 58 | 59 | /* Text Colors */ 60 | --vp-c-text-1: {{ palette.text.hex }}; 61 | --vp-c-text-2: {{ palette.subtext1.hex }}; 62 | --vp-c-text-3: {{ palette.subtext0.hex }}; 63 | 64 | /* Callout Colors */ 65 | --vp-c-tip-soft: {{ palette.green | mod(opacity=0.2) | css_hsla }}; 66 | --vp-c-warning-soft: {{ palette.yellow | mod(opacity=0.2) | css_hsla }}; 67 | --vp-c-danger-soft: {{ palette.red | mod(opacity=0.2) | css_hsla }}; 68 | --vp-c-caution-soft: {{ palette.red | mod(opacity=0.2) | css_hsla }}; 69 | --vp-c-important-soft: {{ palette.mauve | mod(opacity=0.2) | css_hsla }}; 70 | 71 | --vp-custom-block-info-bg: {{ palette.sky | mod(opacity=0.2) | css_hsla }}; 72 | --vp-custom-block-note-bg: {{ palette.blue | mod(opacity=0.2) | css_hsla }}; 73 | --vp-custom-block-details-bg: {{ palette.surface0.hex }}; 74 | 75 | /* Catppuccin Accents */ 76 | {% for color_name, color in palette -%} 77 | --ctp-{{ paletteid }}-{{ color_name }}: {{ color.hex }}; 78 | {% endfor %} 79 | /* Color Palette */ 80 | {%- if mode == "light" %} 81 | {%- set saturation = 10 %} 82 | {%- set mix_amount = 0.5 %} 83 | {%- set lightness_amount = 20 %} 84 | {%- set opacity_mod = 0.14 %} 85 | {%- set lightness_amount_gray = 30 %} 86 | {%- else %} 87 | {%- set saturation = 10 %} 88 | {%- set mix_amount = 0.5 %} 89 | {%- set lightness_amount = 20 %} 90 | {%- set opacity_mod = 0.14 %} 91 | {%- set lightness_amount_gray = 30 %} 92 | {%- endif %} 93 | --vp-c-gray-1: {{palette.surface1 | css_rgb}}; 94 | --vp-c-gray-2: {{palette.surface0 | css_rgb}}; 95 | --vp-c-gray-3: {{palette.base | css_rgb}}; 96 | {%- if mode == "light" %} 97 | --vp-c-gray-soft: {{palette.base | sub(lightness=lightness_amount_gray) | mod(opacity=opacity_mod) | css_hsla}}; 98 | {%- else %} 99 | --vp-c-gray-soft: {{palette.base | add(lightness=lightness_amount_gray) | mod(opacity=opacity_mod) | css_hsla}}; 100 | {%- endif %} 101 | 102 | --vp-c-default-soft: {{ palette.surface0.hex }}; 103 | 104 | --vp-c-indigo-1: {{palette.blue | css_rgb}}; 105 | --vp-c-indigo-2: {{palette.blue | add(saturation=saturation) | css_rgb}}; 106 | --vp-c-indigo-3: {{palette.blue | mix(color=base, amount=mix_amount) | css_rgb}}; 107 | --vp-c-indigo-soft: {{palette.blue | sub(lightness=lightness_amount) | mod(opacity=opacity_mod) | css_hsla}}; 108 | 109 | --vp-c-purple-1: {{palette.mauve | css_rgb}}; 110 | --vp-c-purple-2: {{palette.mauve | add(saturation=saturation) | css_rgb}}; 111 | --vp-c-purple-3: {{palette.mauve | mix(color=base, amount=mix_amount) | css_rgb}}; 112 | --vp-c-purple-soft: {{palette.mauve | sub(lightness=lightness_amount) | mod(opacity=opacity_mod) | css_hsla}}; 113 | 114 | --vp-c-green-1: {{palette.green | css_rgb}}; 115 | --vp-c-green-2: {{palette.green | add(saturation=saturation) | css_rgb}}; 116 | --vp-c-green-3: {{palette.green | mix(color=base, amount=mix_amount) | css_rgb}}; 117 | --vp-c-green-soft: {{palette.green | sub(lightness=lightness_amount) | mod(opacity=opacity_mod) | css_hsla}}; 118 | 119 | --vp-c-yellow-1: {{palette.yellow | css_rgb}}; 120 | --vp-c-yellow-2: {{palette.yellow | add(saturation=saturation) | css_rgb}}; 121 | --vp-c-yellow-3: {{palette.yellow | mix(color=base, amount=mix_amount) | css_rgb}}; 122 | --vp-c-yellow-soft: {{palette.yellow | sub(lightness=lightness_amount) | mod(opacity=opacity_mod) | css_hsla}}; 123 | 124 | --vp-c-red-1: {{palette.red | css_rgb}}; 125 | --vp-c-red-2: {{palette.red | add(saturation=saturation) | css_rgb}}; 126 | --vp-c-red-3: {{palette.red | mix(color=base, amount=mix_amount) | css_rgb}}; 127 | --vp-c-red-soft: {{palette.red | sub(lightness=lightness_amount) | mod(opacity=opacity_mod) | css_hsla}}; 128 | 129 | /* Icons */ 130 | {% set icon_copy = '' %} 131 | {% set icon_copied = '' %} 132 | --vp-icon-copy: url('data:image/svg+xml,{{ icon_copy | urlencode }}'); 133 | --vp-icon-copied: url('data:image/svg+xml,{{ icon_copied | urlencode }}'); 134 | 135 | /* Code Highlighting */ 136 | --vp-code-line-highlight-color: {{ palette.overlay2 | mod(opacity=0.2) | css_hsla }}; 137 | } 138 | {%- endfor %} 139 | -------------------------------------------------------------------------------- /theme/mocha/peach.css: -------------------------------------------------------------------------------- 1 | /* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */ 2 | /* https://catppuccin.com/palette */ 3 | 4 | 5 | :root { 6 | /* Fix badge background color */ 7 | --vp-badge-tip-bg: hsla(22, 99%, 52%, 0.20); 8 | 9 | /* Accent Color */ 10 | --vp-c-brand-1: #fe640b; 11 | --vp-c-brand-2: rgb(239, 88, 1); 12 | --vp-c-brand-3: #fe640b; 13 | 14 | /* Solid Colors and Sponsor Color */ 15 | --vp-c-white: #eff1f5; 16 | --vp-c-black: #4c4f69; 17 | --vp-c-sponsor: #d20f39; 18 | 19 | /* Background Colors */ 20 | --vp-c-bg: #eff1f5; 21 | --vp-c-bg-alt: #e6e9ef; 22 | --vp-c-bg-elv: #dce0e8; 23 | --vp-c-bg-soft: #e6e9ef; 24 | 25 | /* Border Colors */ 26 | --vp-c-border: #ccd0da; 27 | --vp-c-divider: #ccd0da; 28 | --vp-c-gutter: #bcc0cc; 29 | 30 | /* Text Colors */ 31 | --vp-c-text-1: #4c4f69; 32 | --vp-c-text-2: #5c5f77; 33 | --vp-c-text-3: #6c6f85; 34 | 35 | /* Callout Colors */ 36 | --vp-c-tip-soft: hsla(109, 58%, 40%, 0.20); 37 | --vp-c-warning-soft: hsla(35, 77%, 49%, 0.20); 38 | --vp-c-danger-soft: hsla(347, 87%, 44%, 0.20); 39 | --vp-c-caution-soft: hsla(347, 87%, 44%, 0.20); 40 | --vp-c-important-soft: hsla(266, 85%, 58%, 0.20); 41 | 42 | --vp-custom-block-info-bg: hsla(197, 96%, 46%, 0.20); 43 | --vp-custom-block-note-bg: hsla(220, 91%, 54%, 0.20); 44 | --vp-custom-block-details-bg: #ccd0da; 45 | 46 | /* Catppuccin Accents */ 47 | --ctp-latte-rosewater: #dc8a78; 48 | --ctp-latte-flamingo: #dd7878; 49 | --ctp-latte-pink: #ea76cb; 50 | --ctp-latte-mauve: #8839ef; 51 | --ctp-latte-red: #d20f39; 52 | --ctp-latte-maroon: #e64553; 53 | --ctp-latte-peach: #fe640b; 54 | --ctp-latte-yellow: #df8e1d; 55 | --ctp-latte-green: #40a02b; 56 | --ctp-latte-teal: #179299; 57 | --ctp-latte-sky: #04a5e5; 58 | --ctp-latte-sapphire: #209fb5; 59 | --ctp-latte-blue: #1e66f5; 60 | --ctp-latte-lavender: #7287fd; 61 | --ctp-latte-text: #4c4f69; 62 | --ctp-latte-subtext1: #5c5f77; 63 | --ctp-latte-subtext0: #6c6f85; 64 | --ctp-latte-overlay2: #7c7f93; 65 | --ctp-latte-overlay1: #8c8fa1; 66 | --ctp-latte-overlay0: #9ca0b0; 67 | --ctp-latte-surface2: #acb0be; 68 | --ctp-latte-surface1: #bcc0cc; 69 | --ctp-latte-surface0: #ccd0da; 70 | --ctp-latte-base: #eff1f5; 71 | --ctp-latte-mantle: #e6e9ef; 72 | --ctp-latte-crust: #dce0e8; 73 | 74 | /* Color Palette */ 75 | --vp-c-gray-1: rgb(188, 192, 204); 76 | --vp-c-gray-2: rgb(204, 208, 218); 77 | --vp-c-gray-3: rgb(239, 241, 245); 78 | --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14); 79 | 80 | --vp-c-default-soft: #ccd0da; 81 | 82 | --vp-c-indigo-1: rgb(30, 102, 245); 83 | --vp-c-indigo-2: rgb(21, 99, 255); 84 | --vp-c-indigo-3: rgb(30, 66, 146); 85 | --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14); 86 | 87 | --vp-c-purple-1: rgb(136, 57, 239); 88 | --vp-c-purple-2: rgb(134, 46, 250); 89 | --vp-c-purple-3: rgb(83, 44, 143); 90 | --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14); 91 | 92 | --vp-c-green-1: rgb(64, 160, 43); 93 | --vp-c-green-2: rgb(58, 171, 33); 94 | --vp-c-green-3: rgb(47, 95, 45); 95 | --vp-c-green-soft: hsla(109, 58%, 20%, 0.14); 96 | 97 | --vp-c-yellow-1: rgb(223, 142, 29); 98 | --vp-c-yellow-2: rgb(236, 144, 16); 99 | --vp-c-yellow-3: rgb(127, 86, 38); 100 | --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14); 101 | 102 | --vp-c-red-1: rgb(210, 15, 57); 103 | --vp-c-red-2: rgb(222, 4, 51); 104 | --vp-c-red-3: rgb(120, 23, 52); 105 | --vp-c-red-soft: hsla(347, 87%, 24%, 0.14); 106 | 107 | /* Icons */ 108 | 109 | 110 | --vp-icon-copy: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3C/svg%3E'); 111 | --vp-icon-copied: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Cpath%20d%3D%22m9%2014%202%202%204-4%22/%3E%3C/svg%3E'); 112 | 113 | /* Code Highlighting */ 114 | --vp-code-line-highlight-color: hsla(232, 10%, 53%, 0.20); 115 | } 116 | .dark { 117 | /* Fix button text color */ 118 | --vp-button-brand-text: var(--ctp-mocha-crust) !important; 119 | --vp-button-brand-hover-text: var(--ctp-mocha-crust) !important; 120 | --vp-button-brand-active-text: var(--ctp-mocha-crust) !important; 121 | 122 | /* Fix badge background color */ 123 | --vp-badge-tip-bg: hsla(23, 92%, 76%, 0.20); 124 | 125 | /* Accent Color */ 126 | --vp-c-brand-1: #fab387; 127 | --vp-c-brand-2: rgb(249, 164, 111); 128 | --vp-c-brand-3: #fab387; 129 | 130 | /* Solid Colors and Sponsor Color */ 131 | --vp-c-white: #cdd6f4; 132 | --vp-c-black: #1e1e2e; 133 | --vp-c-sponsor: #f38ba8; 134 | 135 | /* Background Colors */ 136 | --vp-c-bg: #1e1e2e; 137 | --vp-c-bg-alt: #181825; 138 | --vp-c-bg-elv: #11111b; 139 | --vp-c-bg-soft: #181825; 140 | 141 | /* Border Colors */ 142 | --vp-c-border: #313244; 143 | --vp-c-divider: #313244; 144 | --vp-c-gutter: #45475a; 145 | 146 | /* Text Colors */ 147 | --vp-c-text-1: #cdd6f4; 148 | --vp-c-text-2: #bac2de; 149 | --vp-c-text-3: #a6adc8; 150 | 151 | /* Callout Colors */ 152 | --vp-c-tip-soft: hsla(115, 54%, 76%, 0.20); 153 | --vp-c-warning-soft: hsla(41, 86%, 83%, 0.20); 154 | --vp-c-danger-soft: hsla(343, 81%, 75%, 0.20); 155 | --vp-c-caution-soft: hsla(343, 81%, 75%, 0.20); 156 | --vp-c-important-soft: hsla(267, 84%, 81%, 0.20); 157 | 158 | --vp-custom-block-info-bg: hsla(189, 71%, 73%, 0.20); 159 | --vp-custom-block-note-bg: hsla(217, 92%, 76%, 0.20); 160 | --vp-custom-block-details-bg: #313244; 161 | 162 | /* Catppuccin Accents */ 163 | --ctp-mocha-rosewater: #f5e0dc; 164 | --ctp-mocha-flamingo: #f2cdcd; 165 | --ctp-mocha-pink: #f5c2e7; 166 | --ctp-mocha-mauve: #cba6f7; 167 | --ctp-mocha-red: #f38ba8; 168 | --ctp-mocha-maroon: #eba0ac; 169 | --ctp-mocha-peach: #fab387; 170 | --ctp-mocha-yellow: #f9e2af; 171 | --ctp-mocha-green: #a6e3a1; 172 | --ctp-mocha-teal: #94e2d5; 173 | --ctp-mocha-sky: #89dceb; 174 | --ctp-mocha-sapphire: #74c7ec; 175 | --ctp-mocha-blue: #89b4fa; 176 | --ctp-mocha-lavender: #b4befe; 177 | --ctp-mocha-text: #cdd6f4; 178 | --ctp-mocha-subtext1: #bac2de; 179 | --ctp-mocha-subtext0: #a6adc8; 180 | --ctp-mocha-overlay2: #9399b2; 181 | --ctp-mocha-overlay1: #7f849c; 182 | --ctp-mocha-overlay0: #6c7086; 183 | --ctp-mocha-surface2: #585b70; 184 | --ctp-mocha-surface1: #45475a; 185 | --ctp-mocha-surface0: #313244; 186 | --ctp-mocha-base: #1e1e2e; 187 | --ctp-mocha-mantle: #181825; 188 | --ctp-mocha-crust: #11111b; 189 | 190 | /* Color Palette */ 191 | --vp-c-gray-1: rgb(69, 71, 90); 192 | --vp-c-gray-2: rgb(49, 50, 68); 193 | --vp-c-gray-3: rgb(30, 30, 46); 194 | --vp-c-gray-soft: hsla(240, 21%, 45%, 0.14); 195 | 196 | --vp-c-default-soft: #313244; 197 | 198 | --vp-c-indigo-1: rgb(137, 180, 250); 199 | --vp-c-indigo-2: rgb(133, 180, 255); 200 | --vp-c-indigo-3: rgb(84, 105, 148); 201 | --vp-c-indigo-soft: hsla(217, 92%, 56%, 0.14); 202 | 203 | --vp-c-purple-1: rgb(203, 166, 247); 204 | --vp-c-purple-2: rgb(203, 162, 252); 205 | --vp-c-purple-3: rgb(117, 98, 147); 206 | --vp-c-purple-soft: hsla(267, 84%, 61%, 0.14); 207 | 208 | --vp-c-green-1: rgb(166, 227, 161); 209 | --vp-c-green-2: rgb(161, 233, 155); 210 | --vp-c-green-3: rgb(98, 129, 104); 211 | --vp-c-green-soft: hsla(115, 54%, 56%, 0.14); 212 | 213 | --vp-c-yellow-1: rgb(249, 226, 175); 214 | --vp-c-yellow-2: rgb(253, 227, 171); 215 | --vp-c-yellow-3: rgb(140, 128, 111); 216 | --vp-c-yellow-soft: hsla(41, 86%, 63%, 0.14); 217 | 218 | --vp-c-red-1: rgb(243, 139, 168); 219 | --vp-c-red-2: rgb(249, 133, 166); 220 | --vp-c-red-3: rgb(137, 85, 107); 221 | --vp-c-red-soft: hsla(343, 81%, 55%, 0.14); 222 | 223 | /* Icons */ 224 | 225 | 226 | --vp-icon-copy: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3C/svg%3E'); 227 | --vp-icon-copied: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Cpath%20d%3D%22m9%2014%202%202%204-4%22/%3E%3C/svg%3E'); 228 | 229 | /* Code Highlighting */ 230 | --vp-code-line-highlight-color: hsla(228, 17%, 64%, 0.20); 231 | } 232 | -------------------------------------------------------------------------------- /theme/mocha/blue.css: -------------------------------------------------------------------------------- 1 | /* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */ 2 | /* https://catppuccin.com/palette */ 3 | 4 | 5 | :root { 6 | /* Fix badge background color */ 7 | --vp-badge-tip-bg: hsla(220, 91%, 54%, 0.20); 8 | 9 | /* Accent Color */ 10 | --vp-c-brand-1: #1e66f5; 11 | --vp-c-brand-2: rgb(11, 87, 239); 12 | --vp-c-brand-3: #1e66f5; 13 | 14 | /* Solid Colors and Sponsor Color */ 15 | --vp-c-white: #eff1f5; 16 | --vp-c-black: #4c4f69; 17 | --vp-c-sponsor: #d20f39; 18 | 19 | /* Background Colors */ 20 | --vp-c-bg: #eff1f5; 21 | --vp-c-bg-alt: #e6e9ef; 22 | --vp-c-bg-elv: #dce0e8; 23 | --vp-c-bg-soft: #e6e9ef; 24 | 25 | /* Border Colors */ 26 | --vp-c-border: #ccd0da; 27 | --vp-c-divider: #ccd0da; 28 | --vp-c-gutter: #bcc0cc; 29 | 30 | /* Text Colors */ 31 | --vp-c-text-1: #4c4f69; 32 | --vp-c-text-2: #5c5f77; 33 | --vp-c-text-3: #6c6f85; 34 | 35 | /* Callout Colors */ 36 | --vp-c-tip-soft: hsla(109, 58%, 40%, 0.20); 37 | --vp-c-warning-soft: hsla(35, 77%, 49%, 0.20); 38 | --vp-c-danger-soft: hsla(347, 87%, 44%, 0.20); 39 | --vp-c-caution-soft: hsla(347, 87%, 44%, 0.20); 40 | --vp-c-important-soft: hsla(266, 85%, 58%, 0.20); 41 | 42 | --vp-custom-block-info-bg: hsla(197, 96%, 46%, 0.20); 43 | --vp-custom-block-note-bg: hsla(220, 91%, 54%, 0.20); 44 | --vp-custom-block-details-bg: #ccd0da; 45 | 46 | /* Catppuccin Accents */ 47 | --ctp-latte-rosewater: #dc8a78; 48 | --ctp-latte-flamingo: #dd7878; 49 | --ctp-latte-pink: #ea76cb; 50 | --ctp-latte-mauve: #8839ef; 51 | --ctp-latte-red: #d20f39; 52 | --ctp-latte-maroon: #e64553; 53 | --ctp-latte-peach: #fe640b; 54 | --ctp-latte-yellow: #df8e1d; 55 | --ctp-latte-green: #40a02b; 56 | --ctp-latte-teal: #179299; 57 | --ctp-latte-sky: #04a5e5; 58 | --ctp-latte-sapphire: #209fb5; 59 | --ctp-latte-blue: #1e66f5; 60 | --ctp-latte-lavender: #7287fd; 61 | --ctp-latte-text: #4c4f69; 62 | --ctp-latte-subtext1: #5c5f77; 63 | --ctp-latte-subtext0: #6c6f85; 64 | --ctp-latte-overlay2: #7c7f93; 65 | --ctp-latte-overlay1: #8c8fa1; 66 | --ctp-latte-overlay0: #9ca0b0; 67 | --ctp-latte-surface2: #acb0be; 68 | --ctp-latte-surface1: #bcc0cc; 69 | --ctp-latte-surface0: #ccd0da; 70 | --ctp-latte-base: #eff1f5; 71 | --ctp-latte-mantle: #e6e9ef; 72 | --ctp-latte-crust: #dce0e8; 73 | 74 | /* Color Palette */ 75 | --vp-c-gray-1: rgb(188, 192, 204); 76 | --vp-c-gray-2: rgb(204, 208, 218); 77 | --vp-c-gray-3: rgb(239, 241, 245); 78 | --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14); 79 | 80 | --vp-c-default-soft: #ccd0da; 81 | 82 | --vp-c-indigo-1: rgb(30, 102, 245); 83 | --vp-c-indigo-2: rgb(21, 99, 255); 84 | --vp-c-indigo-3: rgb(30, 66, 146); 85 | --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14); 86 | 87 | --vp-c-purple-1: rgb(136, 57, 239); 88 | --vp-c-purple-2: rgb(134, 46, 250); 89 | --vp-c-purple-3: rgb(83, 44, 143); 90 | --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14); 91 | 92 | --vp-c-green-1: rgb(64, 160, 43); 93 | --vp-c-green-2: rgb(58, 171, 33); 94 | --vp-c-green-3: rgb(47, 95, 45); 95 | --vp-c-green-soft: hsla(109, 58%, 20%, 0.14); 96 | 97 | --vp-c-yellow-1: rgb(223, 142, 29); 98 | --vp-c-yellow-2: rgb(236, 144, 16); 99 | --vp-c-yellow-3: rgb(127, 86, 38); 100 | --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14); 101 | 102 | --vp-c-red-1: rgb(210, 15, 57); 103 | --vp-c-red-2: rgb(222, 4, 51); 104 | --vp-c-red-3: rgb(120, 23, 52); 105 | --vp-c-red-soft: hsla(347, 87%, 24%, 0.14); 106 | 107 | /* Icons */ 108 | 109 | 110 | --vp-icon-copy: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3C/svg%3E'); 111 | --vp-icon-copied: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Cpath%20d%3D%22m9%2014%202%202%204-4%22/%3E%3C/svg%3E'); 112 | 113 | /* Code Highlighting */ 114 | --vp-code-line-highlight-color: hsla(232, 10%, 53%, 0.20); 115 | } 116 | .dark { 117 | /* Fix button text color */ 118 | --vp-button-brand-text: var(--ctp-mocha-crust) !important; 119 | --vp-button-brand-hover-text: var(--ctp-mocha-crust) !important; 120 | --vp-button-brand-active-text: var(--ctp-mocha-crust) !important; 121 | 122 | /* Fix badge background color */ 123 | --vp-badge-tip-bg: hsla(217, 92%, 76%, 0.20); 124 | 125 | /* Accent Color */ 126 | --vp-c-brand-1: #89b4fa; 127 | --vp-c-brand-2: rgb(113, 165, 249); 128 | --vp-c-brand-3: #89b4fa; 129 | 130 | /* Solid Colors and Sponsor Color */ 131 | --vp-c-white: #cdd6f4; 132 | --vp-c-black: #1e1e2e; 133 | --vp-c-sponsor: #f38ba8; 134 | 135 | /* Background Colors */ 136 | --vp-c-bg: #1e1e2e; 137 | --vp-c-bg-alt: #181825; 138 | --vp-c-bg-elv: #11111b; 139 | --vp-c-bg-soft: #181825; 140 | 141 | /* Border Colors */ 142 | --vp-c-border: #313244; 143 | --vp-c-divider: #313244; 144 | --vp-c-gutter: #45475a; 145 | 146 | /* Text Colors */ 147 | --vp-c-text-1: #cdd6f4; 148 | --vp-c-text-2: #bac2de; 149 | --vp-c-text-3: #a6adc8; 150 | 151 | /* Callout Colors */ 152 | --vp-c-tip-soft: hsla(115, 54%, 76%, 0.20); 153 | --vp-c-warning-soft: hsla(41, 86%, 83%, 0.20); 154 | --vp-c-danger-soft: hsla(343, 81%, 75%, 0.20); 155 | --vp-c-caution-soft: hsla(343, 81%, 75%, 0.20); 156 | --vp-c-important-soft: hsla(267, 84%, 81%, 0.20); 157 | 158 | --vp-custom-block-info-bg: hsla(189, 71%, 73%, 0.20); 159 | --vp-custom-block-note-bg: hsla(217, 92%, 76%, 0.20); 160 | --vp-custom-block-details-bg: #313244; 161 | 162 | /* Catppuccin Accents */ 163 | --ctp-mocha-rosewater: #f5e0dc; 164 | --ctp-mocha-flamingo: #f2cdcd; 165 | --ctp-mocha-pink: #f5c2e7; 166 | --ctp-mocha-mauve: #cba6f7; 167 | --ctp-mocha-red: #f38ba8; 168 | --ctp-mocha-maroon: #eba0ac; 169 | --ctp-mocha-peach: #fab387; 170 | --ctp-mocha-yellow: #f9e2af; 171 | --ctp-mocha-green: #a6e3a1; 172 | --ctp-mocha-teal: #94e2d5; 173 | --ctp-mocha-sky: #89dceb; 174 | --ctp-mocha-sapphire: #74c7ec; 175 | --ctp-mocha-blue: #89b4fa; 176 | --ctp-mocha-lavender: #b4befe; 177 | --ctp-mocha-text: #cdd6f4; 178 | --ctp-mocha-subtext1: #bac2de; 179 | --ctp-mocha-subtext0: #a6adc8; 180 | --ctp-mocha-overlay2: #9399b2; 181 | --ctp-mocha-overlay1: #7f849c; 182 | --ctp-mocha-overlay0: #6c7086; 183 | --ctp-mocha-surface2: #585b70; 184 | --ctp-mocha-surface1: #45475a; 185 | --ctp-mocha-surface0: #313244; 186 | --ctp-mocha-base: #1e1e2e; 187 | --ctp-mocha-mantle: #181825; 188 | --ctp-mocha-crust: #11111b; 189 | 190 | /* Color Palette */ 191 | --vp-c-gray-1: rgb(69, 71, 90); 192 | --vp-c-gray-2: rgb(49, 50, 68); 193 | --vp-c-gray-3: rgb(30, 30, 46); 194 | --vp-c-gray-soft: hsla(240, 21%, 45%, 0.14); 195 | 196 | --vp-c-default-soft: #313244; 197 | 198 | --vp-c-indigo-1: rgb(137, 180, 250); 199 | --vp-c-indigo-2: rgb(133, 180, 255); 200 | --vp-c-indigo-3: rgb(84, 105, 148); 201 | --vp-c-indigo-soft: hsla(217, 92%, 56%, 0.14); 202 | 203 | --vp-c-purple-1: rgb(203, 166, 247); 204 | --vp-c-purple-2: rgb(203, 162, 252); 205 | --vp-c-purple-3: rgb(117, 98, 147); 206 | --vp-c-purple-soft: hsla(267, 84%, 61%, 0.14); 207 | 208 | --vp-c-green-1: rgb(166, 227, 161); 209 | --vp-c-green-2: rgb(161, 233, 155); 210 | --vp-c-green-3: rgb(98, 129, 104); 211 | --vp-c-green-soft: hsla(115, 54%, 56%, 0.14); 212 | 213 | --vp-c-yellow-1: rgb(249, 226, 175); 214 | --vp-c-yellow-2: rgb(253, 227, 171); 215 | --vp-c-yellow-3: rgb(140, 128, 111); 216 | --vp-c-yellow-soft: hsla(41, 86%, 63%, 0.14); 217 | 218 | --vp-c-red-1: rgb(243, 139, 168); 219 | --vp-c-red-2: rgb(249, 133, 166); 220 | --vp-c-red-3: rgb(137, 85, 107); 221 | --vp-c-red-soft: hsla(343, 81%, 55%, 0.14); 222 | 223 | /* Icons */ 224 | 225 | 226 | --vp-icon-copy: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3C/svg%3E'); 227 | --vp-icon-copied: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Cpath%20d%3D%22m9%2014%202%202%204-4%22/%3E%3C/svg%3E'); 228 | 229 | /* Code Highlighting */ 230 | --vp-code-line-highlight-color: hsla(228, 17%, 64%, 0.20); 231 | } 232 | -------------------------------------------------------------------------------- /theme/mocha/flamingo.css: -------------------------------------------------------------------------------- 1 | /* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */ 2 | /* https://catppuccin.com/palette */ 3 | 4 | 5 | :root { 6 | /* Fix badge background color */ 7 | --vp-badge-tip-bg: hsla(0, 60%, 67%, 0.20); 8 | 9 | /* Accent Color */ 10 | --vp-c-brand-1: #dd7878; 11 | --vp-c-brand-2: rgb(216, 100, 100); 12 | --vp-c-brand-3: #dd7878; 13 | 14 | /* Solid Colors and Sponsor Color */ 15 | --vp-c-white: #eff1f5; 16 | --vp-c-black: #4c4f69; 17 | --vp-c-sponsor: #d20f39; 18 | 19 | /* Background Colors */ 20 | --vp-c-bg: #eff1f5; 21 | --vp-c-bg-alt: #e6e9ef; 22 | --vp-c-bg-elv: #dce0e8; 23 | --vp-c-bg-soft: #e6e9ef; 24 | 25 | /* Border Colors */ 26 | --vp-c-border: #ccd0da; 27 | --vp-c-divider: #ccd0da; 28 | --vp-c-gutter: #bcc0cc; 29 | 30 | /* Text Colors */ 31 | --vp-c-text-1: #4c4f69; 32 | --vp-c-text-2: #5c5f77; 33 | --vp-c-text-3: #6c6f85; 34 | 35 | /* Callout Colors */ 36 | --vp-c-tip-soft: hsla(109, 58%, 40%, 0.20); 37 | --vp-c-warning-soft: hsla(35, 77%, 49%, 0.20); 38 | --vp-c-danger-soft: hsla(347, 87%, 44%, 0.20); 39 | --vp-c-caution-soft: hsla(347, 87%, 44%, 0.20); 40 | --vp-c-important-soft: hsla(266, 85%, 58%, 0.20); 41 | 42 | --vp-custom-block-info-bg: hsla(197, 96%, 46%, 0.20); 43 | --vp-custom-block-note-bg: hsla(220, 91%, 54%, 0.20); 44 | --vp-custom-block-details-bg: #ccd0da; 45 | 46 | /* Catppuccin Accents */ 47 | --ctp-latte-rosewater: #dc8a78; 48 | --ctp-latte-flamingo: #dd7878; 49 | --ctp-latte-pink: #ea76cb; 50 | --ctp-latte-mauve: #8839ef; 51 | --ctp-latte-red: #d20f39; 52 | --ctp-latte-maroon: #e64553; 53 | --ctp-latte-peach: #fe640b; 54 | --ctp-latte-yellow: #df8e1d; 55 | --ctp-latte-green: #40a02b; 56 | --ctp-latte-teal: #179299; 57 | --ctp-latte-sky: #04a5e5; 58 | --ctp-latte-sapphire: #209fb5; 59 | --ctp-latte-blue: #1e66f5; 60 | --ctp-latte-lavender: #7287fd; 61 | --ctp-latte-text: #4c4f69; 62 | --ctp-latte-subtext1: #5c5f77; 63 | --ctp-latte-subtext0: #6c6f85; 64 | --ctp-latte-overlay2: #7c7f93; 65 | --ctp-latte-overlay1: #8c8fa1; 66 | --ctp-latte-overlay0: #9ca0b0; 67 | --ctp-latte-surface2: #acb0be; 68 | --ctp-latte-surface1: #bcc0cc; 69 | --ctp-latte-surface0: #ccd0da; 70 | --ctp-latte-base: #eff1f5; 71 | --ctp-latte-mantle: #e6e9ef; 72 | --ctp-latte-crust: #dce0e8; 73 | 74 | /* Color Palette */ 75 | --vp-c-gray-1: rgb(188, 192, 204); 76 | --vp-c-gray-2: rgb(204, 208, 218); 77 | --vp-c-gray-3: rgb(239, 241, 245); 78 | --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14); 79 | 80 | --vp-c-default-soft: #ccd0da; 81 | 82 | --vp-c-indigo-1: rgb(30, 102, 245); 83 | --vp-c-indigo-2: rgb(21, 99, 255); 84 | --vp-c-indigo-3: rgb(30, 66, 146); 85 | --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14); 86 | 87 | --vp-c-purple-1: rgb(136, 57, 239); 88 | --vp-c-purple-2: rgb(134, 46, 250); 89 | --vp-c-purple-3: rgb(83, 44, 143); 90 | --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14); 91 | 92 | --vp-c-green-1: rgb(64, 160, 43); 93 | --vp-c-green-2: rgb(58, 171, 33); 94 | --vp-c-green-3: rgb(47, 95, 45); 95 | --vp-c-green-soft: hsla(109, 58%, 20%, 0.14); 96 | 97 | --vp-c-yellow-1: rgb(223, 142, 29); 98 | --vp-c-yellow-2: rgb(236, 144, 16); 99 | --vp-c-yellow-3: rgb(127, 86, 38); 100 | --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14); 101 | 102 | --vp-c-red-1: rgb(210, 15, 57); 103 | --vp-c-red-2: rgb(222, 4, 51); 104 | --vp-c-red-3: rgb(120, 23, 52); 105 | --vp-c-red-soft: hsla(347, 87%, 24%, 0.14); 106 | 107 | /* Icons */ 108 | 109 | 110 | --vp-icon-copy: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3C/svg%3E'); 111 | --vp-icon-copied: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Cpath%20d%3D%22m9%2014%202%202%204-4%22/%3E%3C/svg%3E'); 112 | 113 | /* Code Highlighting */ 114 | --vp-code-line-highlight-color: hsla(232, 10%, 53%, 0.20); 115 | } 116 | .dark { 117 | /* Fix button text color */ 118 | --vp-button-brand-text: var(--ctp-mocha-crust) !important; 119 | --vp-button-brand-hover-text: var(--ctp-mocha-crust) !important; 120 | --vp-button-brand-active-text: var(--ctp-mocha-crust) !important; 121 | 122 | /* Fix badge background color */ 123 | --vp-badge-tip-bg: hsla(0, 59%, 88%, 0.20); 124 | 125 | /* Accent Color */ 126 | --vp-c-brand-1: #f2cdcd; 127 | --vp-c-brand-2: rgb(237, 185, 185); 128 | --vp-c-brand-3: #f2cdcd; 129 | 130 | /* Solid Colors and Sponsor Color */ 131 | --vp-c-white: #cdd6f4; 132 | --vp-c-black: #1e1e2e; 133 | --vp-c-sponsor: #f38ba8; 134 | 135 | /* Background Colors */ 136 | --vp-c-bg: #1e1e2e; 137 | --vp-c-bg-alt: #181825; 138 | --vp-c-bg-elv: #11111b; 139 | --vp-c-bg-soft: #181825; 140 | 141 | /* Border Colors */ 142 | --vp-c-border: #313244; 143 | --vp-c-divider: #313244; 144 | --vp-c-gutter: #45475a; 145 | 146 | /* Text Colors */ 147 | --vp-c-text-1: #cdd6f4; 148 | --vp-c-text-2: #bac2de; 149 | --vp-c-text-3: #a6adc8; 150 | 151 | /* Callout Colors */ 152 | --vp-c-tip-soft: hsla(115, 54%, 76%, 0.20); 153 | --vp-c-warning-soft: hsla(41, 86%, 83%, 0.20); 154 | --vp-c-danger-soft: hsla(343, 81%, 75%, 0.20); 155 | --vp-c-caution-soft: hsla(343, 81%, 75%, 0.20); 156 | --vp-c-important-soft: hsla(267, 84%, 81%, 0.20); 157 | 158 | --vp-custom-block-info-bg: hsla(189, 71%, 73%, 0.20); 159 | --vp-custom-block-note-bg: hsla(217, 92%, 76%, 0.20); 160 | --vp-custom-block-details-bg: #313244; 161 | 162 | /* Catppuccin Accents */ 163 | --ctp-mocha-rosewater: #f5e0dc; 164 | --ctp-mocha-flamingo: #f2cdcd; 165 | --ctp-mocha-pink: #f5c2e7; 166 | --ctp-mocha-mauve: #cba6f7; 167 | --ctp-mocha-red: #f38ba8; 168 | --ctp-mocha-maroon: #eba0ac; 169 | --ctp-mocha-peach: #fab387; 170 | --ctp-mocha-yellow: #f9e2af; 171 | --ctp-mocha-green: #a6e3a1; 172 | --ctp-mocha-teal: #94e2d5; 173 | --ctp-mocha-sky: #89dceb; 174 | --ctp-mocha-sapphire: #74c7ec; 175 | --ctp-mocha-blue: #89b4fa; 176 | --ctp-mocha-lavender: #b4befe; 177 | --ctp-mocha-text: #cdd6f4; 178 | --ctp-mocha-subtext1: #bac2de; 179 | --ctp-mocha-subtext0: #a6adc8; 180 | --ctp-mocha-overlay2: #9399b2; 181 | --ctp-mocha-overlay1: #7f849c; 182 | --ctp-mocha-overlay0: #6c7086; 183 | --ctp-mocha-surface2: #585b70; 184 | --ctp-mocha-surface1: #45475a; 185 | --ctp-mocha-surface0: #313244; 186 | --ctp-mocha-base: #1e1e2e; 187 | --ctp-mocha-mantle: #181825; 188 | --ctp-mocha-crust: #11111b; 189 | 190 | /* Color Palette */ 191 | --vp-c-gray-1: rgb(69, 71, 90); 192 | --vp-c-gray-2: rgb(49, 50, 68); 193 | --vp-c-gray-3: rgb(30, 30, 46); 194 | --vp-c-gray-soft: hsla(240, 21%, 45%, 0.14); 195 | 196 | --vp-c-default-soft: #313244; 197 | 198 | --vp-c-indigo-1: rgb(137, 180, 250); 199 | --vp-c-indigo-2: rgb(133, 180, 255); 200 | --vp-c-indigo-3: rgb(84, 105, 148); 201 | --vp-c-indigo-soft: hsla(217, 92%, 56%, 0.14); 202 | 203 | --vp-c-purple-1: rgb(203, 166, 247); 204 | --vp-c-purple-2: rgb(203, 162, 252); 205 | --vp-c-purple-3: rgb(117, 98, 147); 206 | --vp-c-purple-soft: hsla(267, 84%, 61%, 0.14); 207 | 208 | --vp-c-green-1: rgb(166, 227, 161); 209 | --vp-c-green-2: rgb(161, 233, 155); 210 | --vp-c-green-3: rgb(98, 129, 104); 211 | --vp-c-green-soft: hsla(115, 54%, 56%, 0.14); 212 | 213 | --vp-c-yellow-1: rgb(249, 226, 175); 214 | --vp-c-yellow-2: rgb(253, 227, 171); 215 | --vp-c-yellow-3: rgb(140, 128, 111); 216 | --vp-c-yellow-soft: hsla(41, 86%, 63%, 0.14); 217 | 218 | --vp-c-red-1: rgb(243, 139, 168); 219 | --vp-c-red-2: rgb(249, 133, 166); 220 | --vp-c-red-3: rgb(137, 85, 107); 221 | --vp-c-red-soft: hsla(343, 81%, 55%, 0.14); 222 | 223 | /* Icons */ 224 | 225 | 226 | --vp-icon-copy: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3C/svg%3E'); 227 | --vp-icon-copied: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Cpath%20d%3D%22m9%2014%202%202%204-4%22/%3E%3C/svg%3E'); 228 | 229 | /* Code Highlighting */ 230 | --vp-code-line-highlight-color: hsla(228, 17%, 64%, 0.20); 231 | } 232 | -------------------------------------------------------------------------------- /theme/mocha/green.css: -------------------------------------------------------------------------------- 1 | /* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */ 2 | /* https://catppuccin.com/palette */ 3 | 4 | 5 | :root { 6 | /* Fix badge background color */ 7 | --vp-badge-tip-bg: hsla(109, 58%, 40%, 0.20); 8 | 9 | /* Accent Color */ 10 | --vp-c-brand-1: #40a02b; 11 | --vp-c-brand-2: rgb(57, 140, 38); 12 | --vp-c-brand-3: #40a02b; 13 | 14 | /* Solid Colors and Sponsor Color */ 15 | --vp-c-white: #eff1f5; 16 | --vp-c-black: #4c4f69; 17 | --vp-c-sponsor: #d20f39; 18 | 19 | /* Background Colors */ 20 | --vp-c-bg: #eff1f5; 21 | --vp-c-bg-alt: #e6e9ef; 22 | --vp-c-bg-elv: #dce0e8; 23 | --vp-c-bg-soft: #e6e9ef; 24 | 25 | /* Border Colors */ 26 | --vp-c-border: #ccd0da; 27 | --vp-c-divider: #ccd0da; 28 | --vp-c-gutter: #bcc0cc; 29 | 30 | /* Text Colors */ 31 | --vp-c-text-1: #4c4f69; 32 | --vp-c-text-2: #5c5f77; 33 | --vp-c-text-3: #6c6f85; 34 | 35 | /* Callout Colors */ 36 | --vp-c-tip-soft: hsla(109, 58%, 40%, 0.20); 37 | --vp-c-warning-soft: hsla(35, 77%, 49%, 0.20); 38 | --vp-c-danger-soft: hsla(347, 87%, 44%, 0.20); 39 | --vp-c-caution-soft: hsla(347, 87%, 44%, 0.20); 40 | --vp-c-important-soft: hsla(266, 85%, 58%, 0.20); 41 | 42 | --vp-custom-block-info-bg: hsla(197, 96%, 46%, 0.20); 43 | --vp-custom-block-note-bg: hsla(220, 91%, 54%, 0.20); 44 | --vp-custom-block-details-bg: #ccd0da; 45 | 46 | /* Catppuccin Accents */ 47 | --ctp-latte-rosewater: #dc8a78; 48 | --ctp-latte-flamingo: #dd7878; 49 | --ctp-latte-pink: #ea76cb; 50 | --ctp-latte-mauve: #8839ef; 51 | --ctp-latte-red: #d20f39; 52 | --ctp-latte-maroon: #e64553; 53 | --ctp-latte-peach: #fe640b; 54 | --ctp-latte-yellow: #df8e1d; 55 | --ctp-latte-green: #40a02b; 56 | --ctp-latte-teal: #179299; 57 | --ctp-latte-sky: #04a5e5; 58 | --ctp-latte-sapphire: #209fb5; 59 | --ctp-latte-blue: #1e66f5; 60 | --ctp-latte-lavender: #7287fd; 61 | --ctp-latte-text: #4c4f69; 62 | --ctp-latte-subtext1: #5c5f77; 63 | --ctp-latte-subtext0: #6c6f85; 64 | --ctp-latte-overlay2: #7c7f93; 65 | --ctp-latte-overlay1: #8c8fa1; 66 | --ctp-latte-overlay0: #9ca0b0; 67 | --ctp-latte-surface2: #acb0be; 68 | --ctp-latte-surface1: #bcc0cc; 69 | --ctp-latte-surface0: #ccd0da; 70 | --ctp-latte-base: #eff1f5; 71 | --ctp-latte-mantle: #e6e9ef; 72 | --ctp-latte-crust: #dce0e8; 73 | 74 | /* Color Palette */ 75 | --vp-c-gray-1: rgb(188, 192, 204); 76 | --vp-c-gray-2: rgb(204, 208, 218); 77 | --vp-c-gray-3: rgb(239, 241, 245); 78 | --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14); 79 | 80 | --vp-c-default-soft: #ccd0da; 81 | 82 | --vp-c-indigo-1: rgb(30, 102, 245); 83 | --vp-c-indigo-2: rgb(21, 99, 255); 84 | --vp-c-indigo-3: rgb(30, 66, 146); 85 | --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14); 86 | 87 | --vp-c-purple-1: rgb(136, 57, 239); 88 | --vp-c-purple-2: rgb(134, 46, 250); 89 | --vp-c-purple-3: rgb(83, 44, 143); 90 | --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14); 91 | 92 | --vp-c-green-1: rgb(64, 160, 43); 93 | --vp-c-green-2: rgb(58, 171, 33); 94 | --vp-c-green-3: rgb(47, 95, 45); 95 | --vp-c-green-soft: hsla(109, 58%, 20%, 0.14); 96 | 97 | --vp-c-yellow-1: rgb(223, 142, 29); 98 | --vp-c-yellow-2: rgb(236, 144, 16); 99 | --vp-c-yellow-3: rgb(127, 86, 38); 100 | --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14); 101 | 102 | --vp-c-red-1: rgb(210, 15, 57); 103 | --vp-c-red-2: rgb(222, 4, 51); 104 | --vp-c-red-3: rgb(120, 23, 52); 105 | --vp-c-red-soft: hsla(347, 87%, 24%, 0.14); 106 | 107 | /* Icons */ 108 | 109 | 110 | --vp-icon-copy: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3C/svg%3E'); 111 | --vp-icon-copied: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Cpath%20d%3D%22m9%2014%202%202%204-4%22/%3E%3C/svg%3E'); 112 | 113 | /* Code Highlighting */ 114 | --vp-code-line-highlight-color: hsla(232, 10%, 53%, 0.20); 115 | } 116 | .dark { 117 | /* Fix button text color */ 118 | --vp-button-brand-text: var(--ctp-mocha-crust) !important; 119 | --vp-button-brand-hover-text: var(--ctp-mocha-crust) !important; 120 | --vp-button-brand-active-text: var(--ctp-mocha-crust) !important; 121 | 122 | /* Fix badge background color */ 123 | --vp-badge-tip-bg: hsla(115, 54%, 76%, 0.20); 124 | 125 | /* Accent Color */ 126 | --vp-c-brand-1: #a6e3a1; 127 | --vp-c-brand-2: rgb(148, 221, 141); 128 | --vp-c-brand-3: #a6e3a1; 129 | 130 | /* Solid Colors and Sponsor Color */ 131 | --vp-c-white: #cdd6f4; 132 | --vp-c-black: #1e1e2e; 133 | --vp-c-sponsor: #f38ba8; 134 | 135 | /* Background Colors */ 136 | --vp-c-bg: #1e1e2e; 137 | --vp-c-bg-alt: #181825; 138 | --vp-c-bg-elv: #11111b; 139 | --vp-c-bg-soft: #181825; 140 | 141 | /* Border Colors */ 142 | --vp-c-border: #313244; 143 | --vp-c-divider: #313244; 144 | --vp-c-gutter: #45475a; 145 | 146 | /* Text Colors */ 147 | --vp-c-text-1: #cdd6f4; 148 | --vp-c-text-2: #bac2de; 149 | --vp-c-text-3: #a6adc8; 150 | 151 | /* Callout Colors */ 152 | --vp-c-tip-soft: hsla(115, 54%, 76%, 0.20); 153 | --vp-c-warning-soft: hsla(41, 86%, 83%, 0.20); 154 | --vp-c-danger-soft: hsla(343, 81%, 75%, 0.20); 155 | --vp-c-caution-soft: hsla(343, 81%, 75%, 0.20); 156 | --vp-c-important-soft: hsla(267, 84%, 81%, 0.20); 157 | 158 | --vp-custom-block-info-bg: hsla(189, 71%, 73%, 0.20); 159 | --vp-custom-block-note-bg: hsla(217, 92%, 76%, 0.20); 160 | --vp-custom-block-details-bg: #313244; 161 | 162 | /* Catppuccin Accents */ 163 | --ctp-mocha-rosewater: #f5e0dc; 164 | --ctp-mocha-flamingo: #f2cdcd; 165 | --ctp-mocha-pink: #f5c2e7; 166 | --ctp-mocha-mauve: #cba6f7; 167 | --ctp-mocha-red: #f38ba8; 168 | --ctp-mocha-maroon: #eba0ac; 169 | --ctp-mocha-peach: #fab387; 170 | --ctp-mocha-yellow: #f9e2af; 171 | --ctp-mocha-green: #a6e3a1; 172 | --ctp-mocha-teal: #94e2d5; 173 | --ctp-mocha-sky: #89dceb; 174 | --ctp-mocha-sapphire: #74c7ec; 175 | --ctp-mocha-blue: #89b4fa; 176 | --ctp-mocha-lavender: #b4befe; 177 | --ctp-mocha-text: #cdd6f4; 178 | --ctp-mocha-subtext1: #bac2de; 179 | --ctp-mocha-subtext0: #a6adc8; 180 | --ctp-mocha-overlay2: #9399b2; 181 | --ctp-mocha-overlay1: #7f849c; 182 | --ctp-mocha-overlay0: #6c7086; 183 | --ctp-mocha-surface2: #585b70; 184 | --ctp-mocha-surface1: #45475a; 185 | --ctp-mocha-surface0: #313244; 186 | --ctp-mocha-base: #1e1e2e; 187 | --ctp-mocha-mantle: #181825; 188 | --ctp-mocha-crust: #11111b; 189 | 190 | /* Color Palette */ 191 | --vp-c-gray-1: rgb(69, 71, 90); 192 | --vp-c-gray-2: rgb(49, 50, 68); 193 | --vp-c-gray-3: rgb(30, 30, 46); 194 | --vp-c-gray-soft: hsla(240, 21%, 45%, 0.14); 195 | 196 | --vp-c-default-soft: #313244; 197 | 198 | --vp-c-indigo-1: rgb(137, 180, 250); 199 | --vp-c-indigo-2: rgb(133, 180, 255); 200 | --vp-c-indigo-3: rgb(84, 105, 148); 201 | --vp-c-indigo-soft: hsla(217, 92%, 56%, 0.14); 202 | 203 | --vp-c-purple-1: rgb(203, 166, 247); 204 | --vp-c-purple-2: rgb(203, 162, 252); 205 | --vp-c-purple-3: rgb(117, 98, 147); 206 | --vp-c-purple-soft: hsla(267, 84%, 61%, 0.14); 207 | 208 | --vp-c-green-1: rgb(166, 227, 161); 209 | --vp-c-green-2: rgb(161, 233, 155); 210 | --vp-c-green-3: rgb(98, 129, 104); 211 | --vp-c-green-soft: hsla(115, 54%, 56%, 0.14); 212 | 213 | --vp-c-yellow-1: rgb(249, 226, 175); 214 | --vp-c-yellow-2: rgb(253, 227, 171); 215 | --vp-c-yellow-3: rgb(140, 128, 111); 216 | --vp-c-yellow-soft: hsla(41, 86%, 63%, 0.14); 217 | 218 | --vp-c-red-1: rgb(243, 139, 168); 219 | --vp-c-red-2: rgb(249, 133, 166); 220 | --vp-c-red-3: rgb(137, 85, 107); 221 | --vp-c-red-soft: hsla(343, 81%, 55%, 0.14); 222 | 223 | /* Icons */ 224 | 225 | 226 | --vp-icon-copy: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3C/svg%3E'); 227 | --vp-icon-copied: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Cpath%20d%3D%22m9%2014%202%202%204-4%22/%3E%3C/svg%3E'); 228 | 229 | /* Code Highlighting */ 230 | --vp-code-line-highlight-color: hsla(228, 17%, 64%, 0.20); 231 | } 232 | -------------------------------------------------------------------------------- /theme/mocha/maroon.css: -------------------------------------------------------------------------------- 1 | /* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */ 2 | /* https://catppuccin.com/palette */ 3 | 4 | 5 | :root { 6 | /* Fix badge background color */ 7 | --vp-badge-tip-bg: hsla(355, 76%, 59%, 0.20); 8 | 9 | /* Accent Color */ 10 | --vp-c-brand-1: #e64553; 11 | --vp-c-brand-2: rgb(227, 47, 62); 12 | --vp-c-brand-3: #e64553; 13 | 14 | /* Solid Colors and Sponsor Color */ 15 | --vp-c-white: #eff1f5; 16 | --vp-c-black: #4c4f69; 17 | --vp-c-sponsor: #d20f39; 18 | 19 | /* Background Colors */ 20 | --vp-c-bg: #eff1f5; 21 | --vp-c-bg-alt: #e6e9ef; 22 | --vp-c-bg-elv: #dce0e8; 23 | --vp-c-bg-soft: #e6e9ef; 24 | 25 | /* Border Colors */ 26 | --vp-c-border: #ccd0da; 27 | --vp-c-divider: #ccd0da; 28 | --vp-c-gutter: #bcc0cc; 29 | 30 | /* Text Colors */ 31 | --vp-c-text-1: #4c4f69; 32 | --vp-c-text-2: #5c5f77; 33 | --vp-c-text-3: #6c6f85; 34 | 35 | /* Callout Colors */ 36 | --vp-c-tip-soft: hsla(109, 58%, 40%, 0.20); 37 | --vp-c-warning-soft: hsla(35, 77%, 49%, 0.20); 38 | --vp-c-danger-soft: hsla(347, 87%, 44%, 0.20); 39 | --vp-c-caution-soft: hsla(347, 87%, 44%, 0.20); 40 | --vp-c-important-soft: hsla(266, 85%, 58%, 0.20); 41 | 42 | --vp-custom-block-info-bg: hsla(197, 96%, 46%, 0.20); 43 | --vp-custom-block-note-bg: hsla(220, 91%, 54%, 0.20); 44 | --vp-custom-block-details-bg: #ccd0da; 45 | 46 | /* Catppuccin Accents */ 47 | --ctp-latte-rosewater: #dc8a78; 48 | --ctp-latte-flamingo: #dd7878; 49 | --ctp-latte-pink: #ea76cb; 50 | --ctp-latte-mauve: #8839ef; 51 | --ctp-latte-red: #d20f39; 52 | --ctp-latte-maroon: #e64553; 53 | --ctp-latte-peach: #fe640b; 54 | --ctp-latte-yellow: #df8e1d; 55 | --ctp-latte-green: #40a02b; 56 | --ctp-latte-teal: #179299; 57 | --ctp-latte-sky: #04a5e5; 58 | --ctp-latte-sapphire: #209fb5; 59 | --ctp-latte-blue: #1e66f5; 60 | --ctp-latte-lavender: #7287fd; 61 | --ctp-latte-text: #4c4f69; 62 | --ctp-latte-subtext1: #5c5f77; 63 | --ctp-latte-subtext0: #6c6f85; 64 | --ctp-latte-overlay2: #7c7f93; 65 | --ctp-latte-overlay1: #8c8fa1; 66 | --ctp-latte-overlay0: #9ca0b0; 67 | --ctp-latte-surface2: #acb0be; 68 | --ctp-latte-surface1: #bcc0cc; 69 | --ctp-latte-surface0: #ccd0da; 70 | --ctp-latte-base: #eff1f5; 71 | --ctp-latte-mantle: #e6e9ef; 72 | --ctp-latte-crust: #dce0e8; 73 | 74 | /* Color Palette */ 75 | --vp-c-gray-1: rgb(188, 192, 204); 76 | --vp-c-gray-2: rgb(204, 208, 218); 77 | --vp-c-gray-3: rgb(239, 241, 245); 78 | --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14); 79 | 80 | --vp-c-default-soft: #ccd0da; 81 | 82 | --vp-c-indigo-1: rgb(30, 102, 245); 83 | --vp-c-indigo-2: rgb(21, 99, 255); 84 | --vp-c-indigo-3: rgb(30, 66, 146); 85 | --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14); 86 | 87 | --vp-c-purple-1: rgb(136, 57, 239); 88 | --vp-c-purple-2: rgb(134, 46, 250); 89 | --vp-c-purple-3: rgb(83, 44, 143); 90 | --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14); 91 | 92 | --vp-c-green-1: rgb(64, 160, 43); 93 | --vp-c-green-2: rgb(58, 171, 33); 94 | --vp-c-green-3: rgb(47, 95, 45); 95 | --vp-c-green-soft: hsla(109, 58%, 20%, 0.14); 96 | 97 | --vp-c-yellow-1: rgb(223, 142, 29); 98 | --vp-c-yellow-2: rgb(236, 144, 16); 99 | --vp-c-yellow-3: rgb(127, 86, 38); 100 | --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14); 101 | 102 | --vp-c-red-1: rgb(210, 15, 57); 103 | --vp-c-red-2: rgb(222, 4, 51); 104 | --vp-c-red-3: rgb(120, 23, 52); 105 | --vp-c-red-soft: hsla(347, 87%, 24%, 0.14); 106 | 107 | /* Icons */ 108 | 109 | 110 | --vp-icon-copy: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3C/svg%3E'); 111 | --vp-icon-copied: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Cpath%20d%3D%22m9%2014%202%202%204-4%22/%3E%3C/svg%3E'); 112 | 113 | /* Code Highlighting */ 114 | --vp-code-line-highlight-color: hsla(232, 10%, 53%, 0.20); 115 | } 116 | .dark { 117 | /* Fix button text color */ 118 | --vp-button-brand-text: var(--ctp-mocha-crust) !important; 119 | --vp-button-brand-hover-text: var(--ctp-mocha-crust) !important; 120 | --vp-button-brand-active-text: var(--ctp-mocha-crust) !important; 121 | 122 | /* Fix badge background color */ 123 | --vp-badge-tip-bg: hsla(350, 65%, 78%, 0.20); 124 | 125 | /* Accent Color */ 126 | --vp-c-brand-1: #eba0ac; 127 | --vp-c-brand-2: rgb(231, 139, 155); 128 | --vp-c-brand-3: #eba0ac; 129 | 130 | /* Solid Colors and Sponsor Color */ 131 | --vp-c-white: #cdd6f4; 132 | --vp-c-black: #1e1e2e; 133 | --vp-c-sponsor: #f38ba8; 134 | 135 | /* Background Colors */ 136 | --vp-c-bg: #1e1e2e; 137 | --vp-c-bg-alt: #181825; 138 | --vp-c-bg-elv: #11111b; 139 | --vp-c-bg-soft: #181825; 140 | 141 | /* Border Colors */ 142 | --vp-c-border: #313244; 143 | --vp-c-divider: #313244; 144 | --vp-c-gutter: #45475a; 145 | 146 | /* Text Colors */ 147 | --vp-c-text-1: #cdd6f4; 148 | --vp-c-text-2: #bac2de; 149 | --vp-c-text-3: #a6adc8; 150 | 151 | /* Callout Colors */ 152 | --vp-c-tip-soft: hsla(115, 54%, 76%, 0.20); 153 | --vp-c-warning-soft: hsla(41, 86%, 83%, 0.20); 154 | --vp-c-danger-soft: hsla(343, 81%, 75%, 0.20); 155 | --vp-c-caution-soft: hsla(343, 81%, 75%, 0.20); 156 | --vp-c-important-soft: hsla(267, 84%, 81%, 0.20); 157 | 158 | --vp-custom-block-info-bg: hsla(189, 71%, 73%, 0.20); 159 | --vp-custom-block-note-bg: hsla(217, 92%, 76%, 0.20); 160 | --vp-custom-block-details-bg: #313244; 161 | 162 | /* Catppuccin Accents */ 163 | --ctp-mocha-rosewater: #f5e0dc; 164 | --ctp-mocha-flamingo: #f2cdcd; 165 | --ctp-mocha-pink: #f5c2e7; 166 | --ctp-mocha-mauve: #cba6f7; 167 | --ctp-mocha-red: #f38ba8; 168 | --ctp-mocha-maroon: #eba0ac; 169 | --ctp-mocha-peach: #fab387; 170 | --ctp-mocha-yellow: #f9e2af; 171 | --ctp-mocha-green: #a6e3a1; 172 | --ctp-mocha-teal: #94e2d5; 173 | --ctp-mocha-sky: #89dceb; 174 | --ctp-mocha-sapphire: #74c7ec; 175 | --ctp-mocha-blue: #89b4fa; 176 | --ctp-mocha-lavender: #b4befe; 177 | --ctp-mocha-text: #cdd6f4; 178 | --ctp-mocha-subtext1: #bac2de; 179 | --ctp-mocha-subtext0: #a6adc8; 180 | --ctp-mocha-overlay2: #9399b2; 181 | --ctp-mocha-overlay1: #7f849c; 182 | --ctp-mocha-overlay0: #6c7086; 183 | --ctp-mocha-surface2: #585b70; 184 | --ctp-mocha-surface1: #45475a; 185 | --ctp-mocha-surface0: #313244; 186 | --ctp-mocha-base: #1e1e2e; 187 | --ctp-mocha-mantle: #181825; 188 | --ctp-mocha-crust: #11111b; 189 | 190 | /* Color Palette */ 191 | --vp-c-gray-1: rgb(69, 71, 90); 192 | --vp-c-gray-2: rgb(49, 50, 68); 193 | --vp-c-gray-3: rgb(30, 30, 46); 194 | --vp-c-gray-soft: hsla(240, 21%, 45%, 0.14); 195 | 196 | --vp-c-default-soft: #313244; 197 | 198 | --vp-c-indigo-1: rgb(137, 180, 250); 199 | --vp-c-indigo-2: rgb(133, 180, 255); 200 | --vp-c-indigo-3: rgb(84, 105, 148); 201 | --vp-c-indigo-soft: hsla(217, 92%, 56%, 0.14); 202 | 203 | --vp-c-purple-1: rgb(203, 166, 247); 204 | --vp-c-purple-2: rgb(203, 162, 252); 205 | --vp-c-purple-3: rgb(117, 98, 147); 206 | --vp-c-purple-soft: hsla(267, 84%, 61%, 0.14); 207 | 208 | --vp-c-green-1: rgb(166, 227, 161); 209 | --vp-c-green-2: rgb(161, 233, 155); 210 | --vp-c-green-3: rgb(98, 129, 104); 211 | --vp-c-green-soft: hsla(115, 54%, 56%, 0.14); 212 | 213 | --vp-c-yellow-1: rgb(249, 226, 175); 214 | --vp-c-yellow-2: rgb(253, 227, 171); 215 | --vp-c-yellow-3: rgb(140, 128, 111); 216 | --vp-c-yellow-soft: hsla(41, 86%, 63%, 0.14); 217 | 218 | --vp-c-red-1: rgb(243, 139, 168); 219 | --vp-c-red-2: rgb(249, 133, 166); 220 | --vp-c-red-3: rgb(137, 85, 107); 221 | --vp-c-red-soft: hsla(343, 81%, 55%, 0.14); 222 | 223 | /* Icons */ 224 | 225 | 226 | --vp-icon-copy: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3C/svg%3E'); 227 | --vp-icon-copied: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Cpath%20d%3D%22m9%2014%202%202%204-4%22/%3E%3C/svg%3E'); 228 | 229 | /* Code Highlighting */ 230 | --vp-code-line-highlight-color: hsla(228, 17%, 64%, 0.20); 231 | } 232 | -------------------------------------------------------------------------------- /theme/mocha/mauve.css: -------------------------------------------------------------------------------- 1 | /* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */ 2 | /* https://catppuccin.com/palette */ 3 | 4 | 5 | :root { 6 | /* Fix badge background color */ 7 | --vp-badge-tip-bg: hsla(266, 85%, 58%, 0.20); 8 | 9 | /* Accent Color */ 10 | --vp-c-brand-1: #8839ef; 11 | --vp-c-brand-2: rgb(121, 33, 237); 12 | --vp-c-brand-3: #8839ef; 13 | 14 | /* Solid Colors and Sponsor Color */ 15 | --vp-c-white: #eff1f5; 16 | --vp-c-black: #4c4f69; 17 | --vp-c-sponsor: #d20f39; 18 | 19 | /* Background Colors */ 20 | --vp-c-bg: #eff1f5; 21 | --vp-c-bg-alt: #e6e9ef; 22 | --vp-c-bg-elv: #dce0e8; 23 | --vp-c-bg-soft: #e6e9ef; 24 | 25 | /* Border Colors */ 26 | --vp-c-border: #ccd0da; 27 | --vp-c-divider: #ccd0da; 28 | --vp-c-gutter: #bcc0cc; 29 | 30 | /* Text Colors */ 31 | --vp-c-text-1: #4c4f69; 32 | --vp-c-text-2: #5c5f77; 33 | --vp-c-text-3: #6c6f85; 34 | 35 | /* Callout Colors */ 36 | --vp-c-tip-soft: hsla(109, 58%, 40%, 0.20); 37 | --vp-c-warning-soft: hsla(35, 77%, 49%, 0.20); 38 | --vp-c-danger-soft: hsla(347, 87%, 44%, 0.20); 39 | --vp-c-caution-soft: hsla(347, 87%, 44%, 0.20); 40 | --vp-c-important-soft: hsla(266, 85%, 58%, 0.20); 41 | 42 | --vp-custom-block-info-bg: hsla(197, 96%, 46%, 0.20); 43 | --vp-custom-block-note-bg: hsla(220, 91%, 54%, 0.20); 44 | --vp-custom-block-details-bg: #ccd0da; 45 | 46 | /* Catppuccin Accents */ 47 | --ctp-latte-rosewater: #dc8a78; 48 | --ctp-latte-flamingo: #dd7878; 49 | --ctp-latte-pink: #ea76cb; 50 | --ctp-latte-mauve: #8839ef; 51 | --ctp-latte-red: #d20f39; 52 | --ctp-latte-maroon: #e64553; 53 | --ctp-latte-peach: #fe640b; 54 | --ctp-latte-yellow: #df8e1d; 55 | --ctp-latte-green: #40a02b; 56 | --ctp-latte-teal: #179299; 57 | --ctp-latte-sky: #04a5e5; 58 | --ctp-latte-sapphire: #209fb5; 59 | --ctp-latte-blue: #1e66f5; 60 | --ctp-latte-lavender: #7287fd; 61 | --ctp-latte-text: #4c4f69; 62 | --ctp-latte-subtext1: #5c5f77; 63 | --ctp-latte-subtext0: #6c6f85; 64 | --ctp-latte-overlay2: #7c7f93; 65 | --ctp-latte-overlay1: #8c8fa1; 66 | --ctp-latte-overlay0: #9ca0b0; 67 | --ctp-latte-surface2: #acb0be; 68 | --ctp-latte-surface1: #bcc0cc; 69 | --ctp-latte-surface0: #ccd0da; 70 | --ctp-latte-base: #eff1f5; 71 | --ctp-latte-mantle: #e6e9ef; 72 | --ctp-latte-crust: #dce0e8; 73 | 74 | /* Color Palette */ 75 | --vp-c-gray-1: rgb(188, 192, 204); 76 | --vp-c-gray-2: rgb(204, 208, 218); 77 | --vp-c-gray-3: rgb(239, 241, 245); 78 | --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14); 79 | 80 | --vp-c-default-soft: #ccd0da; 81 | 82 | --vp-c-indigo-1: rgb(30, 102, 245); 83 | --vp-c-indigo-2: rgb(21, 99, 255); 84 | --vp-c-indigo-3: rgb(30, 66, 146); 85 | --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14); 86 | 87 | --vp-c-purple-1: rgb(136, 57, 239); 88 | --vp-c-purple-2: rgb(134, 46, 250); 89 | --vp-c-purple-3: rgb(83, 44, 143); 90 | --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14); 91 | 92 | --vp-c-green-1: rgb(64, 160, 43); 93 | --vp-c-green-2: rgb(58, 171, 33); 94 | --vp-c-green-3: rgb(47, 95, 45); 95 | --vp-c-green-soft: hsla(109, 58%, 20%, 0.14); 96 | 97 | --vp-c-yellow-1: rgb(223, 142, 29); 98 | --vp-c-yellow-2: rgb(236, 144, 16); 99 | --vp-c-yellow-3: rgb(127, 86, 38); 100 | --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14); 101 | 102 | --vp-c-red-1: rgb(210, 15, 57); 103 | --vp-c-red-2: rgb(222, 4, 51); 104 | --vp-c-red-3: rgb(120, 23, 52); 105 | --vp-c-red-soft: hsla(347, 87%, 24%, 0.14); 106 | 107 | /* Icons */ 108 | 109 | 110 | --vp-icon-copy: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3C/svg%3E'); 111 | --vp-icon-copied: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Cpath%20d%3D%22m9%2014%202%202%204-4%22/%3E%3C/svg%3E'); 112 | 113 | /* Code Highlighting */ 114 | --vp-code-line-highlight-color: hsla(232, 10%, 53%, 0.20); 115 | } 116 | .dark { 117 | /* Fix button text color */ 118 | --vp-button-brand-text: var(--ctp-mocha-crust) !important; 119 | --vp-button-brand-hover-text: var(--ctp-mocha-crust) !important; 120 | --vp-button-brand-active-text: var(--ctp-mocha-crust) !important; 121 | 122 | /* Fix badge background color */ 123 | --vp-badge-tip-bg: hsla(267, 84%, 81%, 0.20); 124 | 125 | /* Accent Color */ 126 | --vp-c-brand-1: #cba6f7; 127 | --vp-c-brand-2: rgb(189, 143, 245); 128 | --vp-c-brand-3: #cba6f7; 129 | 130 | /* Solid Colors and Sponsor Color */ 131 | --vp-c-white: #cdd6f4; 132 | --vp-c-black: #1e1e2e; 133 | --vp-c-sponsor: #f38ba8; 134 | 135 | /* Background Colors */ 136 | --vp-c-bg: #1e1e2e; 137 | --vp-c-bg-alt: #181825; 138 | --vp-c-bg-elv: #11111b; 139 | --vp-c-bg-soft: #181825; 140 | 141 | /* Border Colors */ 142 | --vp-c-border: #313244; 143 | --vp-c-divider: #313244; 144 | --vp-c-gutter: #45475a; 145 | 146 | /* Text Colors */ 147 | --vp-c-text-1: #cdd6f4; 148 | --vp-c-text-2: #bac2de; 149 | --vp-c-text-3: #a6adc8; 150 | 151 | /* Callout Colors */ 152 | --vp-c-tip-soft: hsla(115, 54%, 76%, 0.20); 153 | --vp-c-warning-soft: hsla(41, 86%, 83%, 0.20); 154 | --vp-c-danger-soft: hsla(343, 81%, 75%, 0.20); 155 | --vp-c-caution-soft: hsla(343, 81%, 75%, 0.20); 156 | --vp-c-important-soft: hsla(267, 84%, 81%, 0.20); 157 | 158 | --vp-custom-block-info-bg: hsla(189, 71%, 73%, 0.20); 159 | --vp-custom-block-note-bg: hsla(217, 92%, 76%, 0.20); 160 | --vp-custom-block-details-bg: #313244; 161 | 162 | /* Catppuccin Accents */ 163 | --ctp-mocha-rosewater: #f5e0dc; 164 | --ctp-mocha-flamingo: #f2cdcd; 165 | --ctp-mocha-pink: #f5c2e7; 166 | --ctp-mocha-mauve: #cba6f7; 167 | --ctp-mocha-red: #f38ba8; 168 | --ctp-mocha-maroon: #eba0ac; 169 | --ctp-mocha-peach: #fab387; 170 | --ctp-mocha-yellow: #f9e2af; 171 | --ctp-mocha-green: #a6e3a1; 172 | --ctp-mocha-teal: #94e2d5; 173 | --ctp-mocha-sky: #89dceb; 174 | --ctp-mocha-sapphire: #74c7ec; 175 | --ctp-mocha-blue: #89b4fa; 176 | --ctp-mocha-lavender: #b4befe; 177 | --ctp-mocha-text: #cdd6f4; 178 | --ctp-mocha-subtext1: #bac2de; 179 | --ctp-mocha-subtext0: #a6adc8; 180 | --ctp-mocha-overlay2: #9399b2; 181 | --ctp-mocha-overlay1: #7f849c; 182 | --ctp-mocha-overlay0: #6c7086; 183 | --ctp-mocha-surface2: #585b70; 184 | --ctp-mocha-surface1: #45475a; 185 | --ctp-mocha-surface0: #313244; 186 | --ctp-mocha-base: #1e1e2e; 187 | --ctp-mocha-mantle: #181825; 188 | --ctp-mocha-crust: #11111b; 189 | 190 | /* Color Palette */ 191 | --vp-c-gray-1: rgb(69, 71, 90); 192 | --vp-c-gray-2: rgb(49, 50, 68); 193 | --vp-c-gray-3: rgb(30, 30, 46); 194 | --vp-c-gray-soft: hsla(240, 21%, 45%, 0.14); 195 | 196 | --vp-c-default-soft: #313244; 197 | 198 | --vp-c-indigo-1: rgb(137, 180, 250); 199 | --vp-c-indigo-2: rgb(133, 180, 255); 200 | --vp-c-indigo-3: rgb(84, 105, 148); 201 | --vp-c-indigo-soft: hsla(217, 92%, 56%, 0.14); 202 | 203 | --vp-c-purple-1: rgb(203, 166, 247); 204 | --vp-c-purple-2: rgb(203, 162, 252); 205 | --vp-c-purple-3: rgb(117, 98, 147); 206 | --vp-c-purple-soft: hsla(267, 84%, 61%, 0.14); 207 | 208 | --vp-c-green-1: rgb(166, 227, 161); 209 | --vp-c-green-2: rgb(161, 233, 155); 210 | --vp-c-green-3: rgb(98, 129, 104); 211 | --vp-c-green-soft: hsla(115, 54%, 56%, 0.14); 212 | 213 | --vp-c-yellow-1: rgb(249, 226, 175); 214 | --vp-c-yellow-2: rgb(253, 227, 171); 215 | --vp-c-yellow-3: rgb(140, 128, 111); 216 | --vp-c-yellow-soft: hsla(41, 86%, 63%, 0.14); 217 | 218 | --vp-c-red-1: rgb(243, 139, 168); 219 | --vp-c-red-2: rgb(249, 133, 166); 220 | --vp-c-red-3: rgb(137, 85, 107); 221 | --vp-c-red-soft: hsla(343, 81%, 55%, 0.14); 222 | 223 | /* Icons */ 224 | 225 | 226 | --vp-icon-copy: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3C/svg%3E'); 227 | --vp-icon-copied: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Cpath%20d%3D%22m9%2014%202%202%204-4%22/%3E%3C/svg%3E'); 228 | 229 | /* Code Highlighting */ 230 | --vp-code-line-highlight-color: hsla(228, 17%, 64%, 0.20); 231 | } 232 | -------------------------------------------------------------------------------- /theme/mocha/pink.css: -------------------------------------------------------------------------------- 1 | /* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */ 2 | /* https://catppuccin.com/palette */ 3 | 4 | 5 | :root { 6 | /* Fix badge background color */ 7 | --vp-badge-tip-bg: hsla(316, 73%, 69%, 0.20); 8 | 9 | /* Accent Color */ 10 | --vp-c-brand-1: #ea76cb; 11 | --vp-c-brand-2: rgb(230, 96, 194); 12 | --vp-c-brand-3: #ea76cb; 13 | 14 | /* Solid Colors and Sponsor Color */ 15 | --vp-c-white: #eff1f5; 16 | --vp-c-black: #4c4f69; 17 | --vp-c-sponsor: #d20f39; 18 | 19 | /* Background Colors */ 20 | --vp-c-bg: #eff1f5; 21 | --vp-c-bg-alt: #e6e9ef; 22 | --vp-c-bg-elv: #dce0e8; 23 | --vp-c-bg-soft: #e6e9ef; 24 | 25 | /* Border Colors */ 26 | --vp-c-border: #ccd0da; 27 | --vp-c-divider: #ccd0da; 28 | --vp-c-gutter: #bcc0cc; 29 | 30 | /* Text Colors */ 31 | --vp-c-text-1: #4c4f69; 32 | --vp-c-text-2: #5c5f77; 33 | --vp-c-text-3: #6c6f85; 34 | 35 | /* Callout Colors */ 36 | --vp-c-tip-soft: hsla(109, 58%, 40%, 0.20); 37 | --vp-c-warning-soft: hsla(35, 77%, 49%, 0.20); 38 | --vp-c-danger-soft: hsla(347, 87%, 44%, 0.20); 39 | --vp-c-caution-soft: hsla(347, 87%, 44%, 0.20); 40 | --vp-c-important-soft: hsla(266, 85%, 58%, 0.20); 41 | 42 | --vp-custom-block-info-bg: hsla(197, 96%, 46%, 0.20); 43 | --vp-custom-block-note-bg: hsla(220, 91%, 54%, 0.20); 44 | --vp-custom-block-details-bg: #ccd0da; 45 | 46 | /* Catppuccin Accents */ 47 | --ctp-latte-rosewater: #dc8a78; 48 | --ctp-latte-flamingo: #dd7878; 49 | --ctp-latte-pink: #ea76cb; 50 | --ctp-latte-mauve: #8839ef; 51 | --ctp-latte-red: #d20f39; 52 | --ctp-latte-maroon: #e64553; 53 | --ctp-latte-peach: #fe640b; 54 | --ctp-latte-yellow: #df8e1d; 55 | --ctp-latte-green: #40a02b; 56 | --ctp-latte-teal: #179299; 57 | --ctp-latte-sky: #04a5e5; 58 | --ctp-latte-sapphire: #209fb5; 59 | --ctp-latte-blue: #1e66f5; 60 | --ctp-latte-lavender: #7287fd; 61 | --ctp-latte-text: #4c4f69; 62 | --ctp-latte-subtext1: #5c5f77; 63 | --ctp-latte-subtext0: #6c6f85; 64 | --ctp-latte-overlay2: #7c7f93; 65 | --ctp-latte-overlay1: #8c8fa1; 66 | --ctp-latte-overlay0: #9ca0b0; 67 | --ctp-latte-surface2: #acb0be; 68 | --ctp-latte-surface1: #bcc0cc; 69 | --ctp-latte-surface0: #ccd0da; 70 | --ctp-latte-base: #eff1f5; 71 | --ctp-latte-mantle: #e6e9ef; 72 | --ctp-latte-crust: #dce0e8; 73 | 74 | /* Color Palette */ 75 | --vp-c-gray-1: rgb(188, 192, 204); 76 | --vp-c-gray-2: rgb(204, 208, 218); 77 | --vp-c-gray-3: rgb(239, 241, 245); 78 | --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14); 79 | 80 | --vp-c-default-soft: #ccd0da; 81 | 82 | --vp-c-indigo-1: rgb(30, 102, 245); 83 | --vp-c-indigo-2: rgb(21, 99, 255); 84 | --vp-c-indigo-3: rgb(30, 66, 146); 85 | --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14); 86 | 87 | --vp-c-purple-1: rgb(136, 57, 239); 88 | --vp-c-purple-2: rgb(134, 46, 250); 89 | --vp-c-purple-3: rgb(83, 44, 143); 90 | --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14); 91 | 92 | --vp-c-green-1: rgb(64, 160, 43); 93 | --vp-c-green-2: rgb(58, 171, 33); 94 | --vp-c-green-3: rgb(47, 95, 45); 95 | --vp-c-green-soft: hsla(109, 58%, 20%, 0.14); 96 | 97 | --vp-c-yellow-1: rgb(223, 142, 29); 98 | --vp-c-yellow-2: rgb(236, 144, 16); 99 | --vp-c-yellow-3: rgb(127, 86, 38); 100 | --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14); 101 | 102 | --vp-c-red-1: rgb(210, 15, 57); 103 | --vp-c-red-2: rgb(222, 4, 51); 104 | --vp-c-red-3: rgb(120, 23, 52); 105 | --vp-c-red-soft: hsla(347, 87%, 24%, 0.14); 106 | 107 | /* Icons */ 108 | 109 | 110 | --vp-icon-copy: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3C/svg%3E'); 111 | --vp-icon-copied: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Cpath%20d%3D%22m9%2014%202%202%204-4%22/%3E%3C/svg%3E'); 112 | 113 | /* Code Highlighting */ 114 | --vp-code-line-highlight-color: hsla(232, 10%, 53%, 0.20); 115 | } 116 | .dark { 117 | /* Fix button text color */ 118 | --vp-button-brand-text: var(--ctp-mocha-crust) !important; 119 | --vp-button-brand-hover-text: var(--ctp-mocha-crust) !important; 120 | --vp-button-brand-active-text: var(--ctp-mocha-crust) !important; 121 | 122 | /* Fix badge background color */ 123 | --vp-badge-tip-bg: hsla(316, 72%, 86%, 0.20); 124 | 125 | /* Accent Color */ 126 | --vp-c-brand-1: #f5c2e7; 127 | --vp-c-brand-2: rgb(241, 173, 223); 128 | --vp-c-brand-3: #f5c2e7; 129 | 130 | /* Solid Colors and Sponsor Color */ 131 | --vp-c-white: #cdd6f4; 132 | --vp-c-black: #1e1e2e; 133 | --vp-c-sponsor: #f38ba8; 134 | 135 | /* Background Colors */ 136 | --vp-c-bg: #1e1e2e; 137 | --vp-c-bg-alt: #181825; 138 | --vp-c-bg-elv: #11111b; 139 | --vp-c-bg-soft: #181825; 140 | 141 | /* Border Colors */ 142 | --vp-c-border: #313244; 143 | --vp-c-divider: #313244; 144 | --vp-c-gutter: #45475a; 145 | 146 | /* Text Colors */ 147 | --vp-c-text-1: #cdd6f4; 148 | --vp-c-text-2: #bac2de; 149 | --vp-c-text-3: #a6adc8; 150 | 151 | /* Callout Colors */ 152 | --vp-c-tip-soft: hsla(115, 54%, 76%, 0.20); 153 | --vp-c-warning-soft: hsla(41, 86%, 83%, 0.20); 154 | --vp-c-danger-soft: hsla(343, 81%, 75%, 0.20); 155 | --vp-c-caution-soft: hsla(343, 81%, 75%, 0.20); 156 | --vp-c-important-soft: hsla(267, 84%, 81%, 0.20); 157 | 158 | --vp-custom-block-info-bg: hsla(189, 71%, 73%, 0.20); 159 | --vp-custom-block-note-bg: hsla(217, 92%, 76%, 0.20); 160 | --vp-custom-block-details-bg: #313244; 161 | 162 | /* Catppuccin Accents */ 163 | --ctp-mocha-rosewater: #f5e0dc; 164 | --ctp-mocha-flamingo: #f2cdcd; 165 | --ctp-mocha-pink: #f5c2e7; 166 | --ctp-mocha-mauve: #cba6f7; 167 | --ctp-mocha-red: #f38ba8; 168 | --ctp-mocha-maroon: #eba0ac; 169 | --ctp-mocha-peach: #fab387; 170 | --ctp-mocha-yellow: #f9e2af; 171 | --ctp-mocha-green: #a6e3a1; 172 | --ctp-mocha-teal: #94e2d5; 173 | --ctp-mocha-sky: #89dceb; 174 | --ctp-mocha-sapphire: #74c7ec; 175 | --ctp-mocha-blue: #89b4fa; 176 | --ctp-mocha-lavender: #b4befe; 177 | --ctp-mocha-text: #cdd6f4; 178 | --ctp-mocha-subtext1: #bac2de; 179 | --ctp-mocha-subtext0: #a6adc8; 180 | --ctp-mocha-overlay2: #9399b2; 181 | --ctp-mocha-overlay1: #7f849c; 182 | --ctp-mocha-overlay0: #6c7086; 183 | --ctp-mocha-surface2: #585b70; 184 | --ctp-mocha-surface1: #45475a; 185 | --ctp-mocha-surface0: #313244; 186 | --ctp-mocha-base: #1e1e2e; 187 | --ctp-mocha-mantle: #181825; 188 | --ctp-mocha-crust: #11111b; 189 | 190 | /* Color Palette */ 191 | --vp-c-gray-1: rgb(69, 71, 90); 192 | --vp-c-gray-2: rgb(49, 50, 68); 193 | --vp-c-gray-3: rgb(30, 30, 46); 194 | --vp-c-gray-soft: hsla(240, 21%, 45%, 0.14); 195 | 196 | --vp-c-default-soft: #313244; 197 | 198 | --vp-c-indigo-1: rgb(137, 180, 250); 199 | --vp-c-indigo-2: rgb(133, 180, 255); 200 | --vp-c-indigo-3: rgb(84, 105, 148); 201 | --vp-c-indigo-soft: hsla(217, 92%, 56%, 0.14); 202 | 203 | --vp-c-purple-1: rgb(203, 166, 247); 204 | --vp-c-purple-2: rgb(203, 162, 252); 205 | --vp-c-purple-3: rgb(117, 98, 147); 206 | --vp-c-purple-soft: hsla(267, 84%, 61%, 0.14); 207 | 208 | --vp-c-green-1: rgb(166, 227, 161); 209 | --vp-c-green-2: rgb(161, 233, 155); 210 | --vp-c-green-3: rgb(98, 129, 104); 211 | --vp-c-green-soft: hsla(115, 54%, 56%, 0.14); 212 | 213 | --vp-c-yellow-1: rgb(249, 226, 175); 214 | --vp-c-yellow-2: rgb(253, 227, 171); 215 | --vp-c-yellow-3: rgb(140, 128, 111); 216 | --vp-c-yellow-soft: hsla(41, 86%, 63%, 0.14); 217 | 218 | --vp-c-red-1: rgb(243, 139, 168); 219 | --vp-c-red-2: rgb(249, 133, 166); 220 | --vp-c-red-3: rgb(137, 85, 107); 221 | --vp-c-red-soft: hsla(343, 81%, 55%, 0.14); 222 | 223 | /* Icons */ 224 | 225 | 226 | --vp-icon-copy: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3C/svg%3E'); 227 | --vp-icon-copied: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Cpath%20d%3D%22m9%2014%202%202%204-4%22/%3E%3C/svg%3E'); 228 | 229 | /* Code Highlighting */ 230 | --vp-code-line-highlight-color: hsla(228, 17%, 64%, 0.20); 231 | } 232 | -------------------------------------------------------------------------------- /theme/mocha/red.css: -------------------------------------------------------------------------------- 1 | /* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */ 2 | /* https://catppuccin.com/palette */ 3 | 4 | 5 | :root { 6 | /* Fix badge background color */ 7 | --vp-badge-tip-bg: hsla(347, 87%, 44%, 0.20); 8 | 9 | /* Accent Color */ 10 | --vp-c-brand-1: #d20f39; 11 | --vp-c-brand-2: rgb(187, 13, 51); 12 | --vp-c-brand-3: #d20f39; 13 | 14 | /* Solid Colors and Sponsor Color */ 15 | --vp-c-white: #eff1f5; 16 | --vp-c-black: #4c4f69; 17 | --vp-c-sponsor: #d20f39; 18 | 19 | /* Background Colors */ 20 | --vp-c-bg: #eff1f5; 21 | --vp-c-bg-alt: #e6e9ef; 22 | --vp-c-bg-elv: #dce0e8; 23 | --vp-c-bg-soft: #e6e9ef; 24 | 25 | /* Border Colors */ 26 | --vp-c-border: #ccd0da; 27 | --vp-c-divider: #ccd0da; 28 | --vp-c-gutter: #bcc0cc; 29 | 30 | /* Text Colors */ 31 | --vp-c-text-1: #4c4f69; 32 | --vp-c-text-2: #5c5f77; 33 | --vp-c-text-3: #6c6f85; 34 | 35 | /* Callout Colors */ 36 | --vp-c-tip-soft: hsla(109, 58%, 40%, 0.20); 37 | --vp-c-warning-soft: hsla(35, 77%, 49%, 0.20); 38 | --vp-c-danger-soft: hsla(347, 87%, 44%, 0.20); 39 | --vp-c-caution-soft: hsla(347, 87%, 44%, 0.20); 40 | --vp-c-important-soft: hsla(266, 85%, 58%, 0.20); 41 | 42 | --vp-custom-block-info-bg: hsla(197, 96%, 46%, 0.20); 43 | --vp-custom-block-note-bg: hsla(220, 91%, 54%, 0.20); 44 | --vp-custom-block-details-bg: #ccd0da; 45 | 46 | /* Catppuccin Accents */ 47 | --ctp-latte-rosewater: #dc8a78; 48 | --ctp-latte-flamingo: #dd7878; 49 | --ctp-latte-pink: #ea76cb; 50 | --ctp-latte-mauve: #8839ef; 51 | --ctp-latte-red: #d20f39; 52 | --ctp-latte-maroon: #e64553; 53 | --ctp-latte-peach: #fe640b; 54 | --ctp-latte-yellow: #df8e1d; 55 | --ctp-latte-green: #40a02b; 56 | --ctp-latte-teal: #179299; 57 | --ctp-latte-sky: #04a5e5; 58 | --ctp-latte-sapphire: #209fb5; 59 | --ctp-latte-blue: #1e66f5; 60 | --ctp-latte-lavender: #7287fd; 61 | --ctp-latte-text: #4c4f69; 62 | --ctp-latte-subtext1: #5c5f77; 63 | --ctp-latte-subtext0: #6c6f85; 64 | --ctp-latte-overlay2: #7c7f93; 65 | --ctp-latte-overlay1: #8c8fa1; 66 | --ctp-latte-overlay0: #9ca0b0; 67 | --ctp-latte-surface2: #acb0be; 68 | --ctp-latte-surface1: #bcc0cc; 69 | --ctp-latte-surface0: #ccd0da; 70 | --ctp-latte-base: #eff1f5; 71 | --ctp-latte-mantle: #e6e9ef; 72 | --ctp-latte-crust: #dce0e8; 73 | 74 | /* Color Palette */ 75 | --vp-c-gray-1: rgb(188, 192, 204); 76 | --vp-c-gray-2: rgb(204, 208, 218); 77 | --vp-c-gray-3: rgb(239, 241, 245); 78 | --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14); 79 | 80 | --vp-c-default-soft: #ccd0da; 81 | 82 | --vp-c-indigo-1: rgb(30, 102, 245); 83 | --vp-c-indigo-2: rgb(21, 99, 255); 84 | --vp-c-indigo-3: rgb(30, 66, 146); 85 | --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14); 86 | 87 | --vp-c-purple-1: rgb(136, 57, 239); 88 | --vp-c-purple-2: rgb(134, 46, 250); 89 | --vp-c-purple-3: rgb(83, 44, 143); 90 | --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14); 91 | 92 | --vp-c-green-1: rgb(64, 160, 43); 93 | --vp-c-green-2: rgb(58, 171, 33); 94 | --vp-c-green-3: rgb(47, 95, 45); 95 | --vp-c-green-soft: hsla(109, 58%, 20%, 0.14); 96 | 97 | --vp-c-yellow-1: rgb(223, 142, 29); 98 | --vp-c-yellow-2: rgb(236, 144, 16); 99 | --vp-c-yellow-3: rgb(127, 86, 38); 100 | --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14); 101 | 102 | --vp-c-red-1: rgb(210, 15, 57); 103 | --vp-c-red-2: rgb(222, 4, 51); 104 | --vp-c-red-3: rgb(120, 23, 52); 105 | --vp-c-red-soft: hsla(347, 87%, 24%, 0.14); 106 | 107 | /* Icons */ 108 | 109 | 110 | --vp-icon-copy: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3C/svg%3E'); 111 | --vp-icon-copied: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Cpath%20d%3D%22m9%2014%202%202%204-4%22/%3E%3C/svg%3E'); 112 | 113 | /* Code Highlighting */ 114 | --vp-code-line-highlight-color: hsla(232, 10%, 53%, 0.20); 115 | } 116 | .dark { 117 | /* Fix button text color */ 118 | --vp-button-brand-text: var(--ctp-mocha-crust) !important; 119 | --vp-button-brand-hover-text: var(--ctp-mocha-crust) !important; 120 | --vp-button-brand-active-text: var(--ctp-mocha-crust) !important; 121 | 122 | /* Fix badge background color */ 123 | --vp-badge-tip-bg: hsla(343, 81%, 75%, 0.20); 124 | 125 | /* Accent Color */ 126 | --vp-c-brand-1: #f38ba8; 127 | --vp-c-brand-2: rgb(241, 115, 151); 128 | --vp-c-brand-3: #f38ba8; 129 | 130 | /* Solid Colors and Sponsor Color */ 131 | --vp-c-white: #cdd6f4; 132 | --vp-c-black: #1e1e2e; 133 | --vp-c-sponsor: #f38ba8; 134 | 135 | /* Background Colors */ 136 | --vp-c-bg: #1e1e2e; 137 | --vp-c-bg-alt: #181825; 138 | --vp-c-bg-elv: #11111b; 139 | --vp-c-bg-soft: #181825; 140 | 141 | /* Border Colors */ 142 | --vp-c-border: #313244; 143 | --vp-c-divider: #313244; 144 | --vp-c-gutter: #45475a; 145 | 146 | /* Text Colors */ 147 | --vp-c-text-1: #cdd6f4; 148 | --vp-c-text-2: #bac2de; 149 | --vp-c-text-3: #a6adc8; 150 | 151 | /* Callout Colors */ 152 | --vp-c-tip-soft: hsla(115, 54%, 76%, 0.20); 153 | --vp-c-warning-soft: hsla(41, 86%, 83%, 0.20); 154 | --vp-c-danger-soft: hsla(343, 81%, 75%, 0.20); 155 | --vp-c-caution-soft: hsla(343, 81%, 75%, 0.20); 156 | --vp-c-important-soft: hsla(267, 84%, 81%, 0.20); 157 | 158 | --vp-custom-block-info-bg: hsla(189, 71%, 73%, 0.20); 159 | --vp-custom-block-note-bg: hsla(217, 92%, 76%, 0.20); 160 | --vp-custom-block-details-bg: #313244; 161 | 162 | /* Catppuccin Accents */ 163 | --ctp-mocha-rosewater: #f5e0dc; 164 | --ctp-mocha-flamingo: #f2cdcd; 165 | --ctp-mocha-pink: #f5c2e7; 166 | --ctp-mocha-mauve: #cba6f7; 167 | --ctp-mocha-red: #f38ba8; 168 | --ctp-mocha-maroon: #eba0ac; 169 | --ctp-mocha-peach: #fab387; 170 | --ctp-mocha-yellow: #f9e2af; 171 | --ctp-mocha-green: #a6e3a1; 172 | --ctp-mocha-teal: #94e2d5; 173 | --ctp-mocha-sky: #89dceb; 174 | --ctp-mocha-sapphire: #74c7ec; 175 | --ctp-mocha-blue: #89b4fa; 176 | --ctp-mocha-lavender: #b4befe; 177 | --ctp-mocha-text: #cdd6f4; 178 | --ctp-mocha-subtext1: #bac2de; 179 | --ctp-mocha-subtext0: #a6adc8; 180 | --ctp-mocha-overlay2: #9399b2; 181 | --ctp-mocha-overlay1: #7f849c; 182 | --ctp-mocha-overlay0: #6c7086; 183 | --ctp-mocha-surface2: #585b70; 184 | --ctp-mocha-surface1: #45475a; 185 | --ctp-mocha-surface0: #313244; 186 | --ctp-mocha-base: #1e1e2e; 187 | --ctp-mocha-mantle: #181825; 188 | --ctp-mocha-crust: #11111b; 189 | 190 | /* Color Palette */ 191 | --vp-c-gray-1: rgb(69, 71, 90); 192 | --vp-c-gray-2: rgb(49, 50, 68); 193 | --vp-c-gray-3: rgb(30, 30, 46); 194 | --vp-c-gray-soft: hsla(240, 21%, 45%, 0.14); 195 | 196 | --vp-c-default-soft: #313244; 197 | 198 | --vp-c-indigo-1: rgb(137, 180, 250); 199 | --vp-c-indigo-2: rgb(133, 180, 255); 200 | --vp-c-indigo-3: rgb(84, 105, 148); 201 | --vp-c-indigo-soft: hsla(217, 92%, 56%, 0.14); 202 | 203 | --vp-c-purple-1: rgb(203, 166, 247); 204 | --vp-c-purple-2: rgb(203, 162, 252); 205 | --vp-c-purple-3: rgb(117, 98, 147); 206 | --vp-c-purple-soft: hsla(267, 84%, 61%, 0.14); 207 | 208 | --vp-c-green-1: rgb(166, 227, 161); 209 | --vp-c-green-2: rgb(161, 233, 155); 210 | --vp-c-green-3: rgb(98, 129, 104); 211 | --vp-c-green-soft: hsla(115, 54%, 56%, 0.14); 212 | 213 | --vp-c-yellow-1: rgb(249, 226, 175); 214 | --vp-c-yellow-2: rgb(253, 227, 171); 215 | --vp-c-yellow-3: rgb(140, 128, 111); 216 | --vp-c-yellow-soft: hsla(41, 86%, 63%, 0.14); 217 | 218 | --vp-c-red-1: rgb(243, 139, 168); 219 | --vp-c-red-2: rgb(249, 133, 166); 220 | --vp-c-red-3: rgb(137, 85, 107); 221 | --vp-c-red-soft: hsla(343, 81%, 55%, 0.14); 222 | 223 | /* Icons */ 224 | 225 | 226 | --vp-icon-copy: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3C/svg%3E'); 227 | --vp-icon-copied: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Cpath%20d%3D%22m9%2014%202%202%204-4%22/%3E%3C/svg%3E'); 228 | 229 | /* Code Highlighting */ 230 | --vp-code-line-highlight-color: hsla(228, 17%, 64%, 0.20); 231 | } 232 | -------------------------------------------------------------------------------- /theme/mocha/sky.css: -------------------------------------------------------------------------------- 1 | /* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */ 2 | /* https://catppuccin.com/palette */ 3 | 4 | 5 | :root { 6 | /* Fix badge background color */ 7 | --vp-badge-tip-bg: hsla(197, 96%, 46%, 0.20); 8 | 9 | /* Accent Color */ 10 | --vp-c-brand-1: #04a5e5; 11 | --vp-c-brand-2: rgb(4, 147, 204); 12 | --vp-c-brand-3: #04a5e5; 13 | 14 | /* Solid Colors and Sponsor Color */ 15 | --vp-c-white: #eff1f5; 16 | --vp-c-black: #4c4f69; 17 | --vp-c-sponsor: #d20f39; 18 | 19 | /* Background Colors */ 20 | --vp-c-bg: #eff1f5; 21 | --vp-c-bg-alt: #e6e9ef; 22 | --vp-c-bg-elv: #dce0e8; 23 | --vp-c-bg-soft: #e6e9ef; 24 | 25 | /* Border Colors */ 26 | --vp-c-border: #ccd0da; 27 | --vp-c-divider: #ccd0da; 28 | --vp-c-gutter: #bcc0cc; 29 | 30 | /* Text Colors */ 31 | --vp-c-text-1: #4c4f69; 32 | --vp-c-text-2: #5c5f77; 33 | --vp-c-text-3: #6c6f85; 34 | 35 | /* Callout Colors */ 36 | --vp-c-tip-soft: hsla(109, 58%, 40%, 0.20); 37 | --vp-c-warning-soft: hsla(35, 77%, 49%, 0.20); 38 | --vp-c-danger-soft: hsla(347, 87%, 44%, 0.20); 39 | --vp-c-caution-soft: hsla(347, 87%, 44%, 0.20); 40 | --vp-c-important-soft: hsla(266, 85%, 58%, 0.20); 41 | 42 | --vp-custom-block-info-bg: hsla(197, 96%, 46%, 0.20); 43 | --vp-custom-block-note-bg: hsla(220, 91%, 54%, 0.20); 44 | --vp-custom-block-details-bg: #ccd0da; 45 | 46 | /* Catppuccin Accents */ 47 | --ctp-latte-rosewater: #dc8a78; 48 | --ctp-latte-flamingo: #dd7878; 49 | --ctp-latte-pink: #ea76cb; 50 | --ctp-latte-mauve: #8839ef; 51 | --ctp-latte-red: #d20f39; 52 | --ctp-latte-maroon: #e64553; 53 | --ctp-latte-peach: #fe640b; 54 | --ctp-latte-yellow: #df8e1d; 55 | --ctp-latte-green: #40a02b; 56 | --ctp-latte-teal: #179299; 57 | --ctp-latte-sky: #04a5e5; 58 | --ctp-latte-sapphire: #209fb5; 59 | --ctp-latte-blue: #1e66f5; 60 | --ctp-latte-lavender: #7287fd; 61 | --ctp-latte-text: #4c4f69; 62 | --ctp-latte-subtext1: #5c5f77; 63 | --ctp-latte-subtext0: #6c6f85; 64 | --ctp-latte-overlay2: #7c7f93; 65 | --ctp-latte-overlay1: #8c8fa1; 66 | --ctp-latte-overlay0: #9ca0b0; 67 | --ctp-latte-surface2: #acb0be; 68 | --ctp-latte-surface1: #bcc0cc; 69 | --ctp-latte-surface0: #ccd0da; 70 | --ctp-latte-base: #eff1f5; 71 | --ctp-latte-mantle: #e6e9ef; 72 | --ctp-latte-crust: #dce0e8; 73 | 74 | /* Color Palette */ 75 | --vp-c-gray-1: rgb(188, 192, 204); 76 | --vp-c-gray-2: rgb(204, 208, 218); 77 | --vp-c-gray-3: rgb(239, 241, 245); 78 | --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14); 79 | 80 | --vp-c-default-soft: #ccd0da; 81 | 82 | --vp-c-indigo-1: rgb(30, 102, 245); 83 | --vp-c-indigo-2: rgb(21, 99, 255); 84 | --vp-c-indigo-3: rgb(30, 66, 146); 85 | --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14); 86 | 87 | --vp-c-purple-1: rgb(136, 57, 239); 88 | --vp-c-purple-2: rgb(134, 46, 250); 89 | --vp-c-purple-3: rgb(83, 44, 143); 90 | --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14); 91 | 92 | --vp-c-green-1: rgb(64, 160, 43); 93 | --vp-c-green-2: rgb(58, 171, 33); 94 | --vp-c-green-3: rgb(47, 95, 45); 95 | --vp-c-green-soft: hsla(109, 58%, 20%, 0.14); 96 | 97 | --vp-c-yellow-1: rgb(223, 142, 29); 98 | --vp-c-yellow-2: rgb(236, 144, 16); 99 | --vp-c-yellow-3: rgb(127, 86, 38); 100 | --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14); 101 | 102 | --vp-c-red-1: rgb(210, 15, 57); 103 | --vp-c-red-2: rgb(222, 4, 51); 104 | --vp-c-red-3: rgb(120, 23, 52); 105 | --vp-c-red-soft: hsla(347, 87%, 24%, 0.14); 106 | 107 | /* Icons */ 108 | 109 | 110 | --vp-icon-copy: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3C/svg%3E'); 111 | --vp-icon-copied: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Cpath%20d%3D%22m9%2014%202%202%204-4%22/%3E%3C/svg%3E'); 112 | 113 | /* Code Highlighting */ 114 | --vp-code-line-highlight-color: hsla(232, 10%, 53%, 0.20); 115 | } 116 | .dark { 117 | /* Fix button text color */ 118 | --vp-button-brand-text: var(--ctp-mocha-crust) !important; 119 | --vp-button-brand-hover-text: var(--ctp-mocha-crust) !important; 120 | --vp-button-brand-active-text: var(--ctp-mocha-crust) !important; 121 | 122 | /* Fix badge background color */ 123 | --vp-badge-tip-bg: hsla(189, 71%, 73%, 0.20); 124 | 125 | /* Accent Color */ 126 | --vp-c-brand-1: #89dceb; 127 | --vp-c-brand-2: rgb(115, 214, 231); 128 | --vp-c-brand-3: #89dceb; 129 | 130 | /* Solid Colors and Sponsor Color */ 131 | --vp-c-white: #cdd6f4; 132 | --vp-c-black: #1e1e2e; 133 | --vp-c-sponsor: #f38ba8; 134 | 135 | /* Background Colors */ 136 | --vp-c-bg: #1e1e2e; 137 | --vp-c-bg-alt: #181825; 138 | --vp-c-bg-elv: #11111b; 139 | --vp-c-bg-soft: #181825; 140 | 141 | /* Border Colors */ 142 | --vp-c-border: #313244; 143 | --vp-c-divider: #313244; 144 | --vp-c-gutter: #45475a; 145 | 146 | /* Text Colors */ 147 | --vp-c-text-1: #cdd6f4; 148 | --vp-c-text-2: #bac2de; 149 | --vp-c-text-3: #a6adc8; 150 | 151 | /* Callout Colors */ 152 | --vp-c-tip-soft: hsla(115, 54%, 76%, 0.20); 153 | --vp-c-warning-soft: hsla(41, 86%, 83%, 0.20); 154 | --vp-c-danger-soft: hsla(343, 81%, 75%, 0.20); 155 | --vp-c-caution-soft: hsla(343, 81%, 75%, 0.20); 156 | --vp-c-important-soft: hsla(267, 84%, 81%, 0.20); 157 | 158 | --vp-custom-block-info-bg: hsla(189, 71%, 73%, 0.20); 159 | --vp-custom-block-note-bg: hsla(217, 92%, 76%, 0.20); 160 | --vp-custom-block-details-bg: #313244; 161 | 162 | /* Catppuccin Accents */ 163 | --ctp-mocha-rosewater: #f5e0dc; 164 | --ctp-mocha-flamingo: #f2cdcd; 165 | --ctp-mocha-pink: #f5c2e7; 166 | --ctp-mocha-mauve: #cba6f7; 167 | --ctp-mocha-red: #f38ba8; 168 | --ctp-mocha-maroon: #eba0ac; 169 | --ctp-mocha-peach: #fab387; 170 | --ctp-mocha-yellow: #f9e2af; 171 | --ctp-mocha-green: #a6e3a1; 172 | --ctp-mocha-teal: #94e2d5; 173 | --ctp-mocha-sky: #89dceb; 174 | --ctp-mocha-sapphire: #74c7ec; 175 | --ctp-mocha-blue: #89b4fa; 176 | --ctp-mocha-lavender: #b4befe; 177 | --ctp-mocha-text: #cdd6f4; 178 | --ctp-mocha-subtext1: #bac2de; 179 | --ctp-mocha-subtext0: #a6adc8; 180 | --ctp-mocha-overlay2: #9399b2; 181 | --ctp-mocha-overlay1: #7f849c; 182 | --ctp-mocha-overlay0: #6c7086; 183 | --ctp-mocha-surface2: #585b70; 184 | --ctp-mocha-surface1: #45475a; 185 | --ctp-mocha-surface0: #313244; 186 | --ctp-mocha-base: #1e1e2e; 187 | --ctp-mocha-mantle: #181825; 188 | --ctp-mocha-crust: #11111b; 189 | 190 | /* Color Palette */ 191 | --vp-c-gray-1: rgb(69, 71, 90); 192 | --vp-c-gray-2: rgb(49, 50, 68); 193 | --vp-c-gray-3: rgb(30, 30, 46); 194 | --vp-c-gray-soft: hsla(240, 21%, 45%, 0.14); 195 | 196 | --vp-c-default-soft: #313244; 197 | 198 | --vp-c-indigo-1: rgb(137, 180, 250); 199 | --vp-c-indigo-2: rgb(133, 180, 255); 200 | --vp-c-indigo-3: rgb(84, 105, 148); 201 | --vp-c-indigo-soft: hsla(217, 92%, 56%, 0.14); 202 | 203 | --vp-c-purple-1: rgb(203, 166, 247); 204 | --vp-c-purple-2: rgb(203, 162, 252); 205 | --vp-c-purple-3: rgb(117, 98, 147); 206 | --vp-c-purple-soft: hsla(267, 84%, 61%, 0.14); 207 | 208 | --vp-c-green-1: rgb(166, 227, 161); 209 | --vp-c-green-2: rgb(161, 233, 155); 210 | --vp-c-green-3: rgb(98, 129, 104); 211 | --vp-c-green-soft: hsla(115, 54%, 56%, 0.14); 212 | 213 | --vp-c-yellow-1: rgb(249, 226, 175); 214 | --vp-c-yellow-2: rgb(253, 227, 171); 215 | --vp-c-yellow-3: rgb(140, 128, 111); 216 | --vp-c-yellow-soft: hsla(41, 86%, 63%, 0.14); 217 | 218 | --vp-c-red-1: rgb(243, 139, 168); 219 | --vp-c-red-2: rgb(249, 133, 166); 220 | --vp-c-red-3: rgb(137, 85, 107); 221 | --vp-c-red-soft: hsla(343, 81%, 55%, 0.14); 222 | 223 | /* Icons */ 224 | 225 | 226 | --vp-icon-copy: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3C/svg%3E'); 227 | --vp-icon-copied: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Cpath%20d%3D%22m9%2014%202%202%204-4%22/%3E%3C/svg%3E'); 228 | 229 | /* Code Highlighting */ 230 | --vp-code-line-highlight-color: hsla(228, 17%, 64%, 0.20); 231 | } 232 | -------------------------------------------------------------------------------- /theme/mocha/teal.css: -------------------------------------------------------------------------------- 1 | /* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */ 2 | /* https://catppuccin.com/palette */ 3 | 4 | 5 | :root { 6 | /* Fix badge background color */ 7 | --vp-badge-tip-bg: hsla(183, 74%, 35%, 0.20); 8 | 9 | /* Accent Color */ 10 | --vp-c-brand-1: #179299; 11 | --vp-c-brand-2: rgb(20, 125, 130); 12 | --vp-c-brand-3: #179299; 13 | 14 | /* Solid Colors and Sponsor Color */ 15 | --vp-c-white: #eff1f5; 16 | --vp-c-black: #4c4f69; 17 | --vp-c-sponsor: #d20f39; 18 | 19 | /* Background Colors */ 20 | --vp-c-bg: #eff1f5; 21 | --vp-c-bg-alt: #e6e9ef; 22 | --vp-c-bg-elv: #dce0e8; 23 | --vp-c-bg-soft: #e6e9ef; 24 | 25 | /* Border Colors */ 26 | --vp-c-border: #ccd0da; 27 | --vp-c-divider: #ccd0da; 28 | --vp-c-gutter: #bcc0cc; 29 | 30 | /* Text Colors */ 31 | --vp-c-text-1: #4c4f69; 32 | --vp-c-text-2: #5c5f77; 33 | --vp-c-text-3: #6c6f85; 34 | 35 | /* Callout Colors */ 36 | --vp-c-tip-soft: hsla(109, 58%, 40%, 0.20); 37 | --vp-c-warning-soft: hsla(35, 77%, 49%, 0.20); 38 | --vp-c-danger-soft: hsla(347, 87%, 44%, 0.20); 39 | --vp-c-caution-soft: hsla(347, 87%, 44%, 0.20); 40 | --vp-c-important-soft: hsla(266, 85%, 58%, 0.20); 41 | 42 | --vp-custom-block-info-bg: hsla(197, 96%, 46%, 0.20); 43 | --vp-custom-block-note-bg: hsla(220, 91%, 54%, 0.20); 44 | --vp-custom-block-details-bg: #ccd0da; 45 | 46 | /* Catppuccin Accents */ 47 | --ctp-latte-rosewater: #dc8a78; 48 | --ctp-latte-flamingo: #dd7878; 49 | --ctp-latte-pink: #ea76cb; 50 | --ctp-latte-mauve: #8839ef; 51 | --ctp-latte-red: #d20f39; 52 | --ctp-latte-maroon: #e64553; 53 | --ctp-latte-peach: #fe640b; 54 | --ctp-latte-yellow: #df8e1d; 55 | --ctp-latte-green: #40a02b; 56 | --ctp-latte-teal: #179299; 57 | --ctp-latte-sky: #04a5e5; 58 | --ctp-latte-sapphire: #209fb5; 59 | --ctp-latte-blue: #1e66f5; 60 | --ctp-latte-lavender: #7287fd; 61 | --ctp-latte-text: #4c4f69; 62 | --ctp-latte-subtext1: #5c5f77; 63 | --ctp-latte-subtext0: #6c6f85; 64 | --ctp-latte-overlay2: #7c7f93; 65 | --ctp-latte-overlay1: #8c8fa1; 66 | --ctp-latte-overlay0: #9ca0b0; 67 | --ctp-latte-surface2: #acb0be; 68 | --ctp-latte-surface1: #bcc0cc; 69 | --ctp-latte-surface0: #ccd0da; 70 | --ctp-latte-base: #eff1f5; 71 | --ctp-latte-mantle: #e6e9ef; 72 | --ctp-latte-crust: #dce0e8; 73 | 74 | /* Color Palette */ 75 | --vp-c-gray-1: rgb(188, 192, 204); 76 | --vp-c-gray-2: rgb(204, 208, 218); 77 | --vp-c-gray-3: rgb(239, 241, 245); 78 | --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14); 79 | 80 | --vp-c-default-soft: #ccd0da; 81 | 82 | --vp-c-indigo-1: rgb(30, 102, 245); 83 | --vp-c-indigo-2: rgb(21, 99, 255); 84 | --vp-c-indigo-3: rgb(30, 66, 146); 85 | --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14); 86 | 87 | --vp-c-purple-1: rgb(136, 57, 239); 88 | --vp-c-purple-2: rgb(134, 46, 250); 89 | --vp-c-purple-3: rgb(83, 44, 143); 90 | --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14); 91 | 92 | --vp-c-green-1: rgb(64, 160, 43); 93 | --vp-c-green-2: rgb(58, 171, 33); 94 | --vp-c-green-3: rgb(47, 95, 45); 95 | --vp-c-green-soft: hsla(109, 58%, 20%, 0.14); 96 | 97 | --vp-c-yellow-1: rgb(223, 142, 29); 98 | --vp-c-yellow-2: rgb(236, 144, 16); 99 | --vp-c-yellow-3: rgb(127, 86, 38); 100 | --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14); 101 | 102 | --vp-c-red-1: rgb(210, 15, 57); 103 | --vp-c-red-2: rgb(222, 4, 51); 104 | --vp-c-red-3: rgb(120, 23, 52); 105 | --vp-c-red-soft: hsla(347, 87%, 24%, 0.14); 106 | 107 | /* Icons */ 108 | 109 | 110 | --vp-icon-copy: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3C/svg%3E'); 111 | --vp-icon-copied: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Cpath%20d%3D%22m9%2014%202%202%204-4%22/%3E%3C/svg%3E'); 112 | 113 | /* Code Highlighting */ 114 | --vp-code-line-highlight-color: hsla(232, 10%, 53%, 0.20); 115 | } 116 | .dark { 117 | /* Fix button text color */ 118 | --vp-button-brand-text: var(--ctp-mocha-crust) !important; 119 | --vp-button-brand-hover-text: var(--ctp-mocha-crust) !important; 120 | --vp-button-brand-active-text: var(--ctp-mocha-crust) !important; 121 | 122 | /* Fix badge background color */ 123 | --vp-badge-tip-bg: hsla(170, 57%, 73%, 0.20); 124 | 125 | /* Accent Color */ 126 | --vp-c-brand-1: #94e2d5; 127 | --vp-c-brand-2: rgb(128, 220, 205); 128 | --vp-c-brand-3: #94e2d5; 129 | 130 | /* Solid Colors and Sponsor Color */ 131 | --vp-c-white: #cdd6f4; 132 | --vp-c-black: #1e1e2e; 133 | --vp-c-sponsor: #f38ba8; 134 | 135 | /* Background Colors */ 136 | --vp-c-bg: #1e1e2e; 137 | --vp-c-bg-alt: #181825; 138 | --vp-c-bg-elv: #11111b; 139 | --vp-c-bg-soft: #181825; 140 | 141 | /* Border Colors */ 142 | --vp-c-border: #313244; 143 | --vp-c-divider: #313244; 144 | --vp-c-gutter: #45475a; 145 | 146 | /* Text Colors */ 147 | --vp-c-text-1: #cdd6f4; 148 | --vp-c-text-2: #bac2de; 149 | --vp-c-text-3: #a6adc8; 150 | 151 | /* Callout Colors */ 152 | --vp-c-tip-soft: hsla(115, 54%, 76%, 0.20); 153 | --vp-c-warning-soft: hsla(41, 86%, 83%, 0.20); 154 | --vp-c-danger-soft: hsla(343, 81%, 75%, 0.20); 155 | --vp-c-caution-soft: hsla(343, 81%, 75%, 0.20); 156 | --vp-c-important-soft: hsla(267, 84%, 81%, 0.20); 157 | 158 | --vp-custom-block-info-bg: hsla(189, 71%, 73%, 0.20); 159 | --vp-custom-block-note-bg: hsla(217, 92%, 76%, 0.20); 160 | --vp-custom-block-details-bg: #313244; 161 | 162 | /* Catppuccin Accents */ 163 | --ctp-mocha-rosewater: #f5e0dc; 164 | --ctp-mocha-flamingo: #f2cdcd; 165 | --ctp-mocha-pink: #f5c2e7; 166 | --ctp-mocha-mauve: #cba6f7; 167 | --ctp-mocha-red: #f38ba8; 168 | --ctp-mocha-maroon: #eba0ac; 169 | --ctp-mocha-peach: #fab387; 170 | --ctp-mocha-yellow: #f9e2af; 171 | --ctp-mocha-green: #a6e3a1; 172 | --ctp-mocha-teal: #94e2d5; 173 | --ctp-mocha-sky: #89dceb; 174 | --ctp-mocha-sapphire: #74c7ec; 175 | --ctp-mocha-blue: #89b4fa; 176 | --ctp-mocha-lavender: #b4befe; 177 | --ctp-mocha-text: #cdd6f4; 178 | --ctp-mocha-subtext1: #bac2de; 179 | --ctp-mocha-subtext0: #a6adc8; 180 | --ctp-mocha-overlay2: #9399b2; 181 | --ctp-mocha-overlay1: #7f849c; 182 | --ctp-mocha-overlay0: #6c7086; 183 | --ctp-mocha-surface2: #585b70; 184 | --ctp-mocha-surface1: #45475a; 185 | --ctp-mocha-surface0: #313244; 186 | --ctp-mocha-base: #1e1e2e; 187 | --ctp-mocha-mantle: #181825; 188 | --ctp-mocha-crust: #11111b; 189 | 190 | /* Color Palette */ 191 | --vp-c-gray-1: rgb(69, 71, 90); 192 | --vp-c-gray-2: rgb(49, 50, 68); 193 | --vp-c-gray-3: rgb(30, 30, 46); 194 | --vp-c-gray-soft: hsla(240, 21%, 45%, 0.14); 195 | 196 | --vp-c-default-soft: #313244; 197 | 198 | --vp-c-indigo-1: rgb(137, 180, 250); 199 | --vp-c-indigo-2: rgb(133, 180, 255); 200 | --vp-c-indigo-3: rgb(84, 105, 148); 201 | --vp-c-indigo-soft: hsla(217, 92%, 56%, 0.14); 202 | 203 | --vp-c-purple-1: rgb(203, 166, 247); 204 | --vp-c-purple-2: rgb(203, 162, 252); 205 | --vp-c-purple-3: rgb(117, 98, 147); 206 | --vp-c-purple-soft: hsla(267, 84%, 61%, 0.14); 207 | 208 | --vp-c-green-1: rgb(166, 227, 161); 209 | --vp-c-green-2: rgb(161, 233, 155); 210 | --vp-c-green-3: rgb(98, 129, 104); 211 | --vp-c-green-soft: hsla(115, 54%, 56%, 0.14); 212 | 213 | --vp-c-yellow-1: rgb(249, 226, 175); 214 | --vp-c-yellow-2: rgb(253, 227, 171); 215 | --vp-c-yellow-3: rgb(140, 128, 111); 216 | --vp-c-yellow-soft: hsla(41, 86%, 63%, 0.14); 217 | 218 | --vp-c-red-1: rgb(243, 139, 168); 219 | --vp-c-red-2: rgb(249, 133, 166); 220 | --vp-c-red-3: rgb(137, 85, 107); 221 | --vp-c-red-soft: hsla(343, 81%, 55%, 0.14); 222 | 223 | /* Icons */ 224 | 225 | 226 | --vp-icon-copy: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3C/svg%3E'); 227 | --vp-icon-copied: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Cpath%20d%3D%22m9%2014%202%202%204-4%22/%3E%3C/svg%3E'); 228 | 229 | /* Code Highlighting */ 230 | --vp-code-line-highlight-color: hsla(228, 17%, 64%, 0.20); 231 | } 232 | -------------------------------------------------------------------------------- /theme/mocha/yellow.css: -------------------------------------------------------------------------------- 1 | /* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */ 2 | /* https://catppuccin.com/palette */ 3 | 4 | 5 | :root { 6 | /* Fix badge background color */ 7 | --vp-badge-tip-bg: hsla(35, 77%, 49%, 0.20); 8 | 9 | /* Accent Color */ 10 | --vp-c-brand-1: #df8e1d; 11 | --vp-c-brand-2: rgb(200, 127, 26); 12 | --vp-c-brand-3: #df8e1d; 13 | 14 | /* Solid Colors and Sponsor Color */ 15 | --vp-c-white: #eff1f5; 16 | --vp-c-black: #4c4f69; 17 | --vp-c-sponsor: #d20f39; 18 | 19 | /* Background Colors */ 20 | --vp-c-bg: #eff1f5; 21 | --vp-c-bg-alt: #e6e9ef; 22 | --vp-c-bg-elv: #dce0e8; 23 | --vp-c-bg-soft: #e6e9ef; 24 | 25 | /* Border Colors */ 26 | --vp-c-border: #ccd0da; 27 | --vp-c-divider: #ccd0da; 28 | --vp-c-gutter: #bcc0cc; 29 | 30 | /* Text Colors */ 31 | --vp-c-text-1: #4c4f69; 32 | --vp-c-text-2: #5c5f77; 33 | --vp-c-text-3: #6c6f85; 34 | 35 | /* Callout Colors */ 36 | --vp-c-tip-soft: hsla(109, 58%, 40%, 0.20); 37 | --vp-c-warning-soft: hsla(35, 77%, 49%, 0.20); 38 | --vp-c-danger-soft: hsla(347, 87%, 44%, 0.20); 39 | --vp-c-caution-soft: hsla(347, 87%, 44%, 0.20); 40 | --vp-c-important-soft: hsla(266, 85%, 58%, 0.20); 41 | 42 | --vp-custom-block-info-bg: hsla(197, 96%, 46%, 0.20); 43 | --vp-custom-block-note-bg: hsla(220, 91%, 54%, 0.20); 44 | --vp-custom-block-details-bg: #ccd0da; 45 | 46 | /* Catppuccin Accents */ 47 | --ctp-latte-rosewater: #dc8a78; 48 | --ctp-latte-flamingo: #dd7878; 49 | --ctp-latte-pink: #ea76cb; 50 | --ctp-latte-mauve: #8839ef; 51 | --ctp-latte-red: #d20f39; 52 | --ctp-latte-maroon: #e64553; 53 | --ctp-latte-peach: #fe640b; 54 | --ctp-latte-yellow: #df8e1d; 55 | --ctp-latte-green: #40a02b; 56 | --ctp-latte-teal: #179299; 57 | --ctp-latte-sky: #04a5e5; 58 | --ctp-latte-sapphire: #209fb5; 59 | --ctp-latte-blue: #1e66f5; 60 | --ctp-latte-lavender: #7287fd; 61 | --ctp-latte-text: #4c4f69; 62 | --ctp-latte-subtext1: #5c5f77; 63 | --ctp-latte-subtext0: #6c6f85; 64 | --ctp-latte-overlay2: #7c7f93; 65 | --ctp-latte-overlay1: #8c8fa1; 66 | --ctp-latte-overlay0: #9ca0b0; 67 | --ctp-latte-surface2: #acb0be; 68 | --ctp-latte-surface1: #bcc0cc; 69 | --ctp-latte-surface0: #ccd0da; 70 | --ctp-latte-base: #eff1f5; 71 | --ctp-latte-mantle: #e6e9ef; 72 | --ctp-latte-crust: #dce0e8; 73 | 74 | /* Color Palette */ 75 | --vp-c-gray-1: rgb(188, 192, 204); 76 | --vp-c-gray-2: rgb(204, 208, 218); 77 | --vp-c-gray-3: rgb(239, 241, 245); 78 | --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14); 79 | 80 | --vp-c-default-soft: #ccd0da; 81 | 82 | --vp-c-indigo-1: rgb(30, 102, 245); 83 | --vp-c-indigo-2: rgb(21, 99, 255); 84 | --vp-c-indigo-3: rgb(30, 66, 146); 85 | --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14); 86 | 87 | --vp-c-purple-1: rgb(136, 57, 239); 88 | --vp-c-purple-2: rgb(134, 46, 250); 89 | --vp-c-purple-3: rgb(83, 44, 143); 90 | --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14); 91 | 92 | --vp-c-green-1: rgb(64, 160, 43); 93 | --vp-c-green-2: rgb(58, 171, 33); 94 | --vp-c-green-3: rgb(47, 95, 45); 95 | --vp-c-green-soft: hsla(109, 58%, 20%, 0.14); 96 | 97 | --vp-c-yellow-1: rgb(223, 142, 29); 98 | --vp-c-yellow-2: rgb(236, 144, 16); 99 | --vp-c-yellow-3: rgb(127, 86, 38); 100 | --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14); 101 | 102 | --vp-c-red-1: rgb(210, 15, 57); 103 | --vp-c-red-2: rgb(222, 4, 51); 104 | --vp-c-red-3: rgb(120, 23, 52); 105 | --vp-c-red-soft: hsla(347, 87%, 24%, 0.14); 106 | 107 | /* Icons */ 108 | 109 | 110 | --vp-icon-copy: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3C/svg%3E'); 111 | --vp-icon-copied: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Cpath%20d%3D%22m9%2014%202%202%204-4%22/%3E%3C/svg%3E'); 112 | 113 | /* Code Highlighting */ 114 | --vp-code-line-highlight-color: hsla(232, 10%, 53%, 0.20); 115 | } 116 | .dark { 117 | /* Fix button text color */ 118 | --vp-button-brand-text: var(--ctp-mocha-crust) !important; 119 | --vp-button-brand-hover-text: var(--ctp-mocha-crust) !important; 120 | --vp-button-brand-active-text: var(--ctp-mocha-crust) !important; 121 | 122 | /* Fix badge background color */ 123 | --vp-badge-tip-bg: hsla(41, 86%, 83%, 0.20); 124 | 125 | /* Accent Color */ 126 | --vp-c-brand-1: #f9e2af; 127 | --vp-c-brand-2: rgb(247, 217, 151); 128 | --vp-c-brand-3: #f9e2af; 129 | 130 | /* Solid Colors and Sponsor Color */ 131 | --vp-c-white: #cdd6f4; 132 | --vp-c-black: #1e1e2e; 133 | --vp-c-sponsor: #f38ba8; 134 | 135 | /* Background Colors */ 136 | --vp-c-bg: #1e1e2e; 137 | --vp-c-bg-alt: #181825; 138 | --vp-c-bg-elv: #11111b; 139 | --vp-c-bg-soft: #181825; 140 | 141 | /* Border Colors */ 142 | --vp-c-border: #313244; 143 | --vp-c-divider: #313244; 144 | --vp-c-gutter: #45475a; 145 | 146 | /* Text Colors */ 147 | --vp-c-text-1: #cdd6f4; 148 | --vp-c-text-2: #bac2de; 149 | --vp-c-text-3: #a6adc8; 150 | 151 | /* Callout Colors */ 152 | --vp-c-tip-soft: hsla(115, 54%, 76%, 0.20); 153 | --vp-c-warning-soft: hsla(41, 86%, 83%, 0.20); 154 | --vp-c-danger-soft: hsla(343, 81%, 75%, 0.20); 155 | --vp-c-caution-soft: hsla(343, 81%, 75%, 0.20); 156 | --vp-c-important-soft: hsla(267, 84%, 81%, 0.20); 157 | 158 | --vp-custom-block-info-bg: hsla(189, 71%, 73%, 0.20); 159 | --vp-custom-block-note-bg: hsla(217, 92%, 76%, 0.20); 160 | --vp-custom-block-details-bg: #313244; 161 | 162 | /* Catppuccin Accents */ 163 | --ctp-mocha-rosewater: #f5e0dc; 164 | --ctp-mocha-flamingo: #f2cdcd; 165 | --ctp-mocha-pink: #f5c2e7; 166 | --ctp-mocha-mauve: #cba6f7; 167 | --ctp-mocha-red: #f38ba8; 168 | --ctp-mocha-maroon: #eba0ac; 169 | --ctp-mocha-peach: #fab387; 170 | --ctp-mocha-yellow: #f9e2af; 171 | --ctp-mocha-green: #a6e3a1; 172 | --ctp-mocha-teal: #94e2d5; 173 | --ctp-mocha-sky: #89dceb; 174 | --ctp-mocha-sapphire: #74c7ec; 175 | --ctp-mocha-blue: #89b4fa; 176 | --ctp-mocha-lavender: #b4befe; 177 | --ctp-mocha-text: #cdd6f4; 178 | --ctp-mocha-subtext1: #bac2de; 179 | --ctp-mocha-subtext0: #a6adc8; 180 | --ctp-mocha-overlay2: #9399b2; 181 | --ctp-mocha-overlay1: #7f849c; 182 | --ctp-mocha-overlay0: #6c7086; 183 | --ctp-mocha-surface2: #585b70; 184 | --ctp-mocha-surface1: #45475a; 185 | --ctp-mocha-surface0: #313244; 186 | --ctp-mocha-base: #1e1e2e; 187 | --ctp-mocha-mantle: #181825; 188 | --ctp-mocha-crust: #11111b; 189 | 190 | /* Color Palette */ 191 | --vp-c-gray-1: rgb(69, 71, 90); 192 | --vp-c-gray-2: rgb(49, 50, 68); 193 | --vp-c-gray-3: rgb(30, 30, 46); 194 | --vp-c-gray-soft: hsla(240, 21%, 45%, 0.14); 195 | 196 | --vp-c-default-soft: #313244; 197 | 198 | --vp-c-indigo-1: rgb(137, 180, 250); 199 | --vp-c-indigo-2: rgb(133, 180, 255); 200 | --vp-c-indigo-3: rgb(84, 105, 148); 201 | --vp-c-indigo-soft: hsla(217, 92%, 56%, 0.14); 202 | 203 | --vp-c-purple-1: rgb(203, 166, 247); 204 | --vp-c-purple-2: rgb(203, 162, 252); 205 | --vp-c-purple-3: rgb(117, 98, 147); 206 | --vp-c-purple-soft: hsla(267, 84%, 61%, 0.14); 207 | 208 | --vp-c-green-1: rgb(166, 227, 161); 209 | --vp-c-green-2: rgb(161, 233, 155); 210 | --vp-c-green-3: rgb(98, 129, 104); 211 | --vp-c-green-soft: hsla(115, 54%, 56%, 0.14); 212 | 213 | --vp-c-yellow-1: rgb(249, 226, 175); 214 | --vp-c-yellow-2: rgb(253, 227, 171); 215 | --vp-c-yellow-3: rgb(140, 128, 111); 216 | --vp-c-yellow-soft: hsla(41, 86%, 63%, 0.14); 217 | 218 | --vp-c-red-1: rgb(243, 139, 168); 219 | --vp-c-red-2: rgb(249, 133, 166); 220 | --vp-c-red-3: rgb(137, 85, 107); 221 | --vp-c-red-soft: hsla(343, 81%, 55%, 0.14); 222 | 223 | /* Icons */ 224 | 225 | 226 | --vp-icon-copy: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3C/svg%3E'); 227 | --vp-icon-copied: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Cpath%20d%3D%22m9%2014%202%202%204-4%22/%3E%3C/svg%3E'); 228 | 229 | /* Code Highlighting */ 230 | --vp-code-line-highlight-color: hsla(228, 17%, 64%, 0.20); 231 | } 232 | -------------------------------------------------------------------------------- /theme/mocha/lavender.css: -------------------------------------------------------------------------------- 1 | /* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */ 2 | /* https://catppuccin.com/palette */ 3 | 4 | 5 | :root { 6 | /* Fix badge background color */ 7 | --vp-badge-tip-bg: hsla(231, 97%, 72%, 0.20); 8 | 9 | /* Accent Color */ 10 | --vp-c-brand-1: #7287fd; 11 | --vp-c-brand-2: rgb(89, 114, 253); 12 | --vp-c-brand-3: #7287fd; 13 | 14 | /* Solid Colors and Sponsor Color */ 15 | --vp-c-white: #eff1f5; 16 | --vp-c-black: #4c4f69; 17 | --vp-c-sponsor: #d20f39; 18 | 19 | /* Background Colors */ 20 | --vp-c-bg: #eff1f5; 21 | --vp-c-bg-alt: #e6e9ef; 22 | --vp-c-bg-elv: #dce0e8; 23 | --vp-c-bg-soft: #e6e9ef; 24 | 25 | /* Border Colors */ 26 | --vp-c-border: #ccd0da; 27 | --vp-c-divider: #ccd0da; 28 | --vp-c-gutter: #bcc0cc; 29 | 30 | /* Text Colors */ 31 | --vp-c-text-1: #4c4f69; 32 | --vp-c-text-2: #5c5f77; 33 | --vp-c-text-3: #6c6f85; 34 | 35 | /* Callout Colors */ 36 | --vp-c-tip-soft: hsla(109, 58%, 40%, 0.20); 37 | --vp-c-warning-soft: hsla(35, 77%, 49%, 0.20); 38 | --vp-c-danger-soft: hsla(347, 87%, 44%, 0.20); 39 | --vp-c-caution-soft: hsla(347, 87%, 44%, 0.20); 40 | --vp-c-important-soft: hsla(266, 85%, 58%, 0.20); 41 | 42 | --vp-custom-block-info-bg: hsla(197, 96%, 46%, 0.20); 43 | --vp-custom-block-note-bg: hsla(220, 91%, 54%, 0.20); 44 | --vp-custom-block-details-bg: #ccd0da; 45 | 46 | /* Catppuccin Accents */ 47 | --ctp-latte-rosewater: #dc8a78; 48 | --ctp-latte-flamingo: #dd7878; 49 | --ctp-latte-pink: #ea76cb; 50 | --ctp-latte-mauve: #8839ef; 51 | --ctp-latte-red: #d20f39; 52 | --ctp-latte-maroon: #e64553; 53 | --ctp-latte-peach: #fe640b; 54 | --ctp-latte-yellow: #df8e1d; 55 | --ctp-latte-green: #40a02b; 56 | --ctp-latte-teal: #179299; 57 | --ctp-latte-sky: #04a5e5; 58 | --ctp-latte-sapphire: #209fb5; 59 | --ctp-latte-blue: #1e66f5; 60 | --ctp-latte-lavender: #7287fd; 61 | --ctp-latte-text: #4c4f69; 62 | --ctp-latte-subtext1: #5c5f77; 63 | --ctp-latte-subtext0: #6c6f85; 64 | --ctp-latte-overlay2: #7c7f93; 65 | --ctp-latte-overlay1: #8c8fa1; 66 | --ctp-latte-overlay0: #9ca0b0; 67 | --ctp-latte-surface2: #acb0be; 68 | --ctp-latte-surface1: #bcc0cc; 69 | --ctp-latte-surface0: #ccd0da; 70 | --ctp-latte-base: #eff1f5; 71 | --ctp-latte-mantle: #e6e9ef; 72 | --ctp-latte-crust: #dce0e8; 73 | 74 | /* Color Palette */ 75 | --vp-c-gray-1: rgb(188, 192, 204); 76 | --vp-c-gray-2: rgb(204, 208, 218); 77 | --vp-c-gray-3: rgb(239, 241, 245); 78 | --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14); 79 | 80 | --vp-c-default-soft: #ccd0da; 81 | 82 | --vp-c-indigo-1: rgb(30, 102, 245); 83 | --vp-c-indigo-2: rgb(21, 99, 255); 84 | --vp-c-indigo-3: rgb(30, 66, 146); 85 | --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14); 86 | 87 | --vp-c-purple-1: rgb(136, 57, 239); 88 | --vp-c-purple-2: rgb(134, 46, 250); 89 | --vp-c-purple-3: rgb(83, 44, 143); 90 | --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14); 91 | 92 | --vp-c-green-1: rgb(64, 160, 43); 93 | --vp-c-green-2: rgb(58, 171, 33); 94 | --vp-c-green-3: rgb(47, 95, 45); 95 | --vp-c-green-soft: hsla(109, 58%, 20%, 0.14); 96 | 97 | --vp-c-yellow-1: rgb(223, 142, 29); 98 | --vp-c-yellow-2: rgb(236, 144, 16); 99 | --vp-c-yellow-3: rgb(127, 86, 38); 100 | --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14); 101 | 102 | --vp-c-red-1: rgb(210, 15, 57); 103 | --vp-c-red-2: rgb(222, 4, 51); 104 | --vp-c-red-3: rgb(120, 23, 52); 105 | --vp-c-red-soft: hsla(347, 87%, 24%, 0.14); 106 | 107 | /* Icons */ 108 | 109 | 110 | --vp-icon-copy: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3C/svg%3E'); 111 | --vp-icon-copied: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Cpath%20d%3D%22m9%2014%202%202%204-4%22/%3E%3C/svg%3E'); 112 | 113 | /* Code Highlighting */ 114 | --vp-code-line-highlight-color: hsla(232, 10%, 53%, 0.20); 115 | } 116 | .dark { 117 | /* Fix button text color */ 118 | --vp-button-brand-text: var(--ctp-mocha-crust) !important; 119 | --vp-button-brand-hover-text: var(--ctp-mocha-crust) !important; 120 | --vp-button-brand-active-text: var(--ctp-mocha-crust) !important; 121 | 122 | /* Fix badge background color */ 123 | --vp-badge-tip-bg: hsla(232, 97%, 85%, 0.20); 124 | 125 | /* Accent Color */ 126 | --vp-c-brand-1: #b4befe; 127 | --vp-c-brand-2: rgb(154, 168, 254); 128 | --vp-c-brand-3: #b4befe; 129 | 130 | /* Solid Colors and Sponsor Color */ 131 | --vp-c-white: #cdd6f4; 132 | --vp-c-black: #1e1e2e; 133 | --vp-c-sponsor: #f38ba8; 134 | 135 | /* Background Colors */ 136 | --vp-c-bg: #1e1e2e; 137 | --vp-c-bg-alt: #181825; 138 | --vp-c-bg-elv: #11111b; 139 | --vp-c-bg-soft: #181825; 140 | 141 | /* Border Colors */ 142 | --vp-c-border: #313244; 143 | --vp-c-divider: #313244; 144 | --vp-c-gutter: #45475a; 145 | 146 | /* Text Colors */ 147 | --vp-c-text-1: #cdd6f4; 148 | --vp-c-text-2: #bac2de; 149 | --vp-c-text-3: #a6adc8; 150 | 151 | /* Callout Colors */ 152 | --vp-c-tip-soft: hsla(115, 54%, 76%, 0.20); 153 | --vp-c-warning-soft: hsla(41, 86%, 83%, 0.20); 154 | --vp-c-danger-soft: hsla(343, 81%, 75%, 0.20); 155 | --vp-c-caution-soft: hsla(343, 81%, 75%, 0.20); 156 | --vp-c-important-soft: hsla(267, 84%, 81%, 0.20); 157 | 158 | --vp-custom-block-info-bg: hsla(189, 71%, 73%, 0.20); 159 | --vp-custom-block-note-bg: hsla(217, 92%, 76%, 0.20); 160 | --vp-custom-block-details-bg: #313244; 161 | 162 | /* Catppuccin Accents */ 163 | --ctp-mocha-rosewater: #f5e0dc; 164 | --ctp-mocha-flamingo: #f2cdcd; 165 | --ctp-mocha-pink: #f5c2e7; 166 | --ctp-mocha-mauve: #cba6f7; 167 | --ctp-mocha-red: #f38ba8; 168 | --ctp-mocha-maroon: #eba0ac; 169 | --ctp-mocha-peach: #fab387; 170 | --ctp-mocha-yellow: #f9e2af; 171 | --ctp-mocha-green: #a6e3a1; 172 | --ctp-mocha-teal: #94e2d5; 173 | --ctp-mocha-sky: #89dceb; 174 | --ctp-mocha-sapphire: #74c7ec; 175 | --ctp-mocha-blue: #89b4fa; 176 | --ctp-mocha-lavender: #b4befe; 177 | --ctp-mocha-text: #cdd6f4; 178 | --ctp-mocha-subtext1: #bac2de; 179 | --ctp-mocha-subtext0: #a6adc8; 180 | --ctp-mocha-overlay2: #9399b2; 181 | --ctp-mocha-overlay1: #7f849c; 182 | --ctp-mocha-overlay0: #6c7086; 183 | --ctp-mocha-surface2: #585b70; 184 | --ctp-mocha-surface1: #45475a; 185 | --ctp-mocha-surface0: #313244; 186 | --ctp-mocha-base: #1e1e2e; 187 | --ctp-mocha-mantle: #181825; 188 | --ctp-mocha-crust: #11111b; 189 | 190 | /* Color Palette */ 191 | --vp-c-gray-1: rgb(69, 71, 90); 192 | --vp-c-gray-2: rgb(49, 50, 68); 193 | --vp-c-gray-3: rgb(30, 30, 46); 194 | --vp-c-gray-soft: hsla(240, 21%, 45%, 0.14); 195 | 196 | --vp-c-default-soft: #313244; 197 | 198 | --vp-c-indigo-1: rgb(137, 180, 250); 199 | --vp-c-indigo-2: rgb(133, 180, 255); 200 | --vp-c-indigo-3: rgb(84, 105, 148); 201 | --vp-c-indigo-soft: hsla(217, 92%, 56%, 0.14); 202 | 203 | --vp-c-purple-1: rgb(203, 166, 247); 204 | --vp-c-purple-2: rgb(203, 162, 252); 205 | --vp-c-purple-3: rgb(117, 98, 147); 206 | --vp-c-purple-soft: hsla(267, 84%, 61%, 0.14); 207 | 208 | --vp-c-green-1: rgb(166, 227, 161); 209 | --vp-c-green-2: rgb(161, 233, 155); 210 | --vp-c-green-3: rgb(98, 129, 104); 211 | --vp-c-green-soft: hsla(115, 54%, 56%, 0.14); 212 | 213 | --vp-c-yellow-1: rgb(249, 226, 175); 214 | --vp-c-yellow-2: rgb(253, 227, 171); 215 | --vp-c-yellow-3: rgb(140, 128, 111); 216 | --vp-c-yellow-soft: hsla(41, 86%, 63%, 0.14); 217 | 218 | --vp-c-red-1: rgb(243, 139, 168); 219 | --vp-c-red-2: rgb(249, 133, 166); 220 | --vp-c-red-3: rgb(137, 85, 107); 221 | --vp-c-red-soft: hsla(343, 81%, 55%, 0.14); 222 | 223 | /* Icons */ 224 | 225 | 226 | --vp-icon-copy: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3C/svg%3E'); 227 | --vp-icon-copied: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Cpath%20d%3D%22m9%2014%202%202%204-4%22/%3E%3C/svg%3E'); 228 | 229 | /* Code Highlighting */ 230 | --vp-code-line-highlight-color: hsla(228, 17%, 64%, 0.20); 231 | } 232 | -------------------------------------------------------------------------------- /theme/mocha/rosewater.css: -------------------------------------------------------------------------------- 1 | /* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */ 2 | /* https://catppuccin.com/palette */ 3 | 4 | 5 | :root { 6 | /* Fix badge background color */ 7 | --vp-badge-tip-bg: hsla(11, 59%, 67%, 0.20); 8 | 9 | /* Accent Color */ 10 | --vp-c-brand-1: #dc8a78; 11 | --vp-c-brand-2: rgb(215, 120, 99); 12 | --vp-c-brand-3: #dc8a78; 13 | 14 | /* Solid Colors and Sponsor Color */ 15 | --vp-c-white: #eff1f5; 16 | --vp-c-black: #4c4f69; 17 | --vp-c-sponsor: #d20f39; 18 | 19 | /* Background Colors */ 20 | --vp-c-bg: #eff1f5; 21 | --vp-c-bg-alt: #e6e9ef; 22 | --vp-c-bg-elv: #dce0e8; 23 | --vp-c-bg-soft: #e6e9ef; 24 | 25 | /* Border Colors */ 26 | --vp-c-border: #ccd0da; 27 | --vp-c-divider: #ccd0da; 28 | --vp-c-gutter: #bcc0cc; 29 | 30 | /* Text Colors */ 31 | --vp-c-text-1: #4c4f69; 32 | --vp-c-text-2: #5c5f77; 33 | --vp-c-text-3: #6c6f85; 34 | 35 | /* Callout Colors */ 36 | --vp-c-tip-soft: hsla(109, 58%, 40%, 0.20); 37 | --vp-c-warning-soft: hsla(35, 77%, 49%, 0.20); 38 | --vp-c-danger-soft: hsla(347, 87%, 44%, 0.20); 39 | --vp-c-caution-soft: hsla(347, 87%, 44%, 0.20); 40 | --vp-c-important-soft: hsla(266, 85%, 58%, 0.20); 41 | 42 | --vp-custom-block-info-bg: hsla(197, 96%, 46%, 0.20); 43 | --vp-custom-block-note-bg: hsla(220, 91%, 54%, 0.20); 44 | --vp-custom-block-details-bg: #ccd0da; 45 | 46 | /* Catppuccin Accents */ 47 | --ctp-latte-rosewater: #dc8a78; 48 | --ctp-latte-flamingo: #dd7878; 49 | --ctp-latte-pink: #ea76cb; 50 | --ctp-latte-mauve: #8839ef; 51 | --ctp-latte-red: #d20f39; 52 | --ctp-latte-maroon: #e64553; 53 | --ctp-latte-peach: #fe640b; 54 | --ctp-latte-yellow: #df8e1d; 55 | --ctp-latte-green: #40a02b; 56 | --ctp-latte-teal: #179299; 57 | --ctp-latte-sky: #04a5e5; 58 | --ctp-latte-sapphire: #209fb5; 59 | --ctp-latte-blue: #1e66f5; 60 | --ctp-latte-lavender: #7287fd; 61 | --ctp-latte-text: #4c4f69; 62 | --ctp-latte-subtext1: #5c5f77; 63 | --ctp-latte-subtext0: #6c6f85; 64 | --ctp-latte-overlay2: #7c7f93; 65 | --ctp-latte-overlay1: #8c8fa1; 66 | --ctp-latte-overlay0: #9ca0b0; 67 | --ctp-latte-surface2: #acb0be; 68 | --ctp-latte-surface1: #bcc0cc; 69 | --ctp-latte-surface0: #ccd0da; 70 | --ctp-latte-base: #eff1f5; 71 | --ctp-latte-mantle: #e6e9ef; 72 | --ctp-latte-crust: #dce0e8; 73 | 74 | /* Color Palette */ 75 | --vp-c-gray-1: rgb(188, 192, 204); 76 | --vp-c-gray-2: rgb(204, 208, 218); 77 | --vp-c-gray-3: rgb(239, 241, 245); 78 | --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14); 79 | 80 | --vp-c-default-soft: #ccd0da; 81 | 82 | --vp-c-indigo-1: rgb(30, 102, 245); 83 | --vp-c-indigo-2: rgb(21, 99, 255); 84 | --vp-c-indigo-3: rgb(30, 66, 146); 85 | --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14); 86 | 87 | --vp-c-purple-1: rgb(136, 57, 239); 88 | --vp-c-purple-2: rgb(134, 46, 250); 89 | --vp-c-purple-3: rgb(83, 44, 143); 90 | --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14); 91 | 92 | --vp-c-green-1: rgb(64, 160, 43); 93 | --vp-c-green-2: rgb(58, 171, 33); 94 | --vp-c-green-3: rgb(47, 95, 45); 95 | --vp-c-green-soft: hsla(109, 58%, 20%, 0.14); 96 | 97 | --vp-c-yellow-1: rgb(223, 142, 29); 98 | --vp-c-yellow-2: rgb(236, 144, 16); 99 | --vp-c-yellow-3: rgb(127, 86, 38); 100 | --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14); 101 | 102 | --vp-c-red-1: rgb(210, 15, 57); 103 | --vp-c-red-2: rgb(222, 4, 51); 104 | --vp-c-red-3: rgb(120, 23, 52); 105 | --vp-c-red-soft: hsla(347, 87%, 24%, 0.14); 106 | 107 | /* Icons */ 108 | 109 | 110 | --vp-icon-copy: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3C/svg%3E'); 111 | --vp-icon-copied: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Cpath%20d%3D%22m9%2014%202%202%204-4%22/%3E%3C/svg%3E'); 112 | 113 | /* Code Highlighting */ 114 | --vp-code-line-highlight-color: hsla(232, 10%, 53%, 0.20); 115 | } 116 | .dark { 117 | /* Fix button text color */ 118 | --vp-button-brand-text: var(--ctp-mocha-crust) !important; 119 | --vp-button-brand-hover-text: var(--ctp-mocha-crust) !important; 120 | --vp-button-brand-active-text: var(--ctp-mocha-crust) !important; 121 | 122 | /* Fix badge background color */ 123 | --vp-badge-tip-bg: hsla(10, 56%, 91%, 0.20); 124 | 125 | /* Accent Color */ 126 | --vp-c-brand-1: #f5e0dc; 127 | --vp-c-brand-2: rgb(239, 207, 201); 128 | --vp-c-brand-3: #f5e0dc; 129 | 130 | /* Solid Colors and Sponsor Color */ 131 | --vp-c-white: #cdd6f4; 132 | --vp-c-black: #1e1e2e; 133 | --vp-c-sponsor: #f38ba8; 134 | 135 | /* Background Colors */ 136 | --vp-c-bg: #1e1e2e; 137 | --vp-c-bg-alt: #181825; 138 | --vp-c-bg-elv: #11111b; 139 | --vp-c-bg-soft: #181825; 140 | 141 | /* Border Colors */ 142 | --vp-c-border: #313244; 143 | --vp-c-divider: #313244; 144 | --vp-c-gutter: #45475a; 145 | 146 | /* Text Colors */ 147 | --vp-c-text-1: #cdd6f4; 148 | --vp-c-text-2: #bac2de; 149 | --vp-c-text-3: #a6adc8; 150 | 151 | /* Callout Colors */ 152 | --vp-c-tip-soft: hsla(115, 54%, 76%, 0.20); 153 | --vp-c-warning-soft: hsla(41, 86%, 83%, 0.20); 154 | --vp-c-danger-soft: hsla(343, 81%, 75%, 0.20); 155 | --vp-c-caution-soft: hsla(343, 81%, 75%, 0.20); 156 | --vp-c-important-soft: hsla(267, 84%, 81%, 0.20); 157 | 158 | --vp-custom-block-info-bg: hsla(189, 71%, 73%, 0.20); 159 | --vp-custom-block-note-bg: hsla(217, 92%, 76%, 0.20); 160 | --vp-custom-block-details-bg: #313244; 161 | 162 | /* Catppuccin Accents */ 163 | --ctp-mocha-rosewater: #f5e0dc; 164 | --ctp-mocha-flamingo: #f2cdcd; 165 | --ctp-mocha-pink: #f5c2e7; 166 | --ctp-mocha-mauve: #cba6f7; 167 | --ctp-mocha-red: #f38ba8; 168 | --ctp-mocha-maroon: #eba0ac; 169 | --ctp-mocha-peach: #fab387; 170 | --ctp-mocha-yellow: #f9e2af; 171 | --ctp-mocha-green: #a6e3a1; 172 | --ctp-mocha-teal: #94e2d5; 173 | --ctp-mocha-sky: #89dceb; 174 | --ctp-mocha-sapphire: #74c7ec; 175 | --ctp-mocha-blue: #89b4fa; 176 | --ctp-mocha-lavender: #b4befe; 177 | --ctp-mocha-text: #cdd6f4; 178 | --ctp-mocha-subtext1: #bac2de; 179 | --ctp-mocha-subtext0: #a6adc8; 180 | --ctp-mocha-overlay2: #9399b2; 181 | --ctp-mocha-overlay1: #7f849c; 182 | --ctp-mocha-overlay0: #6c7086; 183 | --ctp-mocha-surface2: #585b70; 184 | --ctp-mocha-surface1: #45475a; 185 | --ctp-mocha-surface0: #313244; 186 | --ctp-mocha-base: #1e1e2e; 187 | --ctp-mocha-mantle: #181825; 188 | --ctp-mocha-crust: #11111b; 189 | 190 | /* Color Palette */ 191 | --vp-c-gray-1: rgb(69, 71, 90); 192 | --vp-c-gray-2: rgb(49, 50, 68); 193 | --vp-c-gray-3: rgb(30, 30, 46); 194 | --vp-c-gray-soft: hsla(240, 21%, 45%, 0.14); 195 | 196 | --vp-c-default-soft: #313244; 197 | 198 | --vp-c-indigo-1: rgb(137, 180, 250); 199 | --vp-c-indigo-2: rgb(133, 180, 255); 200 | --vp-c-indigo-3: rgb(84, 105, 148); 201 | --vp-c-indigo-soft: hsla(217, 92%, 56%, 0.14); 202 | 203 | --vp-c-purple-1: rgb(203, 166, 247); 204 | --vp-c-purple-2: rgb(203, 162, 252); 205 | --vp-c-purple-3: rgb(117, 98, 147); 206 | --vp-c-purple-soft: hsla(267, 84%, 61%, 0.14); 207 | 208 | --vp-c-green-1: rgb(166, 227, 161); 209 | --vp-c-green-2: rgb(161, 233, 155); 210 | --vp-c-green-3: rgb(98, 129, 104); 211 | --vp-c-green-soft: hsla(115, 54%, 56%, 0.14); 212 | 213 | --vp-c-yellow-1: rgb(249, 226, 175); 214 | --vp-c-yellow-2: rgb(253, 227, 171); 215 | --vp-c-yellow-3: rgb(140, 128, 111); 216 | --vp-c-yellow-soft: hsla(41, 86%, 63%, 0.14); 217 | 218 | --vp-c-red-1: rgb(243, 139, 168); 219 | --vp-c-red-2: rgb(249, 133, 166); 220 | --vp-c-red-3: rgb(137, 85, 107); 221 | --vp-c-red-soft: hsla(343, 81%, 55%, 0.14); 222 | 223 | /* Icons */ 224 | 225 | 226 | --vp-icon-copy: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3C/svg%3E'); 227 | --vp-icon-copied: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Cpath%20d%3D%22m9%2014%202%202%204-4%22/%3E%3C/svg%3E'); 228 | 229 | /* Code Highlighting */ 230 | --vp-code-line-highlight-color: hsla(228, 17%, 64%, 0.20); 231 | } 232 | -------------------------------------------------------------------------------- /theme/mocha/sapphire.css: -------------------------------------------------------------------------------- 1 | /* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */ 2 | /* https://catppuccin.com/palette */ 3 | 4 | 5 | :root { 6 | /* Fix badge background color */ 7 | --vp-badge-tip-bg: hsla(189, 70%, 42%, 0.20); 8 | 9 | /* Accent Color */ 10 | --vp-c-brand-1: #209fb5; 11 | --vp-c-brand-2: rgb(28, 140, 160); 12 | --vp-c-brand-3: #209fb5; 13 | 14 | /* Solid Colors and Sponsor Color */ 15 | --vp-c-white: #eff1f5; 16 | --vp-c-black: #4c4f69; 17 | --vp-c-sponsor: #d20f39; 18 | 19 | /* Background Colors */ 20 | --vp-c-bg: #eff1f5; 21 | --vp-c-bg-alt: #e6e9ef; 22 | --vp-c-bg-elv: #dce0e8; 23 | --vp-c-bg-soft: #e6e9ef; 24 | 25 | /* Border Colors */ 26 | --vp-c-border: #ccd0da; 27 | --vp-c-divider: #ccd0da; 28 | --vp-c-gutter: #bcc0cc; 29 | 30 | /* Text Colors */ 31 | --vp-c-text-1: #4c4f69; 32 | --vp-c-text-2: #5c5f77; 33 | --vp-c-text-3: #6c6f85; 34 | 35 | /* Callout Colors */ 36 | --vp-c-tip-soft: hsla(109, 58%, 40%, 0.20); 37 | --vp-c-warning-soft: hsla(35, 77%, 49%, 0.20); 38 | --vp-c-danger-soft: hsla(347, 87%, 44%, 0.20); 39 | --vp-c-caution-soft: hsla(347, 87%, 44%, 0.20); 40 | --vp-c-important-soft: hsla(266, 85%, 58%, 0.20); 41 | 42 | --vp-custom-block-info-bg: hsla(197, 96%, 46%, 0.20); 43 | --vp-custom-block-note-bg: hsla(220, 91%, 54%, 0.20); 44 | --vp-custom-block-details-bg: #ccd0da; 45 | 46 | /* Catppuccin Accents */ 47 | --ctp-latte-rosewater: #dc8a78; 48 | --ctp-latte-flamingo: #dd7878; 49 | --ctp-latte-pink: #ea76cb; 50 | --ctp-latte-mauve: #8839ef; 51 | --ctp-latte-red: #d20f39; 52 | --ctp-latte-maroon: #e64553; 53 | --ctp-latte-peach: #fe640b; 54 | --ctp-latte-yellow: #df8e1d; 55 | --ctp-latte-green: #40a02b; 56 | --ctp-latte-teal: #179299; 57 | --ctp-latte-sky: #04a5e5; 58 | --ctp-latte-sapphire: #209fb5; 59 | --ctp-latte-blue: #1e66f5; 60 | --ctp-latte-lavender: #7287fd; 61 | --ctp-latte-text: #4c4f69; 62 | --ctp-latte-subtext1: #5c5f77; 63 | --ctp-latte-subtext0: #6c6f85; 64 | --ctp-latte-overlay2: #7c7f93; 65 | --ctp-latte-overlay1: #8c8fa1; 66 | --ctp-latte-overlay0: #9ca0b0; 67 | --ctp-latte-surface2: #acb0be; 68 | --ctp-latte-surface1: #bcc0cc; 69 | --ctp-latte-surface0: #ccd0da; 70 | --ctp-latte-base: #eff1f5; 71 | --ctp-latte-mantle: #e6e9ef; 72 | --ctp-latte-crust: #dce0e8; 73 | 74 | /* Color Palette */ 75 | --vp-c-gray-1: rgb(188, 192, 204); 76 | --vp-c-gray-2: rgb(204, 208, 218); 77 | --vp-c-gray-3: rgb(239, 241, 245); 78 | --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14); 79 | 80 | --vp-c-default-soft: #ccd0da; 81 | 82 | --vp-c-indigo-1: rgb(30, 102, 245); 83 | --vp-c-indigo-2: rgb(21, 99, 255); 84 | --vp-c-indigo-3: rgb(30, 66, 146); 85 | --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14); 86 | 87 | --vp-c-purple-1: rgb(136, 57, 239); 88 | --vp-c-purple-2: rgb(134, 46, 250); 89 | --vp-c-purple-3: rgb(83, 44, 143); 90 | --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14); 91 | 92 | --vp-c-green-1: rgb(64, 160, 43); 93 | --vp-c-green-2: rgb(58, 171, 33); 94 | --vp-c-green-3: rgb(47, 95, 45); 95 | --vp-c-green-soft: hsla(109, 58%, 20%, 0.14); 96 | 97 | --vp-c-yellow-1: rgb(223, 142, 29); 98 | --vp-c-yellow-2: rgb(236, 144, 16); 99 | --vp-c-yellow-3: rgb(127, 86, 38); 100 | --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14); 101 | 102 | --vp-c-red-1: rgb(210, 15, 57); 103 | --vp-c-red-2: rgb(222, 4, 51); 104 | --vp-c-red-3: rgb(120, 23, 52); 105 | --vp-c-red-soft: hsla(347, 87%, 24%, 0.14); 106 | 107 | /* Icons */ 108 | 109 | 110 | --vp-icon-copy: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3C/svg%3E'); 111 | --vp-icon-copied: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Cpath%20d%3D%22m9%2014%202%202%204-4%22/%3E%3C/svg%3E'); 112 | 113 | /* Code Highlighting */ 114 | --vp-code-line-highlight-color: hsla(232, 10%, 53%, 0.20); 115 | } 116 | .dark { 117 | /* Fix button text color */ 118 | --vp-button-brand-text: var(--ctp-mocha-crust) !important; 119 | --vp-button-brand-hover-text: var(--ctp-mocha-crust) !important; 120 | --vp-button-brand-active-text: var(--ctp-mocha-crust) !important; 121 | 122 | /* Fix badge background color */ 123 | --vp-badge-tip-bg: hsla(199, 76%, 69%, 0.20); 124 | 125 | /* Accent Color */ 126 | --vp-c-brand-1: #74c7ec; 127 | --vp-c-brand-2: rgb(93, 189, 233); 128 | --vp-c-brand-3: #74c7ec; 129 | 130 | /* Solid Colors and Sponsor Color */ 131 | --vp-c-white: #cdd6f4; 132 | --vp-c-black: #1e1e2e; 133 | --vp-c-sponsor: #f38ba8; 134 | 135 | /* Background Colors */ 136 | --vp-c-bg: #1e1e2e; 137 | --vp-c-bg-alt: #181825; 138 | --vp-c-bg-elv: #11111b; 139 | --vp-c-bg-soft: #181825; 140 | 141 | /* Border Colors */ 142 | --vp-c-border: #313244; 143 | --vp-c-divider: #313244; 144 | --vp-c-gutter: #45475a; 145 | 146 | /* Text Colors */ 147 | --vp-c-text-1: #cdd6f4; 148 | --vp-c-text-2: #bac2de; 149 | --vp-c-text-3: #a6adc8; 150 | 151 | /* Callout Colors */ 152 | --vp-c-tip-soft: hsla(115, 54%, 76%, 0.20); 153 | --vp-c-warning-soft: hsla(41, 86%, 83%, 0.20); 154 | --vp-c-danger-soft: hsla(343, 81%, 75%, 0.20); 155 | --vp-c-caution-soft: hsla(343, 81%, 75%, 0.20); 156 | --vp-c-important-soft: hsla(267, 84%, 81%, 0.20); 157 | 158 | --vp-custom-block-info-bg: hsla(189, 71%, 73%, 0.20); 159 | --vp-custom-block-note-bg: hsla(217, 92%, 76%, 0.20); 160 | --vp-custom-block-details-bg: #313244; 161 | 162 | /* Catppuccin Accents */ 163 | --ctp-mocha-rosewater: #f5e0dc; 164 | --ctp-mocha-flamingo: #f2cdcd; 165 | --ctp-mocha-pink: #f5c2e7; 166 | --ctp-mocha-mauve: #cba6f7; 167 | --ctp-mocha-red: #f38ba8; 168 | --ctp-mocha-maroon: #eba0ac; 169 | --ctp-mocha-peach: #fab387; 170 | --ctp-mocha-yellow: #f9e2af; 171 | --ctp-mocha-green: #a6e3a1; 172 | --ctp-mocha-teal: #94e2d5; 173 | --ctp-mocha-sky: #89dceb; 174 | --ctp-mocha-sapphire: #74c7ec; 175 | --ctp-mocha-blue: #89b4fa; 176 | --ctp-mocha-lavender: #b4befe; 177 | --ctp-mocha-text: #cdd6f4; 178 | --ctp-mocha-subtext1: #bac2de; 179 | --ctp-mocha-subtext0: #a6adc8; 180 | --ctp-mocha-overlay2: #9399b2; 181 | --ctp-mocha-overlay1: #7f849c; 182 | --ctp-mocha-overlay0: #6c7086; 183 | --ctp-mocha-surface2: #585b70; 184 | --ctp-mocha-surface1: #45475a; 185 | --ctp-mocha-surface0: #313244; 186 | --ctp-mocha-base: #1e1e2e; 187 | --ctp-mocha-mantle: #181825; 188 | --ctp-mocha-crust: #11111b; 189 | 190 | /* Color Palette */ 191 | --vp-c-gray-1: rgb(69, 71, 90); 192 | --vp-c-gray-2: rgb(49, 50, 68); 193 | --vp-c-gray-3: rgb(30, 30, 46); 194 | --vp-c-gray-soft: hsla(240, 21%, 45%, 0.14); 195 | 196 | --vp-c-default-soft: #313244; 197 | 198 | --vp-c-indigo-1: rgb(137, 180, 250); 199 | --vp-c-indigo-2: rgb(133, 180, 255); 200 | --vp-c-indigo-3: rgb(84, 105, 148); 201 | --vp-c-indigo-soft: hsla(217, 92%, 56%, 0.14); 202 | 203 | --vp-c-purple-1: rgb(203, 166, 247); 204 | --vp-c-purple-2: rgb(203, 162, 252); 205 | --vp-c-purple-3: rgb(117, 98, 147); 206 | --vp-c-purple-soft: hsla(267, 84%, 61%, 0.14); 207 | 208 | --vp-c-green-1: rgb(166, 227, 161); 209 | --vp-c-green-2: rgb(161, 233, 155); 210 | --vp-c-green-3: rgb(98, 129, 104); 211 | --vp-c-green-soft: hsla(115, 54%, 56%, 0.14); 212 | 213 | --vp-c-yellow-1: rgb(249, 226, 175); 214 | --vp-c-yellow-2: rgb(253, 227, 171); 215 | --vp-c-yellow-3: rgb(140, 128, 111); 216 | --vp-c-yellow-soft: hsla(41, 86%, 63%, 0.14); 217 | 218 | --vp-c-red-1: rgb(243, 139, 168); 219 | --vp-c-red-2: rgb(249, 133, 166); 220 | --vp-c-red-3: rgb(137, 85, 107); 221 | --vp-c-red-soft: hsla(343, 81%, 55%, 0.14); 222 | 223 | /* Icons */ 224 | 225 | 226 | --vp-icon-copy: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3C/svg%3E'); 227 | --vp-icon-copied: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a6adc8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Cpath%20d%3D%22m9%2014%202%202%204-4%22/%3E%3C/svg%3E'); 228 | 229 | /* Code Highlighting */ 230 | --vp-code-line-highlight-color: hsla(228, 17%, 64%, 0.20); 231 | } 232 | -------------------------------------------------------------------------------- /theme/frappe/peach.css: -------------------------------------------------------------------------------- 1 | /* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */ 2 | /* https://catppuccin.com/palette */ 3 | 4 | 5 | :root { 6 | /* Fix badge background color */ 7 | --vp-badge-tip-bg: hsla(22, 99%, 52%, 0.20); 8 | 9 | /* Accent Color */ 10 | --vp-c-brand-1: #fe640b; 11 | --vp-c-brand-2: rgb(239, 88, 1); 12 | --vp-c-brand-3: #fe640b; 13 | 14 | /* Solid Colors and Sponsor Color */ 15 | --vp-c-white: #eff1f5; 16 | --vp-c-black: #4c4f69; 17 | --vp-c-sponsor: #d20f39; 18 | 19 | /* Background Colors */ 20 | --vp-c-bg: #eff1f5; 21 | --vp-c-bg-alt: #e6e9ef; 22 | --vp-c-bg-elv: #dce0e8; 23 | --vp-c-bg-soft: #e6e9ef; 24 | 25 | /* Border Colors */ 26 | --vp-c-border: #ccd0da; 27 | --vp-c-divider: #ccd0da; 28 | --vp-c-gutter: #bcc0cc; 29 | 30 | /* Text Colors */ 31 | --vp-c-text-1: #4c4f69; 32 | --vp-c-text-2: #5c5f77; 33 | --vp-c-text-3: #6c6f85; 34 | 35 | /* Callout Colors */ 36 | --vp-c-tip-soft: hsla(109, 58%, 40%, 0.20); 37 | --vp-c-warning-soft: hsla(35, 77%, 49%, 0.20); 38 | --vp-c-danger-soft: hsla(347, 87%, 44%, 0.20); 39 | --vp-c-caution-soft: hsla(347, 87%, 44%, 0.20); 40 | --vp-c-important-soft: hsla(266, 85%, 58%, 0.20); 41 | 42 | --vp-custom-block-info-bg: hsla(197, 96%, 46%, 0.20); 43 | --vp-custom-block-note-bg: hsla(220, 91%, 54%, 0.20); 44 | --vp-custom-block-details-bg: #ccd0da; 45 | 46 | /* Catppuccin Accents */ 47 | --ctp-latte-rosewater: #dc8a78; 48 | --ctp-latte-flamingo: #dd7878; 49 | --ctp-latte-pink: #ea76cb; 50 | --ctp-latte-mauve: #8839ef; 51 | --ctp-latte-red: #d20f39; 52 | --ctp-latte-maroon: #e64553; 53 | --ctp-latte-peach: #fe640b; 54 | --ctp-latte-yellow: #df8e1d; 55 | --ctp-latte-green: #40a02b; 56 | --ctp-latte-teal: #179299; 57 | --ctp-latte-sky: #04a5e5; 58 | --ctp-latte-sapphire: #209fb5; 59 | --ctp-latte-blue: #1e66f5; 60 | --ctp-latte-lavender: #7287fd; 61 | --ctp-latte-text: #4c4f69; 62 | --ctp-latte-subtext1: #5c5f77; 63 | --ctp-latte-subtext0: #6c6f85; 64 | --ctp-latte-overlay2: #7c7f93; 65 | --ctp-latte-overlay1: #8c8fa1; 66 | --ctp-latte-overlay0: #9ca0b0; 67 | --ctp-latte-surface2: #acb0be; 68 | --ctp-latte-surface1: #bcc0cc; 69 | --ctp-latte-surface0: #ccd0da; 70 | --ctp-latte-base: #eff1f5; 71 | --ctp-latte-mantle: #e6e9ef; 72 | --ctp-latte-crust: #dce0e8; 73 | 74 | /* Color Palette */ 75 | --vp-c-gray-1: rgb(188, 192, 204); 76 | --vp-c-gray-2: rgb(204, 208, 218); 77 | --vp-c-gray-3: rgb(239, 241, 245); 78 | --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14); 79 | 80 | --vp-c-default-soft: #ccd0da; 81 | 82 | --vp-c-indigo-1: rgb(30, 102, 245); 83 | --vp-c-indigo-2: rgb(21, 99, 255); 84 | --vp-c-indigo-3: rgb(39, 77, 158); 85 | --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14); 86 | 87 | --vp-c-purple-1: rgb(136, 57, 239); 88 | --vp-c-purple-2: rgb(134, 46, 250); 89 | --vp-c-purple-3: rgb(92, 55, 155); 90 | --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14); 91 | 92 | --vp-c-green-1: rgb(64, 160, 43); 93 | --vp-c-green-2: rgb(58, 171, 33); 94 | --vp-c-green-3: rgb(56, 106, 57); 95 | --vp-c-green-soft: hsla(109, 58%, 20%, 0.14); 96 | 97 | --vp-c-yellow-1: rgb(223, 142, 29); 98 | --vp-c-yellow-2: rgb(236, 144, 16); 99 | --vp-c-yellow-3: rgb(136, 97, 50); 100 | --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14); 101 | 102 | --vp-c-red-1: rgb(210, 15, 57); 103 | --vp-c-red-2: rgb(222, 4, 51); 104 | --vp-c-red-3: rgb(129, 34, 64); 105 | --vp-c-red-soft: hsla(347, 87%, 24%, 0.14); 106 | 107 | /* Icons */ 108 | 109 | 110 | --vp-icon-copy: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a5adce%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3C/svg%3E'); 111 | --vp-icon-copied: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a5adce%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Cpath%20d%3D%22m9%2014%202%202%204-4%22/%3E%3C/svg%3E'); 112 | 113 | /* Code Highlighting */ 114 | --vp-code-line-highlight-color: hsla(232, 10%, 53%, 0.20); 115 | } 116 | .dark { 117 | /* Fix button text color */ 118 | --vp-button-brand-text: var(--ctp-frappe-crust) !important; 119 | --vp-button-brand-hover-text: var(--ctp-frappe-crust) !important; 120 | --vp-button-brand-active-text: var(--ctp-mocha-crust) !important; 121 | 122 | /* Fix badge background color */ 123 | --vp-badge-tip-bg: hsla(20, 79%, 70%, 0.20); 124 | 125 | /* Accent Color */ 126 | --vp-c-brand-1: #ef9f76; 127 | --vp-c-brand-2: rgb(237, 142, 95); 128 | --vp-c-brand-3: #ef9f76; 129 | 130 | /* Solid Colors and Sponsor Color */ 131 | --vp-c-white: #c6d0f5; 132 | --vp-c-black: #303446; 133 | --vp-c-sponsor: #e78284; 134 | 135 | /* Background Colors */ 136 | --vp-c-bg: #303446; 137 | --vp-c-bg-alt: #292c3c; 138 | --vp-c-bg-elv: #232634; 139 | --vp-c-bg-soft: #292c3c; 140 | 141 | /* Border Colors */ 142 | --vp-c-border: #414559; 143 | --vp-c-divider: #414559; 144 | --vp-c-gutter: #51576d; 145 | 146 | /* Text Colors */ 147 | --vp-c-text-1: #c6d0f5; 148 | --vp-c-text-2: #b5bfe2; 149 | --vp-c-text-3: #a5adce; 150 | 151 | /* Callout Colors */ 152 | --vp-c-tip-soft: hsla(96, 44%, 68%, 0.20); 153 | --vp-c-warning-soft: hsla(40, 62%, 73%, 0.20); 154 | --vp-c-danger-soft: hsla(359, 68%, 71%, 0.20); 155 | --vp-c-caution-soft: hsla(359, 68%, 71%, 0.20); 156 | --vp-c-important-soft: hsla(277, 59%, 76%, 0.20); 157 | 158 | --vp-custom-block-info-bg: hsla(189, 48%, 73%, 0.20); 159 | --vp-custom-block-note-bg: hsla(222, 74%, 74%, 0.20); 160 | --vp-custom-block-details-bg: #414559; 161 | 162 | /* Catppuccin Accents */ 163 | --ctp-frappe-rosewater: #f2d5cf; 164 | --ctp-frappe-flamingo: #eebebe; 165 | --ctp-frappe-pink: #f4b8e4; 166 | --ctp-frappe-mauve: #ca9ee6; 167 | --ctp-frappe-red: #e78284; 168 | --ctp-frappe-maroon: #ea999c; 169 | --ctp-frappe-peach: #ef9f76; 170 | --ctp-frappe-yellow: #e5c890; 171 | --ctp-frappe-green: #a6d189; 172 | --ctp-frappe-teal: #81c8be; 173 | --ctp-frappe-sky: #99d1db; 174 | --ctp-frappe-sapphire: #85c1dc; 175 | --ctp-frappe-blue: #8caaee; 176 | --ctp-frappe-lavender: #babbf1; 177 | --ctp-frappe-text: #c6d0f5; 178 | --ctp-frappe-subtext1: #b5bfe2; 179 | --ctp-frappe-subtext0: #a5adce; 180 | --ctp-frappe-overlay2: #949cbb; 181 | --ctp-frappe-overlay1: #838ba7; 182 | --ctp-frappe-overlay0: #737994; 183 | --ctp-frappe-surface2: #626880; 184 | --ctp-frappe-surface1: #51576d; 185 | --ctp-frappe-surface0: #414559; 186 | --ctp-frappe-base: #303446; 187 | --ctp-frappe-mantle: #292c3c; 188 | --ctp-frappe-crust: #232634; 189 | 190 | /* Color Palette */ 191 | --vp-c-gray-1: rgb(81, 87, 109); 192 | --vp-c-gray-2: rgb(65, 69, 89); 193 | --vp-c-gray-3: rgb(48, 52, 70); 194 | --vp-c-gray-soft: hsla(229, 19%, 53%, 0.14); 195 | 196 | --vp-c-default-soft: #414559; 197 | 198 | --vp-c-indigo-1: rgb(140, 170, 238); 199 | --vp-c-indigo-2: rgb(133, 167, 245); 200 | --vp-c-indigo-3: rgb(94, 111, 154); 201 | --vp-c-indigo-soft: hsla(222, 74%, 54%, 0.14); 202 | 203 | --vp-c-purple-1: rgb(202, 158, 230); 204 | --vp-c-purple-2: rgb(204, 152, 236); 205 | --vp-c-purple-3: rgb(125, 105, 150); 206 | --vp-c-purple-soft: hsla(277, 59%, 56%, 0.14); 207 | 208 | --vp-c-green-1: rgb(166, 209, 137); 209 | --vp-c-green-2: rgb(164, 217, 129); 210 | --vp-c-green-3: rgb(107, 131, 104); 211 | --vp-c-green-soft: hsla(96, 44%, 48%, 0.14); 212 | 213 | --vp-c-yellow-1: rgb(229, 200, 144); 214 | --vp-c-yellow-2: rgb(236, 203, 138); 215 | --vp-c-yellow-3: rgb(139, 126, 107); 216 | --vp-c-yellow-soft: hsla(40, 62%, 53%, 0.14); 217 | 218 | --vp-c-red-1: rgb(231, 130, 132); 219 | --vp-c-red-2: rgb(239, 123, 125); 220 | --vp-c-red-3: rgb(140, 91, 101); 221 | --vp-c-red-soft: hsla(359, 68%, 51%, 0.14); 222 | 223 | /* Icons */ 224 | 225 | 226 | --vp-icon-copy: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a5adce%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3C/svg%3E'); 227 | --vp-icon-copied: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a5adce%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Cpath%20d%3D%22m9%2014%202%202%204-4%22/%3E%3C/svg%3E'); 228 | 229 | /* Code Highlighting */ 230 | --vp-code-line-highlight-color: hsla(228, 22%, 66%, 0.20); 231 | } 232 | -------------------------------------------------------------------------------- /theme/frappe/blue.css: -------------------------------------------------------------------------------- 1 | /* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */ 2 | /* https://catppuccin.com/palette */ 3 | 4 | 5 | :root { 6 | /* Fix badge background color */ 7 | --vp-badge-tip-bg: hsla(220, 91%, 54%, 0.20); 8 | 9 | /* Accent Color */ 10 | --vp-c-brand-1: #1e66f5; 11 | --vp-c-brand-2: rgb(11, 87, 239); 12 | --vp-c-brand-3: #1e66f5; 13 | 14 | /* Solid Colors and Sponsor Color */ 15 | --vp-c-white: #eff1f5; 16 | --vp-c-black: #4c4f69; 17 | --vp-c-sponsor: #d20f39; 18 | 19 | /* Background Colors */ 20 | --vp-c-bg: #eff1f5; 21 | --vp-c-bg-alt: #e6e9ef; 22 | --vp-c-bg-elv: #dce0e8; 23 | --vp-c-bg-soft: #e6e9ef; 24 | 25 | /* Border Colors */ 26 | --vp-c-border: #ccd0da; 27 | --vp-c-divider: #ccd0da; 28 | --vp-c-gutter: #bcc0cc; 29 | 30 | /* Text Colors */ 31 | --vp-c-text-1: #4c4f69; 32 | --vp-c-text-2: #5c5f77; 33 | --vp-c-text-3: #6c6f85; 34 | 35 | /* Callout Colors */ 36 | --vp-c-tip-soft: hsla(109, 58%, 40%, 0.20); 37 | --vp-c-warning-soft: hsla(35, 77%, 49%, 0.20); 38 | --vp-c-danger-soft: hsla(347, 87%, 44%, 0.20); 39 | --vp-c-caution-soft: hsla(347, 87%, 44%, 0.20); 40 | --vp-c-important-soft: hsla(266, 85%, 58%, 0.20); 41 | 42 | --vp-custom-block-info-bg: hsla(197, 96%, 46%, 0.20); 43 | --vp-custom-block-note-bg: hsla(220, 91%, 54%, 0.20); 44 | --vp-custom-block-details-bg: #ccd0da; 45 | 46 | /* Catppuccin Accents */ 47 | --ctp-latte-rosewater: #dc8a78; 48 | --ctp-latte-flamingo: #dd7878; 49 | --ctp-latte-pink: #ea76cb; 50 | --ctp-latte-mauve: #8839ef; 51 | --ctp-latte-red: #d20f39; 52 | --ctp-latte-maroon: #e64553; 53 | --ctp-latte-peach: #fe640b; 54 | --ctp-latte-yellow: #df8e1d; 55 | --ctp-latte-green: #40a02b; 56 | --ctp-latte-teal: #179299; 57 | --ctp-latte-sky: #04a5e5; 58 | --ctp-latte-sapphire: #209fb5; 59 | --ctp-latte-blue: #1e66f5; 60 | --ctp-latte-lavender: #7287fd; 61 | --ctp-latte-text: #4c4f69; 62 | --ctp-latte-subtext1: #5c5f77; 63 | --ctp-latte-subtext0: #6c6f85; 64 | --ctp-latte-overlay2: #7c7f93; 65 | --ctp-latte-overlay1: #8c8fa1; 66 | --ctp-latte-overlay0: #9ca0b0; 67 | --ctp-latte-surface2: #acb0be; 68 | --ctp-latte-surface1: #bcc0cc; 69 | --ctp-latte-surface0: #ccd0da; 70 | --ctp-latte-base: #eff1f5; 71 | --ctp-latte-mantle: #e6e9ef; 72 | --ctp-latte-crust: #dce0e8; 73 | 74 | /* Color Palette */ 75 | --vp-c-gray-1: rgb(188, 192, 204); 76 | --vp-c-gray-2: rgb(204, 208, 218); 77 | --vp-c-gray-3: rgb(239, 241, 245); 78 | --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14); 79 | 80 | --vp-c-default-soft: #ccd0da; 81 | 82 | --vp-c-indigo-1: rgb(30, 102, 245); 83 | --vp-c-indigo-2: rgb(21, 99, 255); 84 | --vp-c-indigo-3: rgb(39, 77, 158); 85 | --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14); 86 | 87 | --vp-c-purple-1: rgb(136, 57, 239); 88 | --vp-c-purple-2: rgb(134, 46, 250); 89 | --vp-c-purple-3: rgb(92, 55, 155); 90 | --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14); 91 | 92 | --vp-c-green-1: rgb(64, 160, 43); 93 | --vp-c-green-2: rgb(58, 171, 33); 94 | --vp-c-green-3: rgb(56, 106, 57); 95 | --vp-c-green-soft: hsla(109, 58%, 20%, 0.14); 96 | 97 | --vp-c-yellow-1: rgb(223, 142, 29); 98 | --vp-c-yellow-2: rgb(236, 144, 16); 99 | --vp-c-yellow-3: rgb(136, 97, 50); 100 | --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14); 101 | 102 | --vp-c-red-1: rgb(210, 15, 57); 103 | --vp-c-red-2: rgb(222, 4, 51); 104 | --vp-c-red-3: rgb(129, 34, 64); 105 | --vp-c-red-soft: hsla(347, 87%, 24%, 0.14); 106 | 107 | /* Icons */ 108 | 109 | 110 | --vp-icon-copy: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a5adce%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3C/svg%3E'); 111 | --vp-icon-copied: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a5adce%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Cpath%20d%3D%22m9%2014%202%202%204-4%22/%3E%3C/svg%3E'); 112 | 113 | /* Code Highlighting */ 114 | --vp-code-line-highlight-color: hsla(232, 10%, 53%, 0.20); 115 | } 116 | .dark { 117 | /* Fix button text color */ 118 | --vp-button-brand-text: var(--ctp-frappe-crust) !important; 119 | --vp-button-brand-hover-text: var(--ctp-frappe-crust) !important; 120 | --vp-button-brand-active-text: var(--ctp-mocha-crust) !important; 121 | 122 | /* Fix badge background color */ 123 | --vp-badge-tip-bg: hsla(222, 74%, 74%, 0.20); 124 | 125 | /* Accent Color */ 126 | --vp-c-brand-1: #8caaee; 127 | --vp-c-brand-2: rgb(117, 153, 235); 128 | --vp-c-brand-3: #8caaee; 129 | 130 | /* Solid Colors and Sponsor Color */ 131 | --vp-c-white: #c6d0f5; 132 | --vp-c-black: #303446; 133 | --vp-c-sponsor: #e78284; 134 | 135 | /* Background Colors */ 136 | --vp-c-bg: #303446; 137 | --vp-c-bg-alt: #292c3c; 138 | --vp-c-bg-elv: #232634; 139 | --vp-c-bg-soft: #292c3c; 140 | 141 | /* Border Colors */ 142 | --vp-c-border: #414559; 143 | --vp-c-divider: #414559; 144 | --vp-c-gutter: #51576d; 145 | 146 | /* Text Colors */ 147 | --vp-c-text-1: #c6d0f5; 148 | --vp-c-text-2: #b5bfe2; 149 | --vp-c-text-3: #a5adce; 150 | 151 | /* Callout Colors */ 152 | --vp-c-tip-soft: hsla(96, 44%, 68%, 0.20); 153 | --vp-c-warning-soft: hsla(40, 62%, 73%, 0.20); 154 | --vp-c-danger-soft: hsla(359, 68%, 71%, 0.20); 155 | --vp-c-caution-soft: hsla(359, 68%, 71%, 0.20); 156 | --vp-c-important-soft: hsla(277, 59%, 76%, 0.20); 157 | 158 | --vp-custom-block-info-bg: hsla(189, 48%, 73%, 0.20); 159 | --vp-custom-block-note-bg: hsla(222, 74%, 74%, 0.20); 160 | --vp-custom-block-details-bg: #414559; 161 | 162 | /* Catppuccin Accents */ 163 | --ctp-frappe-rosewater: #f2d5cf; 164 | --ctp-frappe-flamingo: #eebebe; 165 | --ctp-frappe-pink: #f4b8e4; 166 | --ctp-frappe-mauve: #ca9ee6; 167 | --ctp-frappe-red: #e78284; 168 | --ctp-frappe-maroon: #ea999c; 169 | --ctp-frappe-peach: #ef9f76; 170 | --ctp-frappe-yellow: #e5c890; 171 | --ctp-frappe-green: #a6d189; 172 | --ctp-frappe-teal: #81c8be; 173 | --ctp-frappe-sky: #99d1db; 174 | --ctp-frappe-sapphire: #85c1dc; 175 | --ctp-frappe-blue: #8caaee; 176 | --ctp-frappe-lavender: #babbf1; 177 | --ctp-frappe-text: #c6d0f5; 178 | --ctp-frappe-subtext1: #b5bfe2; 179 | --ctp-frappe-subtext0: #a5adce; 180 | --ctp-frappe-overlay2: #949cbb; 181 | --ctp-frappe-overlay1: #838ba7; 182 | --ctp-frappe-overlay0: #737994; 183 | --ctp-frappe-surface2: #626880; 184 | --ctp-frappe-surface1: #51576d; 185 | --ctp-frappe-surface0: #414559; 186 | --ctp-frappe-base: #303446; 187 | --ctp-frappe-mantle: #292c3c; 188 | --ctp-frappe-crust: #232634; 189 | 190 | /* Color Palette */ 191 | --vp-c-gray-1: rgb(81, 87, 109); 192 | --vp-c-gray-2: rgb(65, 69, 89); 193 | --vp-c-gray-3: rgb(48, 52, 70); 194 | --vp-c-gray-soft: hsla(229, 19%, 53%, 0.14); 195 | 196 | --vp-c-default-soft: #414559; 197 | 198 | --vp-c-indigo-1: rgb(140, 170, 238); 199 | --vp-c-indigo-2: rgb(133, 167, 245); 200 | --vp-c-indigo-3: rgb(94, 111, 154); 201 | --vp-c-indigo-soft: hsla(222, 74%, 54%, 0.14); 202 | 203 | --vp-c-purple-1: rgb(202, 158, 230); 204 | --vp-c-purple-2: rgb(204, 152, 236); 205 | --vp-c-purple-3: rgb(125, 105, 150); 206 | --vp-c-purple-soft: hsla(277, 59%, 56%, 0.14); 207 | 208 | --vp-c-green-1: rgb(166, 209, 137); 209 | --vp-c-green-2: rgb(164, 217, 129); 210 | --vp-c-green-3: rgb(107, 131, 104); 211 | --vp-c-green-soft: hsla(96, 44%, 48%, 0.14); 212 | 213 | --vp-c-yellow-1: rgb(229, 200, 144); 214 | --vp-c-yellow-2: rgb(236, 203, 138); 215 | --vp-c-yellow-3: rgb(139, 126, 107); 216 | --vp-c-yellow-soft: hsla(40, 62%, 53%, 0.14); 217 | 218 | --vp-c-red-1: rgb(231, 130, 132); 219 | --vp-c-red-2: rgb(239, 123, 125); 220 | --vp-c-red-3: rgb(140, 91, 101); 221 | --vp-c-red-soft: hsla(359, 68%, 51%, 0.14); 222 | 223 | /* Icons */ 224 | 225 | 226 | --vp-icon-copy: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a5adce%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3C/svg%3E'); 227 | --vp-icon-copied: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a5adce%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Cpath%20d%3D%22m9%2014%202%202%204-4%22/%3E%3C/svg%3E'); 228 | 229 | /* Code Highlighting */ 230 | --vp-code-line-highlight-color: hsla(228, 22%, 66%, 0.20); 231 | } 232 | -------------------------------------------------------------------------------- /theme/frappe/flamingo.css: -------------------------------------------------------------------------------- 1 | /* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */ 2 | /* https://catppuccin.com/palette */ 3 | 4 | 5 | :root { 6 | /* Fix badge background color */ 7 | --vp-badge-tip-bg: hsla(0, 60%, 67%, 0.20); 8 | 9 | /* Accent Color */ 10 | --vp-c-brand-1: #dd7878; 11 | --vp-c-brand-2: rgb(216, 100, 100); 12 | --vp-c-brand-3: #dd7878; 13 | 14 | /* Solid Colors and Sponsor Color */ 15 | --vp-c-white: #eff1f5; 16 | --vp-c-black: #4c4f69; 17 | --vp-c-sponsor: #d20f39; 18 | 19 | /* Background Colors */ 20 | --vp-c-bg: #eff1f5; 21 | --vp-c-bg-alt: #e6e9ef; 22 | --vp-c-bg-elv: #dce0e8; 23 | --vp-c-bg-soft: #e6e9ef; 24 | 25 | /* Border Colors */ 26 | --vp-c-border: #ccd0da; 27 | --vp-c-divider: #ccd0da; 28 | --vp-c-gutter: #bcc0cc; 29 | 30 | /* Text Colors */ 31 | --vp-c-text-1: #4c4f69; 32 | --vp-c-text-2: #5c5f77; 33 | --vp-c-text-3: #6c6f85; 34 | 35 | /* Callout Colors */ 36 | --vp-c-tip-soft: hsla(109, 58%, 40%, 0.20); 37 | --vp-c-warning-soft: hsla(35, 77%, 49%, 0.20); 38 | --vp-c-danger-soft: hsla(347, 87%, 44%, 0.20); 39 | --vp-c-caution-soft: hsla(347, 87%, 44%, 0.20); 40 | --vp-c-important-soft: hsla(266, 85%, 58%, 0.20); 41 | 42 | --vp-custom-block-info-bg: hsla(197, 96%, 46%, 0.20); 43 | --vp-custom-block-note-bg: hsla(220, 91%, 54%, 0.20); 44 | --vp-custom-block-details-bg: #ccd0da; 45 | 46 | /* Catppuccin Accents */ 47 | --ctp-latte-rosewater: #dc8a78; 48 | --ctp-latte-flamingo: #dd7878; 49 | --ctp-latte-pink: #ea76cb; 50 | --ctp-latte-mauve: #8839ef; 51 | --ctp-latte-red: #d20f39; 52 | --ctp-latte-maroon: #e64553; 53 | --ctp-latte-peach: #fe640b; 54 | --ctp-latte-yellow: #df8e1d; 55 | --ctp-latte-green: #40a02b; 56 | --ctp-latte-teal: #179299; 57 | --ctp-latte-sky: #04a5e5; 58 | --ctp-latte-sapphire: #209fb5; 59 | --ctp-latte-blue: #1e66f5; 60 | --ctp-latte-lavender: #7287fd; 61 | --ctp-latte-text: #4c4f69; 62 | --ctp-latte-subtext1: #5c5f77; 63 | --ctp-latte-subtext0: #6c6f85; 64 | --ctp-latte-overlay2: #7c7f93; 65 | --ctp-latte-overlay1: #8c8fa1; 66 | --ctp-latte-overlay0: #9ca0b0; 67 | --ctp-latte-surface2: #acb0be; 68 | --ctp-latte-surface1: #bcc0cc; 69 | --ctp-latte-surface0: #ccd0da; 70 | --ctp-latte-base: #eff1f5; 71 | --ctp-latte-mantle: #e6e9ef; 72 | --ctp-latte-crust: #dce0e8; 73 | 74 | /* Color Palette */ 75 | --vp-c-gray-1: rgb(188, 192, 204); 76 | --vp-c-gray-2: rgb(204, 208, 218); 77 | --vp-c-gray-3: rgb(239, 241, 245); 78 | --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14); 79 | 80 | --vp-c-default-soft: #ccd0da; 81 | 82 | --vp-c-indigo-1: rgb(30, 102, 245); 83 | --vp-c-indigo-2: rgb(21, 99, 255); 84 | --vp-c-indigo-3: rgb(39, 77, 158); 85 | --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14); 86 | 87 | --vp-c-purple-1: rgb(136, 57, 239); 88 | --vp-c-purple-2: rgb(134, 46, 250); 89 | --vp-c-purple-3: rgb(92, 55, 155); 90 | --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14); 91 | 92 | --vp-c-green-1: rgb(64, 160, 43); 93 | --vp-c-green-2: rgb(58, 171, 33); 94 | --vp-c-green-3: rgb(56, 106, 57); 95 | --vp-c-green-soft: hsla(109, 58%, 20%, 0.14); 96 | 97 | --vp-c-yellow-1: rgb(223, 142, 29); 98 | --vp-c-yellow-2: rgb(236, 144, 16); 99 | --vp-c-yellow-3: rgb(136, 97, 50); 100 | --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14); 101 | 102 | --vp-c-red-1: rgb(210, 15, 57); 103 | --vp-c-red-2: rgb(222, 4, 51); 104 | --vp-c-red-3: rgb(129, 34, 64); 105 | --vp-c-red-soft: hsla(347, 87%, 24%, 0.14); 106 | 107 | /* Icons */ 108 | 109 | 110 | --vp-icon-copy: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a5adce%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3C/svg%3E'); 111 | --vp-icon-copied: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a5adce%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Cpath%20d%3D%22m9%2014%202%202%204-4%22/%3E%3C/svg%3E'); 112 | 113 | /* Code Highlighting */ 114 | --vp-code-line-highlight-color: hsla(232, 10%, 53%, 0.20); 115 | } 116 | .dark { 117 | /* Fix button text color */ 118 | --vp-button-brand-text: var(--ctp-frappe-crust) !important; 119 | --vp-button-brand-hover-text: var(--ctp-frappe-crust) !important; 120 | --vp-button-brand-active-text: var(--ctp-mocha-crust) !important; 121 | 122 | /* Fix badge background color */ 123 | --vp-badge-tip-bg: hsla(0, 58%, 84%, 0.20); 124 | 125 | /* Accent Color */ 126 | --vp-c-brand-1: #eebebe; 127 | --vp-c-brand-2: rgb(233, 169, 169); 128 | --vp-c-brand-3: #eebebe; 129 | 130 | /* Solid Colors and Sponsor Color */ 131 | --vp-c-white: #c6d0f5; 132 | --vp-c-black: #303446; 133 | --vp-c-sponsor: #e78284; 134 | 135 | /* Background Colors */ 136 | --vp-c-bg: #303446; 137 | --vp-c-bg-alt: #292c3c; 138 | --vp-c-bg-elv: #232634; 139 | --vp-c-bg-soft: #292c3c; 140 | 141 | /* Border Colors */ 142 | --vp-c-border: #414559; 143 | --vp-c-divider: #414559; 144 | --vp-c-gutter: #51576d; 145 | 146 | /* Text Colors */ 147 | --vp-c-text-1: #c6d0f5; 148 | --vp-c-text-2: #b5bfe2; 149 | --vp-c-text-3: #a5adce; 150 | 151 | /* Callout Colors */ 152 | --vp-c-tip-soft: hsla(96, 44%, 68%, 0.20); 153 | --vp-c-warning-soft: hsla(40, 62%, 73%, 0.20); 154 | --vp-c-danger-soft: hsla(359, 68%, 71%, 0.20); 155 | --vp-c-caution-soft: hsla(359, 68%, 71%, 0.20); 156 | --vp-c-important-soft: hsla(277, 59%, 76%, 0.20); 157 | 158 | --vp-custom-block-info-bg: hsla(189, 48%, 73%, 0.20); 159 | --vp-custom-block-note-bg: hsla(222, 74%, 74%, 0.20); 160 | --vp-custom-block-details-bg: #414559; 161 | 162 | /* Catppuccin Accents */ 163 | --ctp-frappe-rosewater: #f2d5cf; 164 | --ctp-frappe-flamingo: #eebebe; 165 | --ctp-frappe-pink: #f4b8e4; 166 | --ctp-frappe-mauve: #ca9ee6; 167 | --ctp-frappe-red: #e78284; 168 | --ctp-frappe-maroon: #ea999c; 169 | --ctp-frappe-peach: #ef9f76; 170 | --ctp-frappe-yellow: #e5c890; 171 | --ctp-frappe-green: #a6d189; 172 | --ctp-frappe-teal: #81c8be; 173 | --ctp-frappe-sky: #99d1db; 174 | --ctp-frappe-sapphire: #85c1dc; 175 | --ctp-frappe-blue: #8caaee; 176 | --ctp-frappe-lavender: #babbf1; 177 | --ctp-frappe-text: #c6d0f5; 178 | --ctp-frappe-subtext1: #b5bfe2; 179 | --ctp-frappe-subtext0: #a5adce; 180 | --ctp-frappe-overlay2: #949cbb; 181 | --ctp-frappe-overlay1: #838ba7; 182 | --ctp-frappe-overlay0: #737994; 183 | --ctp-frappe-surface2: #626880; 184 | --ctp-frappe-surface1: #51576d; 185 | --ctp-frappe-surface0: #414559; 186 | --ctp-frappe-base: #303446; 187 | --ctp-frappe-mantle: #292c3c; 188 | --ctp-frappe-crust: #232634; 189 | 190 | /* Color Palette */ 191 | --vp-c-gray-1: rgb(81, 87, 109); 192 | --vp-c-gray-2: rgb(65, 69, 89); 193 | --vp-c-gray-3: rgb(48, 52, 70); 194 | --vp-c-gray-soft: hsla(229, 19%, 53%, 0.14); 195 | 196 | --vp-c-default-soft: #414559; 197 | 198 | --vp-c-indigo-1: rgb(140, 170, 238); 199 | --vp-c-indigo-2: rgb(133, 167, 245); 200 | --vp-c-indigo-3: rgb(94, 111, 154); 201 | --vp-c-indigo-soft: hsla(222, 74%, 54%, 0.14); 202 | 203 | --vp-c-purple-1: rgb(202, 158, 230); 204 | --vp-c-purple-2: rgb(204, 152, 236); 205 | --vp-c-purple-3: rgb(125, 105, 150); 206 | --vp-c-purple-soft: hsla(277, 59%, 56%, 0.14); 207 | 208 | --vp-c-green-1: rgb(166, 209, 137); 209 | --vp-c-green-2: rgb(164, 217, 129); 210 | --vp-c-green-3: rgb(107, 131, 104); 211 | --vp-c-green-soft: hsla(96, 44%, 48%, 0.14); 212 | 213 | --vp-c-yellow-1: rgb(229, 200, 144); 214 | --vp-c-yellow-2: rgb(236, 203, 138); 215 | --vp-c-yellow-3: rgb(139, 126, 107); 216 | --vp-c-yellow-soft: hsla(40, 62%, 53%, 0.14); 217 | 218 | --vp-c-red-1: rgb(231, 130, 132); 219 | --vp-c-red-2: rgb(239, 123, 125); 220 | --vp-c-red-3: rgb(140, 91, 101); 221 | --vp-c-red-soft: hsla(359, 68%, 51%, 0.14); 222 | 223 | /* Icons */ 224 | 225 | 226 | --vp-icon-copy: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a5adce%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3C/svg%3E'); 227 | --vp-icon-copied: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a5adce%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Cpath%20d%3D%22m9%2014%202%202%204-4%22/%3E%3C/svg%3E'); 228 | 229 | /* Code Highlighting */ 230 | --vp-code-line-highlight-color: hsla(228, 22%, 66%, 0.20); 231 | } 232 | -------------------------------------------------------------------------------- /theme/frappe/green.css: -------------------------------------------------------------------------------- 1 | /* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */ 2 | /* https://catppuccin.com/palette */ 3 | 4 | 5 | :root { 6 | /* Fix badge background color */ 7 | --vp-badge-tip-bg: hsla(109, 58%, 40%, 0.20); 8 | 9 | /* Accent Color */ 10 | --vp-c-brand-1: #40a02b; 11 | --vp-c-brand-2: rgb(57, 140, 38); 12 | --vp-c-brand-3: #40a02b; 13 | 14 | /* Solid Colors and Sponsor Color */ 15 | --vp-c-white: #eff1f5; 16 | --vp-c-black: #4c4f69; 17 | --vp-c-sponsor: #d20f39; 18 | 19 | /* Background Colors */ 20 | --vp-c-bg: #eff1f5; 21 | --vp-c-bg-alt: #e6e9ef; 22 | --vp-c-bg-elv: #dce0e8; 23 | --vp-c-bg-soft: #e6e9ef; 24 | 25 | /* Border Colors */ 26 | --vp-c-border: #ccd0da; 27 | --vp-c-divider: #ccd0da; 28 | --vp-c-gutter: #bcc0cc; 29 | 30 | /* Text Colors */ 31 | --vp-c-text-1: #4c4f69; 32 | --vp-c-text-2: #5c5f77; 33 | --vp-c-text-3: #6c6f85; 34 | 35 | /* Callout Colors */ 36 | --vp-c-tip-soft: hsla(109, 58%, 40%, 0.20); 37 | --vp-c-warning-soft: hsla(35, 77%, 49%, 0.20); 38 | --vp-c-danger-soft: hsla(347, 87%, 44%, 0.20); 39 | --vp-c-caution-soft: hsla(347, 87%, 44%, 0.20); 40 | --vp-c-important-soft: hsla(266, 85%, 58%, 0.20); 41 | 42 | --vp-custom-block-info-bg: hsla(197, 96%, 46%, 0.20); 43 | --vp-custom-block-note-bg: hsla(220, 91%, 54%, 0.20); 44 | --vp-custom-block-details-bg: #ccd0da; 45 | 46 | /* Catppuccin Accents */ 47 | --ctp-latte-rosewater: #dc8a78; 48 | --ctp-latte-flamingo: #dd7878; 49 | --ctp-latte-pink: #ea76cb; 50 | --ctp-latte-mauve: #8839ef; 51 | --ctp-latte-red: #d20f39; 52 | --ctp-latte-maroon: #e64553; 53 | --ctp-latte-peach: #fe640b; 54 | --ctp-latte-yellow: #df8e1d; 55 | --ctp-latte-green: #40a02b; 56 | --ctp-latte-teal: #179299; 57 | --ctp-latte-sky: #04a5e5; 58 | --ctp-latte-sapphire: #209fb5; 59 | --ctp-latte-blue: #1e66f5; 60 | --ctp-latte-lavender: #7287fd; 61 | --ctp-latte-text: #4c4f69; 62 | --ctp-latte-subtext1: #5c5f77; 63 | --ctp-latte-subtext0: #6c6f85; 64 | --ctp-latte-overlay2: #7c7f93; 65 | --ctp-latte-overlay1: #8c8fa1; 66 | --ctp-latte-overlay0: #9ca0b0; 67 | --ctp-latte-surface2: #acb0be; 68 | --ctp-latte-surface1: #bcc0cc; 69 | --ctp-latte-surface0: #ccd0da; 70 | --ctp-latte-base: #eff1f5; 71 | --ctp-latte-mantle: #e6e9ef; 72 | --ctp-latte-crust: #dce0e8; 73 | 74 | /* Color Palette */ 75 | --vp-c-gray-1: rgb(188, 192, 204); 76 | --vp-c-gray-2: rgb(204, 208, 218); 77 | --vp-c-gray-3: rgb(239, 241, 245); 78 | --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14); 79 | 80 | --vp-c-default-soft: #ccd0da; 81 | 82 | --vp-c-indigo-1: rgb(30, 102, 245); 83 | --vp-c-indigo-2: rgb(21, 99, 255); 84 | --vp-c-indigo-3: rgb(39, 77, 158); 85 | --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14); 86 | 87 | --vp-c-purple-1: rgb(136, 57, 239); 88 | --vp-c-purple-2: rgb(134, 46, 250); 89 | --vp-c-purple-3: rgb(92, 55, 155); 90 | --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14); 91 | 92 | --vp-c-green-1: rgb(64, 160, 43); 93 | --vp-c-green-2: rgb(58, 171, 33); 94 | --vp-c-green-3: rgb(56, 106, 57); 95 | --vp-c-green-soft: hsla(109, 58%, 20%, 0.14); 96 | 97 | --vp-c-yellow-1: rgb(223, 142, 29); 98 | --vp-c-yellow-2: rgb(236, 144, 16); 99 | --vp-c-yellow-3: rgb(136, 97, 50); 100 | --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14); 101 | 102 | --vp-c-red-1: rgb(210, 15, 57); 103 | --vp-c-red-2: rgb(222, 4, 51); 104 | --vp-c-red-3: rgb(129, 34, 64); 105 | --vp-c-red-soft: hsla(347, 87%, 24%, 0.14); 106 | 107 | /* Icons */ 108 | 109 | 110 | --vp-icon-copy: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a5adce%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3C/svg%3E'); 111 | --vp-icon-copied: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a5adce%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Cpath%20d%3D%22m9%2014%202%202%204-4%22/%3E%3C/svg%3E'); 112 | 113 | /* Code Highlighting */ 114 | --vp-code-line-highlight-color: hsla(232, 10%, 53%, 0.20); 115 | } 116 | .dark { 117 | /* Fix button text color */ 118 | --vp-button-brand-text: var(--ctp-frappe-crust) !important; 119 | --vp-button-brand-hover-text: var(--ctp-frappe-crust) !important; 120 | --vp-button-brand-active-text: var(--ctp-mocha-crust) !important; 121 | 122 | /* Fix badge background color */ 123 | --vp-badge-tip-bg: hsla(96, 44%, 68%, 0.20); 124 | 125 | /* Accent Color */ 126 | --vp-c-brand-1: #a6d189; 127 | --vp-c-brand-2: rgb(152, 202, 118); 128 | --vp-c-brand-3: #a6d189; 129 | 130 | /* Solid Colors and Sponsor Color */ 131 | --vp-c-white: #c6d0f5; 132 | --vp-c-black: #303446; 133 | --vp-c-sponsor: #e78284; 134 | 135 | /* Background Colors */ 136 | --vp-c-bg: #303446; 137 | --vp-c-bg-alt: #292c3c; 138 | --vp-c-bg-elv: #232634; 139 | --vp-c-bg-soft: #292c3c; 140 | 141 | /* Border Colors */ 142 | --vp-c-border: #414559; 143 | --vp-c-divider: #414559; 144 | --vp-c-gutter: #51576d; 145 | 146 | /* Text Colors */ 147 | --vp-c-text-1: #c6d0f5; 148 | --vp-c-text-2: #b5bfe2; 149 | --vp-c-text-3: #a5adce; 150 | 151 | /* Callout Colors */ 152 | --vp-c-tip-soft: hsla(96, 44%, 68%, 0.20); 153 | --vp-c-warning-soft: hsla(40, 62%, 73%, 0.20); 154 | --vp-c-danger-soft: hsla(359, 68%, 71%, 0.20); 155 | --vp-c-caution-soft: hsla(359, 68%, 71%, 0.20); 156 | --vp-c-important-soft: hsla(277, 59%, 76%, 0.20); 157 | 158 | --vp-custom-block-info-bg: hsla(189, 48%, 73%, 0.20); 159 | --vp-custom-block-note-bg: hsla(222, 74%, 74%, 0.20); 160 | --vp-custom-block-details-bg: #414559; 161 | 162 | /* Catppuccin Accents */ 163 | --ctp-frappe-rosewater: #f2d5cf; 164 | --ctp-frappe-flamingo: #eebebe; 165 | --ctp-frappe-pink: #f4b8e4; 166 | --ctp-frappe-mauve: #ca9ee6; 167 | --ctp-frappe-red: #e78284; 168 | --ctp-frappe-maroon: #ea999c; 169 | --ctp-frappe-peach: #ef9f76; 170 | --ctp-frappe-yellow: #e5c890; 171 | --ctp-frappe-green: #a6d189; 172 | --ctp-frappe-teal: #81c8be; 173 | --ctp-frappe-sky: #99d1db; 174 | --ctp-frappe-sapphire: #85c1dc; 175 | --ctp-frappe-blue: #8caaee; 176 | --ctp-frappe-lavender: #babbf1; 177 | --ctp-frappe-text: #c6d0f5; 178 | --ctp-frappe-subtext1: #b5bfe2; 179 | --ctp-frappe-subtext0: #a5adce; 180 | --ctp-frappe-overlay2: #949cbb; 181 | --ctp-frappe-overlay1: #838ba7; 182 | --ctp-frappe-overlay0: #737994; 183 | --ctp-frappe-surface2: #626880; 184 | --ctp-frappe-surface1: #51576d; 185 | --ctp-frappe-surface0: #414559; 186 | --ctp-frappe-base: #303446; 187 | --ctp-frappe-mantle: #292c3c; 188 | --ctp-frappe-crust: #232634; 189 | 190 | /* Color Palette */ 191 | --vp-c-gray-1: rgb(81, 87, 109); 192 | --vp-c-gray-2: rgb(65, 69, 89); 193 | --vp-c-gray-3: rgb(48, 52, 70); 194 | --vp-c-gray-soft: hsla(229, 19%, 53%, 0.14); 195 | 196 | --vp-c-default-soft: #414559; 197 | 198 | --vp-c-indigo-1: rgb(140, 170, 238); 199 | --vp-c-indigo-2: rgb(133, 167, 245); 200 | --vp-c-indigo-3: rgb(94, 111, 154); 201 | --vp-c-indigo-soft: hsla(222, 74%, 54%, 0.14); 202 | 203 | --vp-c-purple-1: rgb(202, 158, 230); 204 | --vp-c-purple-2: rgb(204, 152, 236); 205 | --vp-c-purple-3: rgb(125, 105, 150); 206 | --vp-c-purple-soft: hsla(277, 59%, 56%, 0.14); 207 | 208 | --vp-c-green-1: rgb(166, 209, 137); 209 | --vp-c-green-2: rgb(164, 217, 129); 210 | --vp-c-green-3: rgb(107, 131, 104); 211 | --vp-c-green-soft: hsla(96, 44%, 48%, 0.14); 212 | 213 | --vp-c-yellow-1: rgb(229, 200, 144); 214 | --vp-c-yellow-2: rgb(236, 203, 138); 215 | --vp-c-yellow-3: rgb(139, 126, 107); 216 | --vp-c-yellow-soft: hsla(40, 62%, 53%, 0.14); 217 | 218 | --vp-c-red-1: rgb(231, 130, 132); 219 | --vp-c-red-2: rgb(239, 123, 125); 220 | --vp-c-red-3: rgb(140, 91, 101); 221 | --vp-c-red-soft: hsla(359, 68%, 51%, 0.14); 222 | 223 | /* Icons */ 224 | 225 | 226 | --vp-icon-copy: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a5adce%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3C/svg%3E'); 227 | --vp-icon-copied: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a5adce%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Cpath%20d%3D%22m9%2014%202%202%204-4%22/%3E%3C/svg%3E'); 228 | 229 | /* Code Highlighting */ 230 | --vp-code-line-highlight-color: hsla(228, 22%, 66%, 0.20); 231 | } 232 | -------------------------------------------------------------------------------- /theme/frappe/maroon.css: -------------------------------------------------------------------------------- 1 | /* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */ 2 | /* https://catppuccin.com/palette */ 3 | 4 | 5 | :root { 6 | /* Fix badge background color */ 7 | --vp-badge-tip-bg: hsla(355, 76%, 59%, 0.20); 8 | 9 | /* Accent Color */ 10 | --vp-c-brand-1: #e64553; 11 | --vp-c-brand-2: rgb(227, 47, 62); 12 | --vp-c-brand-3: #e64553; 13 | 14 | /* Solid Colors and Sponsor Color */ 15 | --vp-c-white: #eff1f5; 16 | --vp-c-black: #4c4f69; 17 | --vp-c-sponsor: #d20f39; 18 | 19 | /* Background Colors */ 20 | --vp-c-bg: #eff1f5; 21 | --vp-c-bg-alt: #e6e9ef; 22 | --vp-c-bg-elv: #dce0e8; 23 | --vp-c-bg-soft: #e6e9ef; 24 | 25 | /* Border Colors */ 26 | --vp-c-border: #ccd0da; 27 | --vp-c-divider: #ccd0da; 28 | --vp-c-gutter: #bcc0cc; 29 | 30 | /* Text Colors */ 31 | --vp-c-text-1: #4c4f69; 32 | --vp-c-text-2: #5c5f77; 33 | --vp-c-text-3: #6c6f85; 34 | 35 | /* Callout Colors */ 36 | --vp-c-tip-soft: hsla(109, 58%, 40%, 0.20); 37 | --vp-c-warning-soft: hsla(35, 77%, 49%, 0.20); 38 | --vp-c-danger-soft: hsla(347, 87%, 44%, 0.20); 39 | --vp-c-caution-soft: hsla(347, 87%, 44%, 0.20); 40 | --vp-c-important-soft: hsla(266, 85%, 58%, 0.20); 41 | 42 | --vp-custom-block-info-bg: hsla(197, 96%, 46%, 0.20); 43 | --vp-custom-block-note-bg: hsla(220, 91%, 54%, 0.20); 44 | --vp-custom-block-details-bg: #ccd0da; 45 | 46 | /* Catppuccin Accents */ 47 | --ctp-latte-rosewater: #dc8a78; 48 | --ctp-latte-flamingo: #dd7878; 49 | --ctp-latte-pink: #ea76cb; 50 | --ctp-latte-mauve: #8839ef; 51 | --ctp-latte-red: #d20f39; 52 | --ctp-latte-maroon: #e64553; 53 | --ctp-latte-peach: #fe640b; 54 | --ctp-latte-yellow: #df8e1d; 55 | --ctp-latte-green: #40a02b; 56 | --ctp-latte-teal: #179299; 57 | --ctp-latte-sky: #04a5e5; 58 | --ctp-latte-sapphire: #209fb5; 59 | --ctp-latte-blue: #1e66f5; 60 | --ctp-latte-lavender: #7287fd; 61 | --ctp-latte-text: #4c4f69; 62 | --ctp-latte-subtext1: #5c5f77; 63 | --ctp-latte-subtext0: #6c6f85; 64 | --ctp-latte-overlay2: #7c7f93; 65 | --ctp-latte-overlay1: #8c8fa1; 66 | --ctp-latte-overlay0: #9ca0b0; 67 | --ctp-latte-surface2: #acb0be; 68 | --ctp-latte-surface1: #bcc0cc; 69 | --ctp-latte-surface0: #ccd0da; 70 | --ctp-latte-base: #eff1f5; 71 | --ctp-latte-mantle: #e6e9ef; 72 | --ctp-latte-crust: #dce0e8; 73 | 74 | /* Color Palette */ 75 | --vp-c-gray-1: rgb(188, 192, 204); 76 | --vp-c-gray-2: rgb(204, 208, 218); 77 | --vp-c-gray-3: rgb(239, 241, 245); 78 | --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14); 79 | 80 | --vp-c-default-soft: #ccd0da; 81 | 82 | --vp-c-indigo-1: rgb(30, 102, 245); 83 | --vp-c-indigo-2: rgb(21, 99, 255); 84 | --vp-c-indigo-3: rgb(39, 77, 158); 85 | --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14); 86 | 87 | --vp-c-purple-1: rgb(136, 57, 239); 88 | --vp-c-purple-2: rgb(134, 46, 250); 89 | --vp-c-purple-3: rgb(92, 55, 155); 90 | --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14); 91 | 92 | --vp-c-green-1: rgb(64, 160, 43); 93 | --vp-c-green-2: rgb(58, 171, 33); 94 | --vp-c-green-3: rgb(56, 106, 57); 95 | --vp-c-green-soft: hsla(109, 58%, 20%, 0.14); 96 | 97 | --vp-c-yellow-1: rgb(223, 142, 29); 98 | --vp-c-yellow-2: rgb(236, 144, 16); 99 | --vp-c-yellow-3: rgb(136, 97, 50); 100 | --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14); 101 | 102 | --vp-c-red-1: rgb(210, 15, 57); 103 | --vp-c-red-2: rgb(222, 4, 51); 104 | --vp-c-red-3: rgb(129, 34, 64); 105 | --vp-c-red-soft: hsla(347, 87%, 24%, 0.14); 106 | 107 | /* Icons */ 108 | 109 | 110 | --vp-icon-copy: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a5adce%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3C/svg%3E'); 111 | --vp-icon-copied: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a5adce%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Cpath%20d%3D%22m9%2014%202%202%204-4%22/%3E%3C/svg%3E'); 112 | 113 | /* Code Highlighting */ 114 | --vp-code-line-highlight-color: hsla(232, 10%, 53%, 0.20); 115 | } 116 | .dark { 117 | /* Fix button text color */ 118 | --vp-button-brand-text: var(--ctp-frappe-crust) !important; 119 | --vp-button-brand-hover-text: var(--ctp-frappe-crust) !important; 120 | --vp-button-brand-active-text: var(--ctp-mocha-crust) !important; 121 | 122 | /* Fix badge background color */ 123 | --vp-badge-tip-bg: hsla(358, 66%, 76%, 0.20); 124 | 125 | /* Accent Color */ 126 | --vp-c-brand-1: #ea999c; 127 | --vp-c-brand-2: rgb(230, 132, 135); 128 | --vp-c-brand-3: #ea999c; 129 | 130 | /* Solid Colors and Sponsor Color */ 131 | --vp-c-white: #c6d0f5; 132 | --vp-c-black: #303446; 133 | --vp-c-sponsor: #e78284; 134 | 135 | /* Background Colors */ 136 | --vp-c-bg: #303446; 137 | --vp-c-bg-alt: #292c3c; 138 | --vp-c-bg-elv: #232634; 139 | --vp-c-bg-soft: #292c3c; 140 | 141 | /* Border Colors */ 142 | --vp-c-border: #414559; 143 | --vp-c-divider: #414559; 144 | --vp-c-gutter: #51576d; 145 | 146 | /* Text Colors */ 147 | --vp-c-text-1: #c6d0f5; 148 | --vp-c-text-2: #b5bfe2; 149 | --vp-c-text-3: #a5adce; 150 | 151 | /* Callout Colors */ 152 | --vp-c-tip-soft: hsla(96, 44%, 68%, 0.20); 153 | --vp-c-warning-soft: hsla(40, 62%, 73%, 0.20); 154 | --vp-c-danger-soft: hsla(359, 68%, 71%, 0.20); 155 | --vp-c-caution-soft: hsla(359, 68%, 71%, 0.20); 156 | --vp-c-important-soft: hsla(277, 59%, 76%, 0.20); 157 | 158 | --vp-custom-block-info-bg: hsla(189, 48%, 73%, 0.20); 159 | --vp-custom-block-note-bg: hsla(222, 74%, 74%, 0.20); 160 | --vp-custom-block-details-bg: #414559; 161 | 162 | /* Catppuccin Accents */ 163 | --ctp-frappe-rosewater: #f2d5cf; 164 | --ctp-frappe-flamingo: #eebebe; 165 | --ctp-frappe-pink: #f4b8e4; 166 | --ctp-frappe-mauve: #ca9ee6; 167 | --ctp-frappe-red: #e78284; 168 | --ctp-frappe-maroon: #ea999c; 169 | --ctp-frappe-peach: #ef9f76; 170 | --ctp-frappe-yellow: #e5c890; 171 | --ctp-frappe-green: #a6d189; 172 | --ctp-frappe-teal: #81c8be; 173 | --ctp-frappe-sky: #99d1db; 174 | --ctp-frappe-sapphire: #85c1dc; 175 | --ctp-frappe-blue: #8caaee; 176 | --ctp-frappe-lavender: #babbf1; 177 | --ctp-frappe-text: #c6d0f5; 178 | --ctp-frappe-subtext1: #b5bfe2; 179 | --ctp-frappe-subtext0: #a5adce; 180 | --ctp-frappe-overlay2: #949cbb; 181 | --ctp-frappe-overlay1: #838ba7; 182 | --ctp-frappe-overlay0: #737994; 183 | --ctp-frappe-surface2: #626880; 184 | --ctp-frappe-surface1: #51576d; 185 | --ctp-frappe-surface0: #414559; 186 | --ctp-frappe-base: #303446; 187 | --ctp-frappe-mantle: #292c3c; 188 | --ctp-frappe-crust: #232634; 189 | 190 | /* Color Palette */ 191 | --vp-c-gray-1: rgb(81, 87, 109); 192 | --vp-c-gray-2: rgb(65, 69, 89); 193 | --vp-c-gray-3: rgb(48, 52, 70); 194 | --vp-c-gray-soft: hsla(229, 19%, 53%, 0.14); 195 | 196 | --vp-c-default-soft: #414559; 197 | 198 | --vp-c-indigo-1: rgb(140, 170, 238); 199 | --vp-c-indigo-2: rgb(133, 167, 245); 200 | --vp-c-indigo-3: rgb(94, 111, 154); 201 | --vp-c-indigo-soft: hsla(222, 74%, 54%, 0.14); 202 | 203 | --vp-c-purple-1: rgb(202, 158, 230); 204 | --vp-c-purple-2: rgb(204, 152, 236); 205 | --vp-c-purple-3: rgb(125, 105, 150); 206 | --vp-c-purple-soft: hsla(277, 59%, 56%, 0.14); 207 | 208 | --vp-c-green-1: rgb(166, 209, 137); 209 | --vp-c-green-2: rgb(164, 217, 129); 210 | --vp-c-green-3: rgb(107, 131, 104); 211 | --vp-c-green-soft: hsla(96, 44%, 48%, 0.14); 212 | 213 | --vp-c-yellow-1: rgb(229, 200, 144); 214 | --vp-c-yellow-2: rgb(236, 203, 138); 215 | --vp-c-yellow-3: rgb(139, 126, 107); 216 | --vp-c-yellow-soft: hsla(40, 62%, 53%, 0.14); 217 | 218 | --vp-c-red-1: rgb(231, 130, 132); 219 | --vp-c-red-2: rgb(239, 123, 125); 220 | --vp-c-red-3: rgb(140, 91, 101); 221 | --vp-c-red-soft: hsla(359, 68%, 51%, 0.14); 222 | 223 | /* Icons */ 224 | 225 | 226 | --vp-icon-copy: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a5adce%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3C/svg%3E'); 227 | --vp-icon-copied: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a5adce%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Cpath%20d%3D%22m9%2014%202%202%204-4%22/%3E%3C/svg%3E'); 228 | 229 | /* Code Highlighting */ 230 | --vp-code-line-highlight-color: hsla(228, 22%, 66%, 0.20); 231 | } 232 | -------------------------------------------------------------------------------- /theme/frappe/mauve.css: -------------------------------------------------------------------------------- 1 | /* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */ 2 | /* https://catppuccin.com/palette */ 3 | 4 | 5 | :root { 6 | /* Fix badge background color */ 7 | --vp-badge-tip-bg: hsla(266, 85%, 58%, 0.20); 8 | 9 | /* Accent Color */ 10 | --vp-c-brand-1: #8839ef; 11 | --vp-c-brand-2: rgb(121, 33, 237); 12 | --vp-c-brand-3: #8839ef; 13 | 14 | /* Solid Colors and Sponsor Color */ 15 | --vp-c-white: #eff1f5; 16 | --vp-c-black: #4c4f69; 17 | --vp-c-sponsor: #d20f39; 18 | 19 | /* Background Colors */ 20 | --vp-c-bg: #eff1f5; 21 | --vp-c-bg-alt: #e6e9ef; 22 | --vp-c-bg-elv: #dce0e8; 23 | --vp-c-bg-soft: #e6e9ef; 24 | 25 | /* Border Colors */ 26 | --vp-c-border: #ccd0da; 27 | --vp-c-divider: #ccd0da; 28 | --vp-c-gutter: #bcc0cc; 29 | 30 | /* Text Colors */ 31 | --vp-c-text-1: #4c4f69; 32 | --vp-c-text-2: #5c5f77; 33 | --vp-c-text-3: #6c6f85; 34 | 35 | /* Callout Colors */ 36 | --vp-c-tip-soft: hsla(109, 58%, 40%, 0.20); 37 | --vp-c-warning-soft: hsla(35, 77%, 49%, 0.20); 38 | --vp-c-danger-soft: hsla(347, 87%, 44%, 0.20); 39 | --vp-c-caution-soft: hsla(347, 87%, 44%, 0.20); 40 | --vp-c-important-soft: hsla(266, 85%, 58%, 0.20); 41 | 42 | --vp-custom-block-info-bg: hsla(197, 96%, 46%, 0.20); 43 | --vp-custom-block-note-bg: hsla(220, 91%, 54%, 0.20); 44 | --vp-custom-block-details-bg: #ccd0da; 45 | 46 | /* Catppuccin Accents */ 47 | --ctp-latte-rosewater: #dc8a78; 48 | --ctp-latte-flamingo: #dd7878; 49 | --ctp-latte-pink: #ea76cb; 50 | --ctp-latte-mauve: #8839ef; 51 | --ctp-latte-red: #d20f39; 52 | --ctp-latte-maroon: #e64553; 53 | --ctp-latte-peach: #fe640b; 54 | --ctp-latte-yellow: #df8e1d; 55 | --ctp-latte-green: #40a02b; 56 | --ctp-latte-teal: #179299; 57 | --ctp-latte-sky: #04a5e5; 58 | --ctp-latte-sapphire: #209fb5; 59 | --ctp-latte-blue: #1e66f5; 60 | --ctp-latte-lavender: #7287fd; 61 | --ctp-latte-text: #4c4f69; 62 | --ctp-latte-subtext1: #5c5f77; 63 | --ctp-latte-subtext0: #6c6f85; 64 | --ctp-latte-overlay2: #7c7f93; 65 | --ctp-latte-overlay1: #8c8fa1; 66 | --ctp-latte-overlay0: #9ca0b0; 67 | --ctp-latte-surface2: #acb0be; 68 | --ctp-latte-surface1: #bcc0cc; 69 | --ctp-latte-surface0: #ccd0da; 70 | --ctp-latte-base: #eff1f5; 71 | --ctp-latte-mantle: #e6e9ef; 72 | --ctp-latte-crust: #dce0e8; 73 | 74 | /* Color Palette */ 75 | --vp-c-gray-1: rgb(188, 192, 204); 76 | --vp-c-gray-2: rgb(204, 208, 218); 77 | --vp-c-gray-3: rgb(239, 241, 245); 78 | --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14); 79 | 80 | --vp-c-default-soft: #ccd0da; 81 | 82 | --vp-c-indigo-1: rgb(30, 102, 245); 83 | --vp-c-indigo-2: rgb(21, 99, 255); 84 | --vp-c-indigo-3: rgb(39, 77, 158); 85 | --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14); 86 | 87 | --vp-c-purple-1: rgb(136, 57, 239); 88 | --vp-c-purple-2: rgb(134, 46, 250); 89 | --vp-c-purple-3: rgb(92, 55, 155); 90 | --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14); 91 | 92 | --vp-c-green-1: rgb(64, 160, 43); 93 | --vp-c-green-2: rgb(58, 171, 33); 94 | --vp-c-green-3: rgb(56, 106, 57); 95 | --vp-c-green-soft: hsla(109, 58%, 20%, 0.14); 96 | 97 | --vp-c-yellow-1: rgb(223, 142, 29); 98 | --vp-c-yellow-2: rgb(236, 144, 16); 99 | --vp-c-yellow-3: rgb(136, 97, 50); 100 | --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14); 101 | 102 | --vp-c-red-1: rgb(210, 15, 57); 103 | --vp-c-red-2: rgb(222, 4, 51); 104 | --vp-c-red-3: rgb(129, 34, 64); 105 | --vp-c-red-soft: hsla(347, 87%, 24%, 0.14); 106 | 107 | /* Icons */ 108 | 109 | 110 | --vp-icon-copy: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a5adce%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3C/svg%3E'); 111 | --vp-icon-copied: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a5adce%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Cpath%20d%3D%22m9%2014%202%202%204-4%22/%3E%3C/svg%3E'); 112 | 113 | /* Code Highlighting */ 114 | --vp-code-line-highlight-color: hsla(232, 10%, 53%, 0.20); 115 | } 116 | .dark { 117 | /* Fix button text color */ 118 | --vp-button-brand-text: var(--ctp-frappe-crust) !important; 119 | --vp-button-brand-hover-text: var(--ctp-frappe-crust) !important; 120 | --vp-button-brand-active-text: var(--ctp-mocha-crust) !important; 121 | 122 | /* Fix badge background color */ 123 | --vp-badge-tip-bg: hsla(277, 59%, 76%, 0.20); 124 | 125 | /* Accent Color */ 126 | --vp-c-brand-1: #ca9ee6; 127 | --vp-c-brand-2: rgb(191, 137, 225); 128 | --vp-c-brand-3: #ca9ee6; 129 | 130 | /* Solid Colors and Sponsor Color */ 131 | --vp-c-white: #c6d0f5; 132 | --vp-c-black: #303446; 133 | --vp-c-sponsor: #e78284; 134 | 135 | /* Background Colors */ 136 | --vp-c-bg: #303446; 137 | --vp-c-bg-alt: #292c3c; 138 | --vp-c-bg-elv: #232634; 139 | --vp-c-bg-soft: #292c3c; 140 | 141 | /* Border Colors */ 142 | --vp-c-border: #414559; 143 | --vp-c-divider: #414559; 144 | --vp-c-gutter: #51576d; 145 | 146 | /* Text Colors */ 147 | --vp-c-text-1: #c6d0f5; 148 | --vp-c-text-2: #b5bfe2; 149 | --vp-c-text-3: #a5adce; 150 | 151 | /* Callout Colors */ 152 | --vp-c-tip-soft: hsla(96, 44%, 68%, 0.20); 153 | --vp-c-warning-soft: hsla(40, 62%, 73%, 0.20); 154 | --vp-c-danger-soft: hsla(359, 68%, 71%, 0.20); 155 | --vp-c-caution-soft: hsla(359, 68%, 71%, 0.20); 156 | --vp-c-important-soft: hsla(277, 59%, 76%, 0.20); 157 | 158 | --vp-custom-block-info-bg: hsla(189, 48%, 73%, 0.20); 159 | --vp-custom-block-note-bg: hsla(222, 74%, 74%, 0.20); 160 | --vp-custom-block-details-bg: #414559; 161 | 162 | /* Catppuccin Accents */ 163 | --ctp-frappe-rosewater: #f2d5cf; 164 | --ctp-frappe-flamingo: #eebebe; 165 | --ctp-frappe-pink: #f4b8e4; 166 | --ctp-frappe-mauve: #ca9ee6; 167 | --ctp-frappe-red: #e78284; 168 | --ctp-frappe-maroon: #ea999c; 169 | --ctp-frappe-peach: #ef9f76; 170 | --ctp-frappe-yellow: #e5c890; 171 | --ctp-frappe-green: #a6d189; 172 | --ctp-frappe-teal: #81c8be; 173 | --ctp-frappe-sky: #99d1db; 174 | --ctp-frappe-sapphire: #85c1dc; 175 | --ctp-frappe-blue: #8caaee; 176 | --ctp-frappe-lavender: #babbf1; 177 | --ctp-frappe-text: #c6d0f5; 178 | --ctp-frappe-subtext1: #b5bfe2; 179 | --ctp-frappe-subtext0: #a5adce; 180 | --ctp-frappe-overlay2: #949cbb; 181 | --ctp-frappe-overlay1: #838ba7; 182 | --ctp-frappe-overlay0: #737994; 183 | --ctp-frappe-surface2: #626880; 184 | --ctp-frappe-surface1: #51576d; 185 | --ctp-frappe-surface0: #414559; 186 | --ctp-frappe-base: #303446; 187 | --ctp-frappe-mantle: #292c3c; 188 | --ctp-frappe-crust: #232634; 189 | 190 | /* Color Palette */ 191 | --vp-c-gray-1: rgb(81, 87, 109); 192 | --vp-c-gray-2: rgb(65, 69, 89); 193 | --vp-c-gray-3: rgb(48, 52, 70); 194 | --vp-c-gray-soft: hsla(229, 19%, 53%, 0.14); 195 | 196 | --vp-c-default-soft: #414559; 197 | 198 | --vp-c-indigo-1: rgb(140, 170, 238); 199 | --vp-c-indigo-2: rgb(133, 167, 245); 200 | --vp-c-indigo-3: rgb(94, 111, 154); 201 | --vp-c-indigo-soft: hsla(222, 74%, 54%, 0.14); 202 | 203 | --vp-c-purple-1: rgb(202, 158, 230); 204 | --vp-c-purple-2: rgb(204, 152, 236); 205 | --vp-c-purple-3: rgb(125, 105, 150); 206 | --vp-c-purple-soft: hsla(277, 59%, 56%, 0.14); 207 | 208 | --vp-c-green-1: rgb(166, 209, 137); 209 | --vp-c-green-2: rgb(164, 217, 129); 210 | --vp-c-green-3: rgb(107, 131, 104); 211 | --vp-c-green-soft: hsla(96, 44%, 48%, 0.14); 212 | 213 | --vp-c-yellow-1: rgb(229, 200, 144); 214 | --vp-c-yellow-2: rgb(236, 203, 138); 215 | --vp-c-yellow-3: rgb(139, 126, 107); 216 | --vp-c-yellow-soft: hsla(40, 62%, 53%, 0.14); 217 | 218 | --vp-c-red-1: rgb(231, 130, 132); 219 | --vp-c-red-2: rgb(239, 123, 125); 220 | --vp-c-red-3: rgb(140, 91, 101); 221 | --vp-c-red-soft: hsla(359, 68%, 51%, 0.14); 222 | 223 | /* Icons */ 224 | 225 | 226 | --vp-icon-copy: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a5adce%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3C/svg%3E'); 227 | --vp-icon-copied: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a5adce%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Cpath%20d%3D%22m9%2014%202%202%204-4%22/%3E%3C/svg%3E'); 228 | 229 | /* Code Highlighting */ 230 | --vp-code-line-highlight-color: hsla(228, 22%, 66%, 0.20); 231 | } 232 | -------------------------------------------------------------------------------- /theme/frappe/pink.css: -------------------------------------------------------------------------------- 1 | /* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */ 2 | /* https://catppuccin.com/palette */ 3 | 4 | 5 | :root { 6 | /* Fix badge background color */ 7 | --vp-badge-tip-bg: hsla(316, 73%, 69%, 0.20); 8 | 9 | /* Accent Color */ 10 | --vp-c-brand-1: #ea76cb; 11 | --vp-c-brand-2: rgb(230, 96, 194); 12 | --vp-c-brand-3: #ea76cb; 13 | 14 | /* Solid Colors and Sponsor Color */ 15 | --vp-c-white: #eff1f5; 16 | --vp-c-black: #4c4f69; 17 | --vp-c-sponsor: #d20f39; 18 | 19 | /* Background Colors */ 20 | --vp-c-bg: #eff1f5; 21 | --vp-c-bg-alt: #e6e9ef; 22 | --vp-c-bg-elv: #dce0e8; 23 | --vp-c-bg-soft: #e6e9ef; 24 | 25 | /* Border Colors */ 26 | --vp-c-border: #ccd0da; 27 | --vp-c-divider: #ccd0da; 28 | --vp-c-gutter: #bcc0cc; 29 | 30 | /* Text Colors */ 31 | --vp-c-text-1: #4c4f69; 32 | --vp-c-text-2: #5c5f77; 33 | --vp-c-text-3: #6c6f85; 34 | 35 | /* Callout Colors */ 36 | --vp-c-tip-soft: hsla(109, 58%, 40%, 0.20); 37 | --vp-c-warning-soft: hsla(35, 77%, 49%, 0.20); 38 | --vp-c-danger-soft: hsla(347, 87%, 44%, 0.20); 39 | --vp-c-caution-soft: hsla(347, 87%, 44%, 0.20); 40 | --vp-c-important-soft: hsla(266, 85%, 58%, 0.20); 41 | 42 | --vp-custom-block-info-bg: hsla(197, 96%, 46%, 0.20); 43 | --vp-custom-block-note-bg: hsla(220, 91%, 54%, 0.20); 44 | --vp-custom-block-details-bg: #ccd0da; 45 | 46 | /* Catppuccin Accents */ 47 | --ctp-latte-rosewater: #dc8a78; 48 | --ctp-latte-flamingo: #dd7878; 49 | --ctp-latte-pink: #ea76cb; 50 | --ctp-latte-mauve: #8839ef; 51 | --ctp-latte-red: #d20f39; 52 | --ctp-latte-maroon: #e64553; 53 | --ctp-latte-peach: #fe640b; 54 | --ctp-latte-yellow: #df8e1d; 55 | --ctp-latte-green: #40a02b; 56 | --ctp-latte-teal: #179299; 57 | --ctp-latte-sky: #04a5e5; 58 | --ctp-latte-sapphire: #209fb5; 59 | --ctp-latte-blue: #1e66f5; 60 | --ctp-latte-lavender: #7287fd; 61 | --ctp-latte-text: #4c4f69; 62 | --ctp-latte-subtext1: #5c5f77; 63 | --ctp-latte-subtext0: #6c6f85; 64 | --ctp-latte-overlay2: #7c7f93; 65 | --ctp-latte-overlay1: #8c8fa1; 66 | --ctp-latte-overlay0: #9ca0b0; 67 | --ctp-latte-surface2: #acb0be; 68 | --ctp-latte-surface1: #bcc0cc; 69 | --ctp-latte-surface0: #ccd0da; 70 | --ctp-latte-base: #eff1f5; 71 | --ctp-latte-mantle: #e6e9ef; 72 | --ctp-latte-crust: #dce0e8; 73 | 74 | /* Color Palette */ 75 | --vp-c-gray-1: rgb(188, 192, 204); 76 | --vp-c-gray-2: rgb(204, 208, 218); 77 | --vp-c-gray-3: rgb(239, 241, 245); 78 | --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14); 79 | 80 | --vp-c-default-soft: #ccd0da; 81 | 82 | --vp-c-indigo-1: rgb(30, 102, 245); 83 | --vp-c-indigo-2: rgb(21, 99, 255); 84 | --vp-c-indigo-3: rgb(39, 77, 158); 85 | --vp-c-indigo-soft: hsla(220, 91%, 34%, 0.14); 86 | 87 | --vp-c-purple-1: rgb(136, 57, 239); 88 | --vp-c-purple-2: rgb(134, 46, 250); 89 | --vp-c-purple-3: rgb(92, 55, 155); 90 | --vp-c-purple-soft: hsla(266, 85%, 38%, 0.14); 91 | 92 | --vp-c-green-1: rgb(64, 160, 43); 93 | --vp-c-green-2: rgb(58, 171, 33); 94 | --vp-c-green-3: rgb(56, 106, 57); 95 | --vp-c-green-soft: hsla(109, 58%, 20%, 0.14); 96 | 97 | --vp-c-yellow-1: rgb(223, 142, 29); 98 | --vp-c-yellow-2: rgb(236, 144, 16); 99 | --vp-c-yellow-3: rgb(136, 97, 50); 100 | --vp-c-yellow-soft: hsla(35, 77%, 29%, 0.14); 101 | 102 | --vp-c-red-1: rgb(210, 15, 57); 103 | --vp-c-red-2: rgb(222, 4, 51); 104 | --vp-c-red-3: rgb(129, 34, 64); 105 | --vp-c-red-soft: hsla(347, 87%, 24%, 0.14); 106 | 107 | /* Icons */ 108 | 109 | 110 | --vp-icon-copy: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a5adce%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3C/svg%3E'); 111 | --vp-icon-copied: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a5adce%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Cpath%20d%3D%22m9%2014%202%202%204-4%22/%3E%3C/svg%3E'); 112 | 113 | /* Code Highlighting */ 114 | --vp-code-line-highlight-color: hsla(232, 10%, 53%, 0.20); 115 | } 116 | .dark { 117 | /* Fix button text color */ 118 | --vp-button-brand-text: var(--ctp-frappe-crust) !important; 119 | --vp-button-brand-hover-text: var(--ctp-frappe-crust) !important; 120 | --vp-button-brand-active-text: var(--ctp-mocha-crust) !important; 121 | 122 | /* Fix badge background color */ 123 | --vp-badge-tip-bg: hsla(316, 73%, 84%, 0.20); 124 | 125 | /* Accent Color */ 126 | --vp-c-brand-1: #f4b8e4; 127 | --vp-c-brand-2: rgb(241, 161, 219); 128 | --vp-c-brand-3: #f4b8e4; 129 | 130 | /* Solid Colors and Sponsor Color */ 131 | --vp-c-white: #c6d0f5; 132 | --vp-c-black: #303446; 133 | --vp-c-sponsor: #e78284; 134 | 135 | /* Background Colors */ 136 | --vp-c-bg: #303446; 137 | --vp-c-bg-alt: #292c3c; 138 | --vp-c-bg-elv: #232634; 139 | --vp-c-bg-soft: #292c3c; 140 | 141 | /* Border Colors */ 142 | --vp-c-border: #414559; 143 | --vp-c-divider: #414559; 144 | --vp-c-gutter: #51576d; 145 | 146 | /* Text Colors */ 147 | --vp-c-text-1: #c6d0f5; 148 | --vp-c-text-2: #b5bfe2; 149 | --vp-c-text-3: #a5adce; 150 | 151 | /* Callout Colors */ 152 | --vp-c-tip-soft: hsla(96, 44%, 68%, 0.20); 153 | --vp-c-warning-soft: hsla(40, 62%, 73%, 0.20); 154 | --vp-c-danger-soft: hsla(359, 68%, 71%, 0.20); 155 | --vp-c-caution-soft: hsla(359, 68%, 71%, 0.20); 156 | --vp-c-important-soft: hsla(277, 59%, 76%, 0.20); 157 | 158 | --vp-custom-block-info-bg: hsla(189, 48%, 73%, 0.20); 159 | --vp-custom-block-note-bg: hsla(222, 74%, 74%, 0.20); 160 | --vp-custom-block-details-bg: #414559; 161 | 162 | /* Catppuccin Accents */ 163 | --ctp-frappe-rosewater: #f2d5cf; 164 | --ctp-frappe-flamingo: #eebebe; 165 | --ctp-frappe-pink: #f4b8e4; 166 | --ctp-frappe-mauve: #ca9ee6; 167 | --ctp-frappe-red: #e78284; 168 | --ctp-frappe-maroon: #ea999c; 169 | --ctp-frappe-peach: #ef9f76; 170 | --ctp-frappe-yellow: #e5c890; 171 | --ctp-frappe-green: #a6d189; 172 | --ctp-frappe-teal: #81c8be; 173 | --ctp-frappe-sky: #99d1db; 174 | --ctp-frappe-sapphire: #85c1dc; 175 | --ctp-frappe-blue: #8caaee; 176 | --ctp-frappe-lavender: #babbf1; 177 | --ctp-frappe-text: #c6d0f5; 178 | --ctp-frappe-subtext1: #b5bfe2; 179 | --ctp-frappe-subtext0: #a5adce; 180 | --ctp-frappe-overlay2: #949cbb; 181 | --ctp-frappe-overlay1: #838ba7; 182 | --ctp-frappe-overlay0: #737994; 183 | --ctp-frappe-surface2: #626880; 184 | --ctp-frappe-surface1: #51576d; 185 | --ctp-frappe-surface0: #414559; 186 | --ctp-frappe-base: #303446; 187 | --ctp-frappe-mantle: #292c3c; 188 | --ctp-frappe-crust: #232634; 189 | 190 | /* Color Palette */ 191 | --vp-c-gray-1: rgb(81, 87, 109); 192 | --vp-c-gray-2: rgb(65, 69, 89); 193 | --vp-c-gray-3: rgb(48, 52, 70); 194 | --vp-c-gray-soft: hsla(229, 19%, 53%, 0.14); 195 | 196 | --vp-c-default-soft: #414559; 197 | 198 | --vp-c-indigo-1: rgb(140, 170, 238); 199 | --vp-c-indigo-2: rgb(133, 167, 245); 200 | --vp-c-indigo-3: rgb(94, 111, 154); 201 | --vp-c-indigo-soft: hsla(222, 74%, 54%, 0.14); 202 | 203 | --vp-c-purple-1: rgb(202, 158, 230); 204 | --vp-c-purple-2: rgb(204, 152, 236); 205 | --vp-c-purple-3: rgb(125, 105, 150); 206 | --vp-c-purple-soft: hsla(277, 59%, 56%, 0.14); 207 | 208 | --vp-c-green-1: rgb(166, 209, 137); 209 | --vp-c-green-2: rgb(164, 217, 129); 210 | --vp-c-green-3: rgb(107, 131, 104); 211 | --vp-c-green-soft: hsla(96, 44%, 48%, 0.14); 212 | 213 | --vp-c-yellow-1: rgb(229, 200, 144); 214 | --vp-c-yellow-2: rgb(236, 203, 138); 215 | --vp-c-yellow-3: rgb(139, 126, 107); 216 | --vp-c-yellow-soft: hsla(40, 62%, 53%, 0.14); 217 | 218 | --vp-c-red-1: rgb(231, 130, 132); 219 | --vp-c-red-2: rgb(239, 123, 125); 220 | --vp-c-red-3: rgb(140, 91, 101); 221 | --vp-c-red-soft: hsla(359, 68%, 51%, 0.14); 222 | 223 | /* Icons */ 224 | 225 | 226 | --vp-icon-copy: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a5adce%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3C/svg%3E'); 227 | --vp-icon-copied: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22%23a5adce%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20width%3D%228%22%20height%3D%224%22%20x%3D%228%22%20y%3D%222%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Cpath%20d%3D%22m9%2014%202%202%204-4%22/%3E%3C/svg%3E'); 228 | 229 | /* Code Highlighting */ 230 | --vp-code-line-highlight-color: hsla(228, 22%, 66%, 0.20); 231 | } 232 | --------------------------------------------------------------------------------