Skip to content

Commit e0a591e

Browse files
chore(sfc-playground): adjust the tooltip text for toggling the theme (#12116)
* chore(sfc-playground): adjust the tooltip text for toggling the theme * [autofix.ci] apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
1 parent 704173e commit e0a591e

File tree

2 files changed

+7
-1
lines changed

2 files changed

+7
-1
lines changed

packages-private/sfc-playground/src/App.vue

+1
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,7 @@ onMounted(() => {
123123
:prod="productionMode"
124124
:ssr="useSSRMode"
125125
:autoSave="autoSave"
126+
:theme="theme"
126127
@toggle-theme="toggleTheme"
127128
@toggle-prod="toggleProdMode"
128129
@toggle-ssr="toggleSSR"

packages-private/sfc-playground/src/Header.vue

+6-1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ const props = defineProps<{
1515
prod: boolean
1616
ssr: boolean
1717
autoSave: boolean
18+
theme: 'dark' | 'light'
1819
}>()
1920
const emit = defineEmits([
2021
'toggle-theme',
@@ -117,7 +118,11 @@ function toggleDark() {
117118
>
118119
<span>{{ autoSave ? 'AutoSave ON' : 'AutoSave OFF' }}</span>
119120
</button>
120-
<button title="Toggle dark mode" class="toggle-dark" @click="toggleDark">
121+
<button
122+
:title="`Switch to ${theme === 'dark' ? 'light' : 'dark'} theme`"
123+
class="toggle-dark"
124+
@click="toggleDark"
125+
>
121126
<Sun class="light" />
122127
<Moon class="dark" />
123128
</button>

0 commit comments

Comments
 (0)