feat: dark mode

Author: tobimori

index.css

@@ -39,7 +39,7 @@
 		"last 2 UCAndroid versions"
 	],
 	"lint-staged": {
-		"*.{js,vue}": [
+		"src/*.{js,vue}": [
 			"eslint --fix",
 			"prettier --write"
 		],

index.js

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onMounted, onUnmounted } from "kirbyuse"
+import { computed, onMounted, onUnmounted, ref } from "kirbyuse"
 
 const props = defineProps({
 	template: {
@@ -88,7 +88,7 @@ const meta = computed(() => [
 	width: 100%;
 	border-radius: var(--rounded);
 	box-shadow: var(--shadow);
-	background: var(--color-white);
+	background: var(--item-color-back);
 	line-height: var(--leading-normal);
 	position: relative;
 	max-height: 14rem;
@@ -114,9 +114,9 @@ const meta = computed(() => [
 		content: "";
 		background: linear-gradient(
 			to bottom,
-			rgb(255 255 255 / 0%),
-			rgb(255 255 255 / 20%),
-			rgb(255 255 255 / 100%)
+			transparent,
+			rgb(from var(--item-color-back) r g b / 20%),
+			var(--item-color-back)
 		);
 		position: absolute;
 		pointer-events: none;
@@ -125,21 +125,24 @@ const meta = computed(() => [
 	}
 
 	hr {
-		border-top: 1px solid var(--color-gray-200);
+		border-top: 1px solid
+			light-dark(var(--color-gray-300), var(--color-gray-900));
 		margin-bottom: -1.25rem;
 	}
 }
 
 .df-log-email-entry-body {
 	padding: var(--spacing-4) var(--spacing-3);
+	color: var(--color-text);
 }
 
 .df-log-email-entry-meta {
 	padding-block: var(--spacing-2);
 	padding-inline: var(--spacing-3);
 	display: grid;
 	grid-template-columns: auto 1fr;
-	border-block-end: 1px solid var(--color-gray-200);
+	border-block-end: 1px solid
+		light-dark(var(--color-gray-300), var(--color-gray-900));
 	white-space: nowrap;
 	overflow: hidden;
 }
@@ -151,26 +154,27 @@ const meta = computed(() => [
 	display: block;
 	line-height: var(--leading-normal);
 	margin-inline-start: var(--spacing-2);
+	color: var(--color-text);
 
 	&:not([data-type="subject"]) {
-		background: var(--color-gray-200);
+		background: var(--field-color-back);
 		border-radius: 9999px;
 		padding-inline: var(--spacing-2);
 	}
 }
 
 .df-log-email-entry-meta-label {
-	color: var(--color-gray-700);
+	color: var(--color-text-dimmed);
 }
 
 .df-log-email-entry-expand {
 	position: absolute;
 	inset: auto var(--spacing-3) var(--spacing-3) auto;
 	z-index: 20;
 	display: flex;
-	color: var(--color-gray-700);
+	color: var(--color-text-dimmed);
 	gap: var(--spacing-1);
 	align-items: center;
-	background: var(--color-white);
+	background: light-dark(var(--color-white), var(--color-gray-800));
 }
 </style>

package.json

@@ -1,6 +1,6 @@
 <script setup>
-import { props as blockProps } from "@/utils/block"
 import Editable from "@/components/Editable.vue"
+import { props as blockProps } from "@/utils/block"
 
 const props = defineProps(blockProps)
 const emit = defineEmits(["update"])
@@ -22,8 +22,8 @@ const emit = defineEmits(["update"])
 <style>
 .df-button-input {
 	outline: none;
-	background: var(--color-black);
-	color: var(--color-white);
+	background: light-dark(var(--color-black), var(--color-white));
+	color: light-dark(var(--color-white), var(--color-black));
 	padding: var(--spacing-2) var(--spacing-3);
 	border-radius: var(--rounded-md);
 	box-shadow: var(--shadow-sm);