ToggleTheme

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "axp-ui",
 	"descriiption": "My helper ui lib",
-	"version": "1.6.1",
+	"version": "1.6.2",
 	"homepage": "https://antoxahub.ru/antoxa/axp-ui",
 	"repository": {
 		"type": "git",

src/components/ToggleTheme.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import UiIcon from './Icon.vue'
+
+// Props.
+const props = defineProps<{
+	dark?: boolean
+}>()
+
+// Emits.
+const emit = defineEmits<{ (e: 'update:dark', v: boolean): void }>()
+</script>
+
+<template>
+	<div class="ui-toggle-theme">
+		<ui-icon
+			:name="props.dark ? 'moon' : 'sun'"
+			@click="emit('update:dark', !props.dark)"
+			title="Переключить тему"
+		/>
+	</div>
+</template>

src/components/index.ts

@@ -17,3 +17,4 @@ export { default as UiForm } from './Form.vue'
 export { default as UiCard } from './Card.vue'
 export { default as UiTable } from './Table.vue'
 export { default as UiDialog } from './Dialog.vue'
+export { default as UiToggleTheme } from './ToggleTheme.vue'

src/css/common.sass

@@ -1,24 +1,31 @@
-body
-  @apply text-dark
+// Layouts.
+.layout
+  @apply flex flex-col h-full
+  @apply min-w-[320px]
+  min-height: 100vh
+  overflow: hidden
   *
     @apply text-base
+  main
+    @apply flex flex-col flex-1
 
-h1
+  h1
     @apply text-xl md:text-2xl font-bold
-h2
+  h2
     @apply text-lg md:text-xl font-bold
-h3
+  h3
     @apply text-base md:text-lg font-bold
-h4
+  h4
     @apply text-sm md:text-base font-bold
 
-p
+  p
     &:not(:last-child)
       @apply mb-4
 
-.title
+  .title
     @apply mb-4
 
+// Ui.
 .ui
   &-btn,
   &-field .input
@@ -133,3 +140,6 @@ p
             @apply text-dark
       &-content
         @apply p-3
+  &-toggle-theme
+    .ui-icon
+      @apply cursor-pointer

src/css/theme.sass

@@ -1,3 +1,14 @@
+// Layouts.
+.layout
+  @apply bg-light/10 text-dark
+  @apply dark:bg-black dark:text-light
+  *
+    @apply border-light dark:border-light/40
+  a
+    @apply text-primary
+
+// body
+//   *
 .ui
   &-btn,
   &-alert
@@ -23,7 +34,7 @@
 
   &-field
     .input
-      @apply bg-white text-dark
+      @apply bg-white dark:bg-white/10 text-dark dark:text-white
     &.error
       .label,
       .input,