diff --git a/docs/.vitepress/theme/index.css b/docs/.vitepress/theme/index.css index e0bcac5e..9478bae1 100644 --- a/docs/.vitepress/theme/index.css +++ b/docs/.vitepress/theme/index.css @@ -1,3 +1,5 @@ +/* Medium Zoom */ + .medium-zoom-overlay { z-index: 20; } @@ -5,3 +7,63 @@ .medium-zoom-image { z-index: 21; } + +/* Color Variables */ + +:root { + --vp-c-brand: #646cff; + --vp-c-brand-light: #747bff; + --vp-c-brand-lighter: #9499ff; + --vp-c-brand-lightest: #bcc0ff; + --vp-c-brand-dark: #535bf2; + --vp-c-brand-darker: #454ce1; + --vp-c-brand-dimm: rgba(100, 108, 255, 0.08); +} + +/* Home Component */ + +:root { + --vp-home-hero-name-color: transparent; + --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe 30%, #41d1ff); + + --vp-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #47caff 50%); + --vp-home-hero-image-filter: blur(40px); +} + +@media (min-width: 640px) { + :root { + --vp-home-hero-image-filter: blur(56px); + } +} + +@media (min-width: 960px) { + :root { + --vp-home-hero-image-filter: blur(72px); + } +} + +/* Dark Mode + * lighter color for links +*/ + +.dark .vp-doc a, +.dark .vp-doc a > code, +.dark .VPNavBarMenuLink.VPNavBarMenuLink:hover, +.dark .VPNavBarMenuLink.VPNavBarMenuLink.active, +.dark .link.link:hover, +.dark .link.link.active, +.dark .edit-link-button.edit-link-button, +.dark .pager-link .title { + color: var(--vp-c-brand-lighter); +} + +.dark .vp-doc a:hover, +.dark .vp-doc a > code:hover { + color: var(--vp-c-brand-lightest); + opacity: 1; +} + +/* Transition by color instead of opacity */ +.dark .vp-doc .custom-block a { + transition: color 0.25s; +} diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts index d8dd5e10..2dc2ea03 100644 --- a/docs/.vitepress/theme/index.ts +++ b/docs/.vitepress/theme/index.ts @@ -1,5 +1,5 @@ import DefaultTheme from 'vitepress/theme' -import { onMounted, watch, nextTick, watchEffect } from 'vue' +import { nextTick, watchEffect } from 'vue' import { inBrowser, useRouter } from 'vitepress' import mediumZoom from 'medium-zoom' import Title from '../components/Title.vue'