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]

39
frontend/src/components/Controls/CodeEditor.vue
View File

@@ -5,7 +5,7 @@
height: height,
}"
>
<span class="text-xs" v-if="label">
<span class="text-xs text-ink-gray-7" v-if="label">
{{ label }}
</span>
<div
@@ -13,7 +13,7 @@
class="h-auto flex-1 overflow-hidden overscroll-none !rounded border border-outline-gray-2 bg-surface-gray-2 dark:bg-gray-900"
/>
<span
class="mt-1 text-xs text-gray-600"
class="mt-1 text-xs text-ink-gray-5"
v-show="description"
v-html="description"
></span>
@@ -27,7 +27,6 @@
</div>
</template>
<script setup lang="ts">
import { useDark } from '@vueuse/core'
import ace from 'ace-builds'
import 'ace-builds/src-min-noconflict/ext-searchbox'
import 'ace-builds/src-min-noconflict/theme-chrome'
@@ -35,9 +34,7 @@ import 'ace-builds/src-min-noconflict/theme-twilight'
import { PropType, onMounted, ref, watch } from 'vue'
import { Button } from 'frappe-ui'
const isDark = useDark({
attribute: 'data-theme',
})
const isDark = ref(false)
const props = defineProps({
modelValue: {
@@ -82,6 +79,7 @@ const editor = ref<HTMLElement | null>(null)
let aceEditor = null as ace.Ace.Editor | null
onMounted(() => {
isDark.value = localStorage.getItem('theme') === 'dark'
setupEditor()
})
@@ -148,6 +146,7 @@ function resetEditor(value: string, resetHistory = false) {
value = getModelValue()
aceEditor?.setValue(value)
aceEditor?.clearSelection()
console.log(isDark.value)
aceEditor?.setTheme(isDark.value ? 'ace/theme/twilight' : 'ace/theme/chrome')
props.autofocus && aceEditor?.focus()
if (resetHistory) {
@@ -156,6 +155,7 @@ function resetEditor(value: string, resetHistory = false) {
}
watch(isDark, () => {
console.log(isDark.value)
aceEditor?.setTheme(isDark.value ? 'ace/theme/twilight' : 'ace/theme/chrome')
})
@@ -175,30 +175,3 @@ watch(
defineExpose({ resetEditor })
</script>
<style scoped>
.editor .ace_editor {
height: 100%;
width: 100%;
border-radius: 5px;
overscroll-behavior: none;
}
.editor :deep(.ace_scrollbar-h) {
display: none;
}
.editor :deep(.ace_search) {
@apply dark:bg-gray-800 dark:text-gray-200;
@apply dark:border-gray-800;
}
.editor :deep(.ace_searchbtn) {
@apply dark:bg-gray-800 dark:text-gray-200;
@apply dark:border-gray-800;
}
.editor :deep(.ace_button) {
@apply dark:bg-gray-800 dark:text-gray-200;
}
.editor :deep(.ace_search_field) {
@apply dark:bg-gray-900 dark:text-gray-200;
@apply dark:border-gray-800;
}
</style>

12
frontend/src/components/Controls/IconPicker.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="space-y-1.5">
<label class="block text-xs text-gray-600">
<label class="block text-xs text-ink-gray-5">
{{ label }}
</label>
<div class="w-full">
@@ -8,22 +8,22 @@
<template #target="{ togglePopover }">
<button
@click="openPopover(togglePopover)"
class="flex w-full items-center space-x-2 focus:outline-none bg-gray-100 rounded h-7 py-1.5 px-2 hover:bg-gray-200 focus:bg-white border border-gray-100 hover:border-gray-200 focus:border-gray-500"
class="flex w-full items-center space-x-2 focus:outline-none bg-surface-gray-2 rounded h-7 py-1.5 px-2 hover:bg-surface-gray-3 focus:bg-surface-white border border-gray-100 hover:border-outline-gray-modals focus:border-outline-gray-4"
>
<component
v-if="selectedIcon"
class="w-4 h-4 text-gray-700 stroke-1.5"
class="w-4 h-4 text-ink-gray-7 stroke-1.5"
:is="icons[selectedIcon]"
/>
<component
v-else
class="w-4 h-4 text-gray-700 stroke-1.5"
class="w-4 h-4 text-ink-gray-7 stroke-1.5"
:is="icons.Folder"
/>
<span v-if="selectedIcon">
{{ selectedIcon }}
</span>
<span v-else class="text-gray-600">
<span v-else class="text-ink-gray-5">
{{ __('Choose an icon') }}
</span>
</button>
@@ -40,7 +40,7 @@
<div v-for="(iconComponent, iconName) in filteredIcons">
<component
:is="iconComponent"
class="h-4 w-4 stroke-1.5 text-gray-700 cursor-pointer"
class="h-4 w-4 stroke-1.5 text-ink-gray-7 cursor-pointer"
@click="setIcon(iconName, close)"
/>
</div>

6
frontend/src/components/Controls/Link.vue
View File

@@ -2,7 +2,7 @@
<div class="space-y-1.5">
<label class="block" :class="labelClasses" v-if="attrs.label">
{{ attrs.label }}
<span class="text-red-500" v-if="attrs.required">*</span>
<span class="text-ink-red-3" v-if="attrs.required">*</span>
</label>
<Autocomplete
ref="autocomplete"
@@ -56,7 +56,7 @@
</div>
</template>
</Autocomplete>
<p v-if="description" class="text-sm text-gray-600">{{ description }}</p>
<p v-if="description" class="text-sm text-ink-gray-5">{{ description }}</p>
</div>
</template>
@@ -163,7 +163,7 @@ const labelClasses = computed(() => {
sm: 'text-xs',
md: 'text-base',
}[attrs.size || 'sm'],
'text-gray-600',
'text-ink-gray-5',
]
})
</script>

12
frontend/src/components/Controls/MultiSelect.vue
View File

@@ -2,7 +2,7 @@
<div>
<label class="block mb-1" :class="labelClasses" v-if="label">
{{ label }}
<span class="text-red-500" v-if="required">*</span>
<span class="text-ink-red-3" v-if="required">*</span>
</label>
<div class="grid grid-cols-3 gap-1">
<Button
@@ -41,7 +41,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"
>
<ComboboxOptions
class="my-1 max-h-[12rem] overflow-y-auto px-1.5"
static
@@ -55,14 +57,14 @@
<li
:class="[
'flex cursor-pointer items-center rounded px-2 py-1 text-base',
{ 'bg-gray-100': active },
{ 'bg-surface-gray-2': active },
]"
>
<div class="flex flex-col gap-1 p-1">
<div class="text-base font-medium">
{{ option.description }}
</div>
<div class="text-sm text-gray-600">
<div class="text-sm text-ink-gray-5">
{{ option.value }}
</div>
</div>
@@ -240,7 +242,7 @@ const labelClasses = computed(() => {
sm: 'text-xs',
md: 'text-base',
}[props.size || 'sm'],
'text-gray-600',
'text-ink-gray-5',
]
})
</script>

2
frontend/src/components/Controls/Rating.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="space-y-1">
<label class="block text-xs text-gray-600" v-if="props.label">
<label class="block text-xs text-ink-gray-5" v-if="props.label">
{{ props.label }}
</label>
<div class="flex text-center">