Skip to content
This repository was archived by the owner on Feb 1, 2026. It is now read-only.

docs: fix dark mode styles #101

Open
Jahan-Shah wants to merge 1 commit into
base: main
Choose a base branch
from
Open

docs: fix dark mode styles #101

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/.vitepress/theme/components/BooleanDemo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const { value } = useControls({
</script>

<template>
<div class="w-full h-300px bg-gray-200 mb-8 relative grid grid-cols-2 gap-16 items-center">
<div class="w-full h-300px dark:bg-[#161618] bg-gray-200 mb-8 relative grid grid-cols-2 gap-16 items-center">
<div class="p-4">
<pre class="bg-dark p-8 rounded text-white">awiwi: {{ value }}</pre>
</div>
Expand All @@ -21,4 +21,4 @@ const { value } = useControls({
/>
</div>
</div>
</template>
</template>
4 changes: 2 additions & 2 deletions docs/.vitepress/theme/components/ButtonDemo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ useControls({
</script>

<template>
<div class="w-full h-300px bg-gray-200 mb-8 relative grid grid-cols-2 gap-16 items-center">
<div class="w-full h-300px dark:bg-[#161618] bg-gray-200 mb-8 relative grid grid-cols-2 gap-16 items-center">
<div class="p-4">
<pre class="bg-dark p-8 rounded text-white">{{ value }}</pre>
</div>
Expand All @@ -31,4 +31,4 @@ useControls({
/>
</div>
</div>
</template>
</template>
4 changes: 2 additions & 2 deletions docs/.vitepress/theme/components/ButtonSizesDemo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ useControls({
</script>

<template>
<div class="w-full h-300px bg-gray-200 mb-8 relative grid grid-cols-2 gap-16 items-center">
<div class="w-full h-300px dark:bg-[#161618] bg-gray-200 mb-8 relative grid grid-cols-2 gap-16 items-center">
<div class="p-4">
<pre class="bg-dark p-8 rounded text-white">{{ value }}</pre>
</div>
Expand All @@ -55,4 +55,4 @@ useControls({
/>
</div>
</div>
</template>
</template>
4 changes: 2 additions & 2 deletions docs/.vitepress/theme/components/ButtonVariantDemo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ useControls({
</script>

<template>
<div class="w-full h-300px bg-gray-200 mb-8 relative grid grid-cols-2 gap-16 items-center">
<div class="w-full h-300px dark:bg-[#161618] bg-gray-200 mb-8 relative grid grid-cols-2 gap-16 items-center">
<div class="p-4">
<pre class="bg-dark p-8 rounded text-white">{{ value }}</pre>
</div>
Expand All @@ -32,4 +32,4 @@ useControls({
/>
</div>
</div>
</template>
</template>
4 changes: 2 additions & 2 deletions docs/.vitepress/theme/components/ColorDemo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const { value: color } = useControls({

<template>
<div
class="w-full h-300px bg-gray-200 mb-8 relative grid grid-cols-2 gap-16 items-center"
class="w-full h-300px dark:bg-[#161618] bg-gray-200 mb-8 relative grid grid-cols-2 gap-16 items-center"
:style="{ backgroundColor: color }"
>
<div class="p-4">
Expand All @@ -24,4 +24,4 @@ const { value: color } = useControls({
/>
</div>
</div>
</template>
</template>
4 changes: 2 additions & 2 deletions docs/.vitepress/theme/components/FPSDemo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,12 @@ useControls('fpsgraph', {
</script>

<template>
<div class="w-full h-300px bg-gray-200 mb-8 relative flex justify-center items-center">
<div class="w-full h-300px dark:bg-[#161618] bg-gray-200 mb-8 relative flex justify-center items-center">
<div class="relative w-280px min-h-200px">
<TresLeches
class="important-left-0 important-top-8"
:uuid="uuid"
/>
</div>
</div>
</template>
</template>
4 changes: 2 additions & 2 deletions docs/.vitepress/theme/components/GettingStartedDemo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,12 @@ useControls({
</script>

<template>
<div class="w-full h-300px bg-gray-200 mb-8 relative flex justify-center items-center">
<div class="w-full h-300px dark:bg-[#161618] bg-gray-200 mb-8 relative flex justify-center items-center">
<div class="relative w-280px min-h-200px">
<TresLeches
class="important-left-0 -important-top-8"
:uuid="uuid"
/>
</div>
</div>
</template>
</template>
4 changes: 2 additions & 2 deletions docs/.vitepress/theme/components/HeroDemo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@ useControls({
</script>

<template>
<div class="w-full h-300px bg-gray-200 mb-8 relative flex justify-center items-center">
<div class="w-full h-300px dark:bg-[#161618] bg-gray-200 mb-8 relative flex justify-center items-center">
<div class="relative w-280px min-h-200px">
<TresLeches class="important-left-0 important-top-0" />
</div>
</div>
</template>
</template>
4 changes: 2 additions & 2 deletions docs/.vitepress/theme/components/IconDemo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const { value } = useControls({
</script>

<template>
<div class="w-full h-300px bg-gray-200 mb-8 relative grid grid-cols-2 gap-16 items-center">
<div class="w-full h-300px dark:bg-[#161618] bg-gray-200 mb-8 relative grid grid-cols-2 gap-16 items-center">
<div class="p-4">
<pre class="bg-dark p-8 rounded text-white">{{ value }}</pre>
</div>
Expand All @@ -26,4 +26,4 @@ const { value } = useControls({
/>
</div>
</div>
</template>
</template>
4 changes: 2 additions & 2 deletions docs/.vitepress/theme/components/MultipleControlDemo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const controls = useControls({
</script>

<template>
<div class="w-full min-h-300px bg-gray-200 mb-8 relative grid grid-cols-2 gap-16 items-center">
<div class="w-full min-h-300px dark:bg-[#161618] bg-gray-200 mb-8 relative grid grid-cols-2 gap-16 items-center">
<div class="p-4">
<pre class="bg-dark p-8 rounded text-white">{{ controls }}</pre>
</div>
Expand All @@ -26,4 +26,4 @@ const controls = useControls({
/>
</div>
</div>
</template>
</template>
4 changes: 2 additions & 2 deletions docs/.vitepress/theme/components/NumberDemo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const { value } = useControls({
</script>

<template>
<div class="w-full h-300px bg-gray-200 mb-8 relative grid grid-cols-2 gap-16 items-center">
<div class="w-full h-300px dark:bg-[#161618] bg-gray-200 mb-8 relative grid grid-cols-2 gap-16 items-center">
<div class="p-4">
<pre class="bg-dark p-8 rounded text-white">{{ value }} ⭐️</pre>
</div>
Expand All @@ -21,4 +21,4 @@ const { value } = useControls({
/>
</div>
</div>
</template>
</template>
4 changes: 2 additions & 2 deletions docs/.vitepress/theme/components/RangeDemo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const planets = computed(() => Array.from({ length: value.value }, (_, i) => i +
</script>

<template>
<div class="w-full h-300px bg-gray-200 mb-8 relative grid grid-cols-2 gap-16 items-center">
<div class="w-full h-300px dark:bg-[#161618] bg-gray-200 mb-8 relative grid grid-cols-2 gap-16 items-center">
<div class="p-4 flex gap-4 flex-wrap text-xl">
<i
v-for="planet in planets"
Expand All @@ -32,4 +32,4 @@ const planets = computed(() => Array.from({ length: value.value }, (_, i) => i +
/>
</div>
</div>
</template>
</template>
4 changes: 2 additions & 2 deletions docs/.vitepress/theme/components/SelectDemo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const { value } = useControls({
</script>

<template>
<div class="w-full h-300px bg-gray-200 mb-8 relative grid grid-cols-2 gap-16 items-center">
<div class="w-full h-300px dark:bg-[#161618] bg-gray-200 mb-8 relative grid grid-cols-2 gap-16 items-center">
<div class="p-4">
<pre class="bg-dark p-8 rounded text-white">{{ value }}</pre>
</div>
Expand All @@ -33,4 +33,4 @@ const { value } = useControls({
/>
</div>
</div>
</template>
</template>
4 changes: 2 additions & 2 deletions docs/.vitepress/theme/components/SingleControlDemo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const control = useControls({
</script>

<template>
<div class="w-full h-300px bg-gray-200 mb-8 relative grid grid-cols-2 gap-16 items-center">
<div class="w-full h-300px dark:bg-[#161618] bg-gray-200 mb-8 relative grid grid-cols-2 gap-16 items-center">
<div class="p-4">
<pre class="bg-dark p-8 rounded text-white text-xs">{{ control }}</pre>
</div>
Expand All @@ -21,4 +21,4 @@ const control = useControls({
/>
</div>
</div>
</template>
</template>
4 changes: 2 additions & 2 deletions docs/.vitepress/theme/components/Test.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ useControls('fpsgraph')
</script>

<template>
<div class="w-full h-300px bg-gray-200 mb-8 relative flex justify-center items-center">
<div class="w-full h-300px dark:bg-[#161618] bg-gray-200 mb-8 relative flex justify-center items-center">
<div class="relative w-280px min-h-200px">
<TresLeches class="important-left-0 important-top-0" />
</div>
</div>
</template>
</template>
4 changes: 2 additions & 2 deletions docs/.vitepress/theme/components/TextDemo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const { value } = useControls({
</script>

<template>
<div class="w-full h-300px bg-gray-200 mb-8 relative grid grid-cols-2 gap-16 items-center">
<div class="w-full h-300px dark:bg-[#161618] bg-gray-200 mb-8 relative grid grid-cols-2 gap-16 items-center">
<div class="p-4">
<pre class="bg-dark p-8 rounded text-white">{{ value }}</pre>
</div>
Expand All @@ -21,4 +21,4 @@ const { value } = useControls({
/>
</div>
</div>
</template>
</template>
4 changes: 2 additions & 2 deletions docs/.vitepress/theme/components/Vector3Demo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const { value } = useControls({
</script>

<template>
<div class="w-full h-300px bg-gray-200 mb-8 relative grid grid-cols-2 gap-16 items-center">
<div class="w-full h-300px dark:bg-[#161618] bg-gray-200 mb-8 relative grid grid-cols-2 gap-16 items-center">
<div class="p-4">
<pre class="bg-dark p-8 rounded text-white">{{ value }}</pre>
</div>
Expand All @@ -22,4 +22,4 @@ const { value } = useControls({
/>
</div>
</div>
</template>
</template>
4 changes: 2 additions & 2 deletions docs/.vitepress/theme/components/VisibilityDemo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ watchEffect(() => {
</script>

<template>
<div class="w-full h-300px bg-gray-200 mb-8 relative flex flex-col justify-center items-center">
<div class="w-full h-300px dark:bg-[#161618] bg-gray-200 mb-8 relative flex flex-col justify-center items-center">
<p class="mb-8">
Try toggling the `isVisible` control
</p>
Expand All @@ -37,4 +37,4 @@ watchEffect(() => {
/>
</div>
</div>
</template>
</template>
23 changes: 23 additions & 0 deletions docs/.vitepress/theme/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,14 @@
* Component: Home
* -------------------------------------------------------------------------- */

:root.dark .box {
background-color: var(--vp-c-black);
}

:root.dark .clip {
-webkit-text-fill-color: var(--vp-c-white);
}

.box {
border: 2px solid var(--vp-c-dark-2);
border-radius: 8px;
Expand All @@ -146,3 +154,18 @@
--docsearch-primary-color: var(--vp-c-brand-1) !important;
}

/**
* Component: Link
* -------------------------------------------------------------------------- */

:root.dark .link:hover .text {
color: white !important;
}

:root.dark .is-active .text {
color: white !important;
}

:root.dark .title {
color: white;
}