add dark mode in base heading

This commit is contained in:
yashkanakiya
2023-03-24 18:00:47 +05:30
parent 1307c2dfe1
commit 9275010c0e
11 changed files with 88 additions and 50 deletions

View File

@ -2,6 +2,21 @@
<h6 :class="typeClass">
<slot />
</h6>
<p
v-if="subtitle"
class="
mt-2
text-sm
leading-snug
text-gray-500
dark:text-gray-400
max-w-[680px]
"
>
{{ subtitle }}
</p>
</template>
<script setup>
@ -14,12 +29,16 @@ const props = defineProps({
return ['section-title', 'heading-title'].indexOf(value) !== -1
},
},
subtitle: {
type: String,
default: '',
},
})
const typeClass = computed(() => {
return {
'text-gray-900 text-lg font-medium': props.type === 'heading-title',
'text-gray-500 uppercase text-base': props.type === 'section-title',
'text-gray-900 text-lg font-medium dark:text-white': props.type === 'heading-title',
'text-gray-500 uppercase text-base dark:text-gray-300': props.type === 'section-title',
}
})
</script>