From b771d209eeaf242d3a13ef1e3ca5cf4134f87aa7 Mon Sep 17 00:00:00 2001
From: AntoXa PRO <info@antoxa.pro>
Date: Mon, 14 Aug 2023 16:45:26 +0300
Subject: [PATCH] ToggleTheme

---
 package.json                   |  2 +-
 src/components/ToggleTheme.vue | 21 ++++++++++++++++++
 src/components/index.ts        |  1 +
 src/css/common.sass            | 40 +++++++++++++++++++++-------------
 src/css/theme.sass             | 13 ++++++++++-
 5 files changed, 60 insertions(+), 17 deletions(-)
 create mode 100644 src/components/ToggleTheme.vue

diff --git a/package.json b/package.json
index 1808d64..5005022 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/ToggleTheme.vue b/src/components/ToggleTheme.vue
new file mode 100644
index 0000000..dd11b72
--- /dev/null
+++ b/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>
diff --git a/src/components/index.ts b/src/components/index.ts
index a17e7cf..2303c2d 100644
--- a/src/components/index.ts
+++ b/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'
diff --git a/src/css/common.sass b/src/css/common.sass
index 3d88f56..bb30af3 100644
--- a/src/css/common.sass
+++ b/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
-  @apply text-xl md:text-2xl font-bold
-h2
-  @apply text-lg md:text-xl font-bold
-h3
-  @apply text-base md:text-lg font-bold
-h4
-  @apply text-sm md:text-base font-bold
+  h1
+    @apply text-xl md:text-2xl font-bold
+  h2
+    @apply text-lg md:text-xl font-bold
+  h3
+    @apply text-base md:text-lg font-bold
+  h4
+    @apply text-sm md:text-base font-bold
 
-p
-  &:not(:last-child)
+  p
+    &:not(:last-child)
+      @apply mb-4
+
+  .title
     @apply mb-4
 
-.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
diff --git a/src/css/theme.sass b/src/css/theme.sass
index add8ce9..5375a63 100644
--- a/src/css/theme.sass
+++ b/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,