Skip to content

docs: add support for toggling theme #33

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

docs: add support for toggling theme #33

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
6 changes: 6 additions & 0 deletions apps/docs/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,12 @@
<style>
#app > div {
background-color: var(--v0-background);
color: var(--v0-text);
}

.bg-surface-tint {
background-color: var(--v0-surfaceTint);
color: var(--v0-text);
}

.markdown-body {
Expand Down
15 changes: 14 additions & 1 deletion apps/docs/src/components/app/AppBar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,23 @@
<script setup lang="ts">
// Components
import { Atom, useBreakpoints } from '@vuetify/v0'
import { Atom, useBreakpoints, useTheme } from '@vuetify/v0'

// Composables
import { useAppContext } from '@/composables/useApp'

// Utilities
import { toRef } from 'vue'

// Types
import type { AtomProps } from '@vuetify/v0'

const { as = 'header' } = defineProps<AtomProps>()

const breakpoints = useBreakpoints()
const app = useAppContext()
const theme = useTheme()

const icon = toRef(() => theme.selectedItem.value?.dark ? 'dark' : 'light')
</script>

<template>
Expand Down Expand Up @@ -47,6 +53,13 @@
>
<AppIcon icon="github" />
</a>

<button
class="pa-1 inline-flex rounded cursor-pointer bg-surface-tint"
@click="theme.cycle(['light', 'dark'])"
>
<AppIcon :icon />
</button>
</div>
</Atom>
</template>
Expand Down
8 changes: 7 additions & 1 deletion apps/docs/src/components/app/AppDivider.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,13 @@
<template>
<Atom
:as
class="border-none bg-black opacity-10"
class="app-divider border-none"
:class="[orientation === 'horizontal' ? 'w-full h-px my-2' : 'w-px h-full mx-2']"
/>
</template>

<style scoped>
.app-divider {
background-color: var(--v0-divider);
}
</style>
1 change: 1 addition & 0 deletions apps/docs/src/components/app/AppMain.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
<div
class="pa-4 mt-[72px] transition-margin duration-200 ease-in-out"
:class="breakpoints.isMobile ? 'ml-0' : 'ml-[220px]'"
style="min-height: calc(100vh - 96px)"
>
<router-view />
</div>
Expand Down
13 changes: 10 additions & 3 deletions apps/docs/src/components/app/AppNav.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<script setup lang="ts">
import { Atom, useBreakpoints } from '@vuetify/v0'
import { Atom, useBreakpoints, useTheme } from '@vuetify/v0'
import { useAppContext } from '@/composables/useApp'
import { useRoute } from 'vue-router'
import { watch } from 'vue'
import { toRef, watch } from 'vue'
import type { AtomProps } from '@vuetify/v0'

const { as = 'nav' } = defineProps<AtomProps>()
Expand Down Expand Up @@ -114,6 +114,13 @@
const breakpoints = useBreakpoints()
const app = useAppContext()
const route = useRoute()
const theme = useTheme()

const src = toRef(() => {
return theme.selectedId.value === 'dark'
? 'https://cdn.vuetifyjs.com/docs/images/logos/vzero-logo-dark.png'
: 'https://cdn.vuetifyjs.com/docs/images/logos/vzero-logo-light.png'
})

watch(route, () => {
if (app.nav.value && breakpoints.isMobile) {
Expand All @@ -135,7 +142,7 @@
alt="Vuetify0 Logo"
decoding="async"
fetchpriority="high"
src="https://cdn.vuetifyjs.com/docs/images/logos/vzero-logo-light.png"
:src
>

<ul class="flex gap-2 flex-col">
Expand Down
2 changes: 2 additions & 0 deletions apps/docs/src/plugins/icons.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ export const [useIconContext, provideIconContext, context] = createTokensContext
close: 'M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z',
alert: 'M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2',
vuetify: 'M4.21042 8.37865L4.00090 8.00000L0.00000 0.80000H8.42088L4.21042 8.37865ZM4.97928 9.76072L8.00000 15.20000L16.00000 0.80000H9.95672L4.97928 9.76072Z',
light: 'M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708',
dark: 'M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278M4.858 1.311A7.27 7.27 0 0 0 1.025 7.71c0 4.02 3.279 7.276 7.319 7.276a7.32 7.32 0 0 0 5.205-2.162q-.506.063-1.029.063c-4.61 0-8.343-3.714-8.343-8.29 0-1.167.242-2.278.681-3.286',
})

export function createIconPlugin () {
Expand Down
30 changes: 15 additions & 15 deletions apps/docs/src/plugins/zero.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ export default function zero (app: App) {
colors: {
primary: '#3b82f6',
secondary: '#64748b',
accent: '#6366f1',
error: '#ef4444',
info: '#0ea5e9',
success: '#22c55e',
Expand All @@ -30,26 +29,27 @@ export default function zero (app: App) {
surface: '#FFFFFF',
surfaceTint: '#ececec',
surfaceVariant: '#212121',
divider: '#eeeeee',
divider: '#0000001F',
pre: '#fafafa',
text: '#212121',
},
},
dark: {
dark: true,
colors: {
primary: '#675496',
secondary: '#5d5d72',
accent: '#86468c',
error: '#ba1a1a',
info: '#0066b3',
success: '#006d3b',
warning: '#b25c00',
background: '#FFFFFF',
surface: '#FFFFFF',
surfaceTint: '#ded8e0',
surfaceVariant: '#322f35',
divider: '#7a757f',
pre: '#f8f2fa',
primary: '#2196F3',
secondary: '#54B6B2',
error: '#CF6679',
info: '#2196F3',
success: '#4CAF50',
warning: '#FB8C00',
background: '#121212',
surface: '#212121',
surfaceTint: '#424242',
surfaceVariant: '#c8c8c8',
divider: '#FFFFFF1F',
pre: '#212121',
text: '#FFFFFF',
},
},
},
Expand Down
2 changes: 1 addition & 1 deletion packages/0/src/composables/useTheme/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export type ThemeTicket = SingleTicket & {

export interface ThemeContext<Z extends ThemeTicket> extends SingleContext<Z> {
colors: ComputedRef<Record<string, Colors>>
cycle: (themes: ID[]) => void
cycle: (themes?: ID[]) => void
}

export interface ThemeOptions extends ThemePluginOptions {}
Expand Down
7 changes: 6 additions & 1 deletion playground/src/composables.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,7 @@ declare global {
const useElementSize: typeof import('../../packages/paper/src/composables/useResizeObserver/index')['useElementSize']
const useElevation: typeof import('../../packages/paper/src/composables/useElevation/index')['useElevation']
const useEventListener: typeof import('../../packages/0/src/composables/useEventListener/index')['useEventListener']
const useFilter: typeof import('../../packages/0/src/composables/useFilter/index')['useFilter']
const useForm: typeof import('../../packages/0/src/composables/useForm/index')['useForm']
const useGroup: typeof import('../../packages/0/src/composables/useGroup/index')['useGroup']
const useHydration: typeof import('../../packages/0/src/composables/useHydration/index')['useHydration']
Expand Down Expand Up @@ -188,6 +189,9 @@ declare global {
export type { CleanupFunction, EventHandler } from '../../packages/0/src/composables/useEventListener/index'
import('../../packages/0/src/composables/useEventListener/index')
// @ts-ignore
export type { Primitive, FilterQuery, FilterItem, FilterMode, FilterFunction, UseFilterOptions, UseFilterResult } from '../../packages/0/src/composables/useFilter/index'
import('../../packages/0/src/composables/useFilter/index')
// @ts-ignore
export type { FormValidationResult, FormValidationRule, FormValue, FormTicket, FormContext, FormOptions } from '../../packages/0/src/composables/useForm/index'
import('../../packages/0/src/composables/useForm/index')
// @ts-ignore
Expand Down Expand Up @@ -227,7 +231,7 @@ declare global {
export type { StorageContext, StorageOptions, StoragePlugin } from '../../packages/0/src/composables/useStorage/index'
import('../../packages/0/src/composables/useStorage/index')
// @ts-ignore
export type { Colors, ThemeColors, ThemeTicket, ThemeContext, ThemeOptions, ThemePluginOptions, ThemePlugin } from '../../packages/0/src/composables/useTheme/index'
export type { Colors, ThemeColors, ThemeRecord, ThemeTicket, ThemeContext, ThemeOptions, ThemePluginOptions, ThemePlugin } from '../../packages/0/src/composables/useTheme/index'
import('../../packages/0/src/composables/useTheme/index')
// @ts-ignore
export type { TokenAlias, TokenValue, TokenCollection, FlatTokenCollection, TokenTicket, TokenContext } from '../../packages/0/src/composables/useTokens/index'
Expand Down Expand Up @@ -354,6 +358,7 @@ declare module 'vue' {
readonly useElementSize: UnwrapRef<typeof import('../../packages/paper/src/composables/useResizeObserver/index')['useElementSize']>
readonly useElevation: UnwrapRef<typeof import('../../packages/paper/src/composables/useElevation/index')['useElevation']>
readonly useEventListener: UnwrapRef<typeof import('../../packages/0/src/composables/useEventListener/index')['useEventListener']>
readonly useFilter: UnwrapRef<typeof import('../../packages/0/src/composables/useFilter/index')['useFilter']>
readonly useForm: UnwrapRef<typeof import('../../packages/0/src/composables/useForm/index')['useForm']>
readonly useGroup: UnwrapRef<typeof import('../../packages/0/src/composables/useGroup/index')['useGroup']>
readonly useHydration: UnwrapRef<typeof import('../../packages/0/src/composables/useHydration/index')['useHydration']>
Expand Down