Skip to content

Commit 37fb15e

Browse files
Simon-He95Simon-He95
committed
feat: add dark mode support to tooltip and various components with isDark prop
1 parent 296cbdc commit 37fb15e

File tree

7 files changed

+99
-43
lines changed

7 files changed

+99
-43
lines changed

‎src/components/AdmonitionNode/AdmonitionNode.vue‎

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ interface AdmonitionNode {
1818
}
1919
2020
// 接收 props（并在 script 中使用）
21-
const props = defineProps<{ node: AdmonitionNode, indexKey: number | string }>()
21+
const props = defineProps<{ node: AdmonitionNode, indexKey: number | string, isDark?: boolean }>()
2222
// 定义事件
2323
const emit = defineEmits(['copy'])
2424
@@ -55,7 +55,7 @@ const headerId = `admonition-${Math.random().toString(36).slice(2, 9)}`
5555
</script>
5656

5757
<template>
58-
<div class="admonition" :class="`admonition-${props.node.kind}`">
58+
<div class="admonition" :class="[`admonition-${props.node.kind}`, props.isDark ? 'is-dark' : '']">
5959
<div :id="headerId" class="admonition-header">
6060
<span v-if="iconMap[props.node.kind]" class="admonition-icon">{{ iconMap[props.node.kind] }}</span>
6161
<span class="admonition-title">{{ displayTitle }}</span>
@@ -211,15 +211,34 @@ const headerId = `admonition-${Math.random().toString(36).slice(2, 9)}`
211211
outline-offset: 2px;
212212
}
213213
214-
/* 深色模式支持：支持 .dark 类切换与系统偏好 */
215-
.dark .admonition {
214+
/* 深色模式支持：支持 props.isDark（组件级）与系统偏好（媒体查询） */
215+
.admonition.is-dark {
216216
--admonition-bg: #0b1220;
217217
--admonition-border: rgba(255, 255, 255, 0.06);
218218
--admonition-header-bg: rgba(255, 255, 255, 0.03);
219219
--admonition-text: #e6eef8;
220220
--admonition-muted: #cbd5e1;
221221
}
222222
223+
/* 当组件通过 props.isDark 指定为暗色时，增强语义色块 */
224+
.admonition.is-dark .admonition-note .admonition-header,
225+
.admonition.is-dark .admonition-info .admonition-header {
226+
background-color: rgba(68, 138, 255, 0.12);
227+
color: var(--admonition-note-color);
228+
}
229+
.admonition.is-dark .admonition-tip .admonition-header {
230+
background-color: rgba(0, 191, 165, 0.12);
231+
color: var(--admonition-tip-color);
232+
}
233+
.admonition.is-dark .admonition-warning .admonition-header {
234+
background-color: rgba(255, 145, 0, 0.12);
235+
color: var(--admonition-warning-color);
236+
}
237+
.admonition.is-dark .admonition-danger .admonition-header {
238+
background-color: rgba(255, 82, 82, 0.12);
239+
color: var(--admonition-danger-color);
240+
}
241+
223242
@media (prefers-color-scheme: dark) {
224243
.admonition {
225244
--admonition-bg: #0b1220;

‎src/components/CodeBlockNode/CodeBlockNode.vue‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -596,7 +596,7 @@ function onBtnHover(e: Event, text: string, place: TooltipPlacement = 'top') {
596596
return
597597
const ev = e as MouseEvent
598598
const origin = ev?.clientX != null && ev?.clientY != null ? { x: ev.clientX, y: ev.clientY } : undefined
599-
showTooltipForAnchor(e.currentTarget as HTMLElement, text, place, false, origin)
599+
showTooltipForAnchor(e.currentTarget as HTMLElement, text, place, false, origin, props.isDark)
600600
}
601601
602602
function onBtnLeave() {
@@ -609,7 +609,7 @@ function onCopyHover(e: Event) {
609609
const txt = copyText.value ? (t('common.copied') || 'Copied') : (t('common.copy') || 'Copy')
610610
const ev = e as MouseEvent
611611
const origin = ev?.clientX != null && ev?.clientY != null ? { x: ev.clientX, y: ev.clientY } : undefined
612-
showTooltipForAnchor(e.currentTarget as HTMLElement, txt, 'top', false, origin)
612+
showTooltipForAnchor(e.currentTarget as HTMLElement, txt, 'top', false, origin, props.isDark)
613613
}
614614
615615
function toggleExpand() {
@@ -886,8 +886,10 @@ onUnmounted(() => {
886886
v-else
887887
ref="container"
888888
:style="containerStyle"
889-
class="code-block-container my-4 rounded-lg border border-gray-200 dark:border-gray-700/30 overflow-hidden shadow-sm bg-white dark:bg-gray-900" :class="[
890-
{ 'is-rendering': props.loading },
889+
class="code-block-container my-4 rounded-lg border overflow-hidden shadow-sm"
890+
:class="[
891+
props.isDark ? 'border-gray-700/30 bg-gray-900' : 'border-gray-200 bg-white',
892+
{ 'is-rendering': props.loading, 'is-dark': props.isDark },
891893
]"
892894
>
893895
<!-- Configurable header area: consumers may override via named slots -->
@@ -1060,7 +1062,7 @@ onUnmounted(() => {
10601062
border-radius: 0.25rem;
10611063
}
10621064
1063-
.dark .skeleton-line {
1065+
.code-block-container.is-dark .skeleton-line {
10641066
background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.12) 37%, rgba(255,255,255,0.06) 63%);
10651067
background-size: 400% 100%;
10661068
}

‎src/components/MarkdownCodeBlockNode/MarkdownCodeBlockNode.vue‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -299,7 +299,7 @@ function onBtnHover(e: Event, text: string, place: TooltipPlacement = 'top') {
299299
return
300300
const ev = e as MouseEvent
301301
const origin = ev?.clientX != null && ev?.clientY != null ? { x: ev.clientX, y: ev.clientY } : undefined
302-
showTooltipForAnchor(e.currentTarget as HTMLElement, text, place, false, origin)
302+
showTooltipForAnchor(e.currentTarget as HTMLElement, text, place, false, origin, props.isDark)
303303
}
304304
305305
function onBtnLeave() {
@@ -312,7 +312,7 @@ function onCopyHover(e: Event) {
312312
const txt = copyText.value ? (t('common.copied') || 'Copied') : (t('common.copy') || 'Copy')
313313
const ev = e as MouseEvent
314314
const origin = ev?.clientX != null && ev?.clientY != null ? { x: ev.clientX, y: ev.clientY } : undefined
315-
showTooltipForAnchor(e.currentTarget as HTMLElement, txt, 'top', false, origin)
315+
showTooltipForAnchor(e.currentTarget as HTMLElement, txt, 'top', false, origin, props.isDark)
316316
}
317317
318318
// Expand/collapse functionality
@@ -384,7 +384,8 @@ function previewCode() {
384384
<div
385385
v-else
386386
:style="containerStyle"
387-
class="code-block-container my-4 rounded-lg border border-gray-200 dark:border-gray-700/30 overflow-hidden shadow-sm bg-white dark:bg-gray-900"
387+
class="code-block-container my-4 rounded-lg border overflow-hidden shadow-sm"
388+
:class="[props.isDark ? 'border-gray-700/30 bg-gray-900' : 'border-gray-200 bg-white', props.isDark ? 'is-dark' : '']"
388389
>
389390
<div
390391
v-if="props.showHeader"
@@ -572,7 +573,7 @@ function previewCode() {
572573
border-radius: 0.25rem;
573574
}
574575
575-
.dark .skeleton-line {
576+
.code-block-container.is-dark .skeleton-line {
576577
background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.12) 37%, rgba(255,255,255,0.06) 63%);
577578
background-size: 400% 100%;
578579
}

‎src/components/MermaidBlockNode/MermaidBlockNode.vue‎

Lines changed: 38 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -220,7 +220,7 @@ function onBtnHover(e: Event, text: string, place: TooltipPlacement = 'top') {
220220
return
221221
const ev = e as MouseEvent
222222
const origin = ev?.clientX != null && ev?.clientY != null ? { x: ev.clientX, y: ev.clientY } : undefined
223-
showTooltipForAnchor(e.currentTarget as HTMLElement, text, place, false, origin)
223+
showTooltipForAnchor(e.currentTarget as HTMLElement, text, place, false, origin, props.isDark)
224224
}
225225
function onBtnLeave() {
226226
hideTooltip()
@@ -231,7 +231,7 @@ function onCopyHover(e: Event) {
231231
const txt = copyText.value ? ('Copied') : ('Copy')
232232
const ev = e as MouseEvent
233233
const origin = ev?.clientX != null && ev?.clientY != null ? { x: ev.clientX, y: ev.clientY } : undefined
234-
showTooltipForAnchor(e.currentTarget as HTMLElement, txt, 'top', false, origin)
234+
showTooltipForAnchor(e.currentTarget as HTMLElement, txt, 'top', false, origin, props.isDark)
235235
}
236236
237237
// Worker-backed off-thread parsing is now provided by the centralized mermaidWorkerClient.
@@ -1273,30 +1273,41 @@ watch(
12731273
},
12741274
{ immediate: false },
12751275
)
1276+
1277+
const computedButtonStyle = computed(() => {
1278+
return props.isDark
1279+
? 'mermaid-action-btn p-2 text-xs rounded text-gray-400 hover:bg-gray-700 hover:text-gray-200'
1280+
: 'mermaid-action-btn p-2 text-xs rounded text-gray-600 hover:bg-gray-200 hover:text-gray-700'
1281+
})
12761282
</script>
12771283

12781284
<template>
12791285
<div
1280-
class="my-4 rounded-lg border border-gray-200 dark:border-gray-700/30 overflow-hidden shadow-sm bg-white dark:bg-gray-900" :class="[
1286+
class="my-4 rounded-lg border overflow-hidden shadow-sm"
1287+
:class="[
1288+
props.isDark ? 'border-gray-700/30' : 'border-gray-200',
12811289
{ 'is-rendering': props.loading },
12821290
]"
12831291
>
12841292
<!-- 重新设计的头部区域 -->
1285-
<div class="mermaid-block-header flex justify-between items-center px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700/30">
1293+
<div
1294+
class="mermaid-block-header flex justify-between items-center px-4 py-2.5 border-b"
1295+
:class="props.isDark ? 'bg-gray-800 border-gray-700/30' : 'bg-gray-50 border-gray-200'"
1296+
>
12861297
<!-- 左侧语言标签 -->
12871298
<div class="flex items-center space-x-2">
12881299
<img :src="mermaidIconUrl" class="w-4 h-4 my-0" alt="Mermaid">
1289-
<span class="text-sm font-medium text-gray-600 dark:text-gray-400 font-mono">Mermaid</span>
1300+
<span class="text-sm font-medium font-mono" :class="props.isDark ? 'text-gray-400' : 'text-gray-600'">Mermaid</span>
12901301
</div>
12911302

12921303
<!-- 中间切换按钮 -->
1293-
<div class="flex items-center space-x-1 bg-gray-100 dark:bg-gray-700 rounded-md p-0.5">
1304+
<div class="flex items-center space-x-1 rounded-md p-0.5" :class="props.isDark ? 'bg-gray-700' : 'bg-gray-100'">
12941305
<button
12951306
class="px-2.5 py-1 text-xs rounded transition-colors"
12961307
:class="[
12971308
!showSource
1298-
? 'bg-white dark:bg-gray-600 text-gray-700 dark:text-gray-200 shadow-sm'
1299-
: 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200',
1309+
? (props.isDark ? 'bg-gray-600 text-gray-200 shadow-sm' : 'bg-white text-gray-700 shadow-sm')
1310+
: (props.isDark ? 'text-gray-400 hover:text-gray-200' : 'text-gray-500 hover:text-gray-700'),
13001311
]"
13011312
@click="switchMode('preview')"
13021313
@mouseenter="onBtnHover($event, 'Preview')"
@@ -1313,8 +1324,8 @@ watch(
13131324
class="px-2.5 py-1 text-xs rounded transition-colors"
13141325
:class="[
13151326
showSource
1316-
? 'bg-white dark:bg-gray-600 text-gray-700 dark:text-gray-200 shadow-sm'
1317-
: 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200',
1327+
? (props.isDark ? 'bg-gray-600 text-gray-200 shadow-sm' : 'bg-white text-gray-700 shadow-sm')
1328+
: (props.isDark ? 'text-gray-400 hover:text-gray-200' : 'text-gray-500 hover:text-gray-700'),
13181329
]"
13191330
@click="switchMode('source')"
13201331
@mouseenter="onBtnHover($event, 'Source')"
@@ -1332,7 +1343,7 @@ watch(
13321343
<!-- 右侧操作按钮 -->
13331344
<div class="flex items-center space-x-1">
13341345
<button
1335-
class="mermaid-action-btn p-2 text-xs rounded text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
1346+
:class="computedButtonStyle"
13361347
:aria-pressed="isCollapsed"
13371348
@click="isCollapsed = !isCollapsed"
13381349
@mouseenter="onBtnHover($event, isCollapsed ? 'Expand' : 'Collapse')"
@@ -1343,7 +1354,7 @@ watch(
13431354
<svg :style="{ rotate: isCollapsed ? '0deg' : '90deg' }" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6" /></svg>
13441355
</button>
13451356
<button
1346-
class="mermaid-action-btn p-2 text-xs rounded text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
1357+
:class="computedButtonStyle"
13471358
@click="copy"
13481359
@mouseenter="onCopyHover($event)"
13491360
@focus="onCopyHover($event)"
@@ -1354,9 +1365,8 @@ watch(
13541365
<svg v-else xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5" /></svg>
13551366
</button>
13561367
<button
1357-
class="mermaid-action-btn p-2 text-xs rounded text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
1368+
:class="`${computedButtonStyle} ${isFullscreenDisabled ? 'opacity-50 cursor-not-allowed' : ''}`"
13581369
:disabled="isFullscreenDisabled"
1359-
:class="isFullscreenDisabled ? 'opacity-50 cursor-not-allowed' : ''"
13601370
@click="exportSvg"
13611371
@mouseenter="onBtnHover($event, 'Export')"
13621372
@focus="onBtnHover($event, 'Export')"
@@ -1366,9 +1376,8 @@ watch(
13661376
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M12 15V3m9 12v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><path d="m7 10l5 5l5-5" /></g></svg>
13671377
</button>
13681378
<button
1369-
class="mermaid-action-btn p-2 text-xs rounded text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
1379+
:class="`${computedButtonStyle} ${isFullscreenDisabled ? 'opacity-50 cursor-not-allowed' : ''}`"
13701380
:disabled="isFullscreenDisabled"
1371-
:class="isFullscreenDisabled ? 'opacity-50 cursor-not-allowed' : ''"
13721381
@click="openModal"
13731382
@mouseenter="onBtnHover($event, isModalOpen ? 'Minimize' : 'Open')"
13741383
@focus="onBtnHover($event, isModalOpen ? 'Minimize' : 'Open')"
@@ -1383,15 +1392,15 @@ watch(
13831392

13841393
<!-- 内容区域（带高度过渡的容器） -->
13851394
<div v-show="!isCollapsed" ref="modeContainerRef">
1386-
<div v-if="showSource" class="p-4 bg-gray-50 dark:bg-gray-900">
1387-
<pre class="text-sm font-mono whitespace-pre-wrap text-gray-700 dark:text-gray-300">{{ baseFixedCode }}</pre>
1395+
<div v-if="showSource" class="p-4" :class="props.isDark ? 'bg-gray-900' : 'bg-gray-50'">
1396+
<pre class="text-sm font-mono whitespace-pre-wrap" :class="props.isDark ? 'text-gray-300' : 'text-gray-700'">{{ baseFixedCode }}</pre>
13881397
</div>
13891398
<div v-else class="relative">
13901399
<!-- ...existing preview content... -->
13911400
<div class="absolute top-2 right-2 z-10 rounded-lg">
13921401
<div class="flex items-center gap-2 backdrop-blur rounded-lg">
13931402
<button
1394-
class="p-2 text-xs rounded text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
1403+
class="p-2 text-xs rounded transition-colors" :class="[props.isDark ? 'text-gray-400 hover:bg-gray-700' : 'text-gray-600 hover:bg-gray-200']"
13951404
@click="zoomIn"
13961405
@mouseenter="onBtnHover($event, 'Zoom in')"
13971406
@focus="onBtnHover($event, 'Zoom in')"
@@ -1401,7 +1410,7 @@ watch(
14011410
<svg data-v-3d59cc65="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="11" cy="11" r="8" /><path d="m21 21l-4.35-4.35M11 8v6m-3-3h6" /></g></svg>
14021411
</button>
14031412
<button
1404-
class="p-2 text-xs rounded text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
1413+
class="p-2 text-xs rounded transition-colors" :class="[props.isDark ? 'text-gray-400 hover:bg-gray-700' : 'text-gray-600 hover:bg-gray-200']"
14051414
@click="zoomOut"
14061415
@mouseenter="onBtnHover($event, 'Zoom out')"
14071416
@focus="onBtnHover($event, 'Zoom out')"
@@ -1411,7 +1420,7 @@ watch(
14111420
<svg data-v-3d59cc65="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="11" cy="11" r="8" /><path d="m21 21l-4.35-4.35M8 11h6" /></g></svg>
14121421
</button>
14131422
<button
1414-
class="p-2 text-xs rounded text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
1423+
class="p-2 text-xs rounded transition-colors" :class="[props.isDark ? 'text-gray-400 hover:bg-gray-700' : 'text-gray-600 hover:bg-gray-200']"
14151424
@click="resetZoom"
14161425
@mouseenter="onBtnHover($event, 'Reset zoom')"
14171426
@focus="onBtnHover($event, 'Reset zoom')"
@@ -1424,7 +1433,8 @@ watch(
14241433
</div>
14251434
<div
14261435
ref="mermaidContainer"
1427-
class="min-h-[360px] bg-gray-50 dark:bg-gray-900 relative transition-all duration-100 overflow-hidden block"
1436+
class="min-h-[360px] relative transition-all duration-100 overflow-hidden block"
1437+
:class="props.isDark ? 'bg-gray-900' : 'bg-gray-50'"
14281438
:style="{ height: containerHeight }"
14291439
@wheel="handleWheel"
14301440
@mousedown="startDrag"
@@ -1457,29 +1467,30 @@ watch(
14571467
@click.self="closeModal"
14581468
>
14591469
<div
1460-
class="dialog-panel relative w-full h-full max-w-full max-h-full bg-white dark:bg-gray-900 rounded shadow-lg overflow-hidden"
1470+
class="dialog-panel relative w-full h-full max-w-full max-h-full rounded shadow-lg overflow-hidden"
1471+
:class="props.isDark ? 'bg-gray-900' : 'bg-white'"
14611472
>
14621473
<div class="absolute top-6 right-6 z-50 flex items-center gap-2">
14631474
<button
1464-
class="p-2 text-xs rounded text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
1475+
class="p-2 text-xs rounded transition-colors" :class="[props.isDark ? 'text-gray-400 hover:bg-gray-700' : 'text-gray-600 hover:bg-gray-200']"
14651476
@click="zoomIn"
14661477
>
14671478
<svg data-v-3d59cc65="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3"><g data-v-3d59cc65="" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle data-v-3d59cc65="" cx="11" cy="11" r="8" /><path data-v-3d59cc65="" d="m21 21l-4.35-4.35M11 8v6m-3-3h6" /></g></svg>
14681479
</button>
14691480
<button
1470-
class="p-2 text-xs rounded text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
1481+
class="p-2 text-xs rounded transition-colors" :class="[props.isDark ? 'text-gray-400 hover:bg-gray-700' : 'text-gray-600 hover:bg-gray-200']"
14711482
@click="zoomOut"
14721483
>
14731484
<svg data-v-3d59cc65="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="11" cy="11" r="8" /><path d="m21 21l-4.35-4.35M8 11h6" /></g></svg>
14741485
</button>
14751486
<button
1476-
class="p-2 text-xs rounded text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
1487+
class="p-2 text-xs rounded transition-colors" :class="[props.isDark ? 'text-gray-400 hover:bg-gray-700' : 'text-gray-600 hover:bg-gray-200']"
14771488
@click="resetZoom"
14781489
>
14791490
{{ Math.round(zoom * 100) }}%
14801491
</button>
14811492
<button
1482-
class="inline-flex items-center justify-center p-2 rounded text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
1493+
class="inline-flex items-center justify-center p-2 rounded transition-colors" :class="[props.isDark ? 'text-gray-400 hover:bg-gray-700' : 'text-gray-600 hover:bg-gray-200']"
14831494
@click="closeModal"
14841495
>
14851496
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 6L6 18M6 6l12 12" /></svg>

0 commit comments

Comments
 (0)