arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-30 03:38:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs: handle dark mode

Browse Source
This commit is contained in:
Benjamin Canac
2021-11-23 17:30:19 +01:00
parent 0b88958962
commit 6ce996aa74
4 changed files with 32 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
docs/app.vue
View File

@@ -1,16 +1,22 @@
<template>
<div class="bg-tw-gray-50">
<div>
<UContainer class="pt-8 min-h-screen">
<div class="lg:grid lg:grid-cols-12 lg:gap-10 lg:relative">
<aside class="lg:flex lg:flex-col lg:relative pb-8 lg:pb-0 lg:sticky lg:top-0 px-4 sm:px-6 lg:px-0 lg:pt-8 lg:-mt-8 lg:self-start lg:col-span-3 lg:overflow-hidden lg:h-[calc(100vh-2rem)]" style="position: sticky;height: calc(100vh - 0rem);">
<NuxtLink to="/" class="block font-bold text-lg mb-6">
@nuxthq/ui
</NuxtLink>
<div class="flex items-center justify-between mb-6">
<NuxtLink to="/" class="block font-bold text-lg text-tw-gray-900">
@nuxthq/ui
</NuxtLink>
<UseDark v-slot="{ isDark, toggleDark }">
<UButton variant="transparent" size="sm" :icon="isDark ? 'heroicons-outline:moon' : 'heroicons-outline:sun'" @click="toggleDark()" />
</UseDark>
</div>
<nav class="overflow-y-auto h-auto pb-12">
<ul class="space-y-6">
<li>
<ULink to="/examples" class="mb-3 uppercase tracking-wide font-semibold text-xs" active-class="text-primary-700" inactive-class="text-tw-gray-700 hover:text-tw-gray-900" exact>
<ULink to="/examples" class="mb-3 uppercase tracking-wide font-semibold text-xs" active-class="text-primary-600" inactive-class="text-tw-gray-700 hover:text-tw-gray-900" exact>
Examples
</ULink>
</li>
@@ -23,7 +29,7 @@
<ULink
:to="`/components/${component}`"
class="relative block text-sm rounded-md"
active-class="text-primary-700"
active-class="text-primary-600"
inactive-class="text-tw-gray-500 hover:text-tw-gray-900"
exact
>
@@ -45,12 +51,14 @@
</template>
<script setup>
import { UseDark } from '@vueuse/components'
useMeta({
title: '@nuxthq/ui',
meta: [
{ name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1' }
],
htmlAttrs: {
bodyAttrs: {
class: 'bg-tw-gray-50'
}
})