eduvia/lms
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: dark mode

Browse Source
This commit is contained in:
Jannat Patel
2025-02-10 10:51:21 +05:30
parent 16b9356944
commit dbf443300b
143 changed files with 886 additions and 675 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/components/Controls/Autocomplete.vue
View File

@@ -17,7 +17,7 @@
>
{{ displayValue(selectedValue) }}
</span>
<span class="text-base leading-5 text-gray-500" v-else>
<span class="text-base leading-5 text-ink-gray-4" v-else>
{{ placeholder || '' }}
</span>
</div>
@@ -28,7 +28,9 @@
</template>
<template #body="{ isOpen }">
<div v-show="isOpen">
<div class="mt-1 rounded-lg bg-white py-1 text-base shadow-2xl">
<div
class="mt-1 rounded-lg bg-surface-white py-1 text-base shadow-2xl"
>
<div class="relative px-1.5 pt-0.5">
<ComboboxInput
ref="search"
@@ -62,7 +64,7 @@
>
<div
v-if="group.group && !group.hideLabel"
class="px-2.5 py-1.5 text-sm font-medium text-gray-500"
class="px-2.5 py-1.5 text-sm font-medium text-ink-gray-4"
>
{{ group.group }}
</div>
@@ -76,7 +78,7 @@
<li
:class="[
'flex items-center rounded px-2.5 py-2 text-base',
{ 'bg-gray-100': active },
{ 'bg-surface-gray-2': active },
]"
>
<slot
@@ -93,7 +95,7 @@
</div>
<div
v-if="option.description"
class="text-xs text-gray-700"
class="text-xs text-ink-gray-7"
v-html="option.description"
></div>
</div>
@@ -103,7 +105,7 @@
</div>
<li
v-if="groups.length == 0"
class="mt-1.5 rounded-md px-2.5 py-1.5 text-base text-gray-600"
class="mt-1.5 rounded-md px-2.5 py-1.5 text-base text-ink-gray-5"
>
No results found
</li>
@@ -243,7 +245,7 @@ watch(showOptions, (val) => {
})
const textColor = computed(() => {
return props.disabled ? 'text-gray-600' : 'text-gray-800'
return props.disabled ? 'text-ink-gray-5' : 'text-ink-gray-8'
})
const inputClasses = computed(() => {
@@ -264,12 +266,14 @@ const inputClasses = computed(() => {
let variant = props.disabled ? 'disabled' : props.variant
let variantClasses = {
subtle:
'border border-gray-100 bg-gray-100 placeholder-gray-500 hover:border-gray-200 hover:bg-gray-200 focus:bg-white focus:border-gray-500 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400',
'border border-gray-100 bg-surface-gray-2 placeholder-ink-gray-4 hover:border-outline-gray-modals hover:bg-surface-gray-3 focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3',
outline:
'border border-gray-300 bg-white placeholder-gray-500 hover:border-gray-400 hover:shadow-sm focus:bg-white focus:border-gray-500 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400',
'border border-outline-gray-2 bg-surface-white placeholder-ink-gray-4 hover:border-outline-gray-3 hover:shadow-sm focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3',
disabled: [
'border bg-gray-50 placeholder-gray-400',
props.variant === 'outline' ? 'border-gray-300' : 'border-transparent',
'border bg-surface-menu-bar placeholder-ink-gray-3',
props.variant === 'outline'
? 'border-outline-gray-2'
: 'border-transparent',
],
}[variant]