clone/nocodb
1
0
Fork 0
mirror of https://github.com/nocodb/nocodb.git synced 2026-04-25 02:15:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: darkmode corrections

Browse Source
This commit is contained in:
DarkPhoenix2704
2025-10-23 07:16:10 +00:00
parent 2c972d8943
commit 1f1deb1c9b
13 changed files with 53 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/nc-gui/components/dashboard/MiniSidebar.vue
View File

@@ -342,7 +342,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
}
&.active {
@apply !bg-brand-100 !text-nc-content-brand;
@apply !bg-nc-brand-100 !text-nc-content-brand;
}
&.active-base {

2
packages/nc-gui/components/erd/ConfigPanel.vue
View File

@@ -15,7 +15,7 @@ const showAdvancedOptions = ref(false)
<template>
<Panel
class="flex flex-col gap-y-1 bg-white border-1 rounded-lg border-gray-200 z-50 px-3 py-2 nc-erd-context-menu shadow-md"
class="flex flex-col gap-y-1 bg-nc-bg-default border-1 rounded-lg border-nc-border-gray-medium z-50 px-3 py-2 nc-erd-context-menu shadow-md"
:position="PanelPosition.TopRight"
>
<div class="flex items-center gap-2">

10
packages/nc-gui/components/erd/Flow.vue
View File

@@ -83,7 +83,7 @@ onScopeDispose($destroy)
<template>
<VueFlow v-model="elements" class="nc-erd-flow">
<Controls
class="bg-transparent rounded-lg shadow-md border-1 border-gray-200"
class="bg-transparent rounded-lg shadow-md border-1 border-nc-border-gray-medium"
:position="PanelPosition.BottomLeft"
:show-fit-view="false"
:show-interactive="false"
@@ -94,7 +94,7 @@ onScopeDispose($destroy)
</div>
</template>
<template #control-zoom-out>
<div class="nc-erd-zoom-btn border-t-1 border-gray-200 rounded-b-lg" @click="internalZoomOut">
<div class="nc-erd-zoom-btn border-t-1 border-nc-border-gray-medium rounded-b-lg" @click="internalZoomOut">
<GeneralIcon icon="minus" />
</div>
</template>
@@ -131,7 +131,7 @@ onScopeDispose($destroy)
}
.nc-erd-zoom-btn {
@apply bg-white px-1.5 py-1 hover:(bg-gray-100 text-gray-800) cursor-pointer text-gray-600;
@apply bg-nc-bg-default px-1.5 py-1 hover:(bg-nc-bg-gray-light text-nc-content-gray) cursor-pointer text-nc-content-gray-subtle2;
}
.nc-erd-flow {
@@ -139,6 +139,10 @@ onScopeDispose($destroy)
height: 100%;
}
.vue-flow__node-custom {
@apply border-nc-border-gray-medium;
}
.nc-erd-flow .vue-flow__viewport {
/* Ensure the viewport uses the full space for proper centering */
width: 100%;

4
packages/nc-gui/components/erd/FullScreenToggle.vue
View File

@@ -25,8 +25,8 @@ const toggleFullScreen = () => {
<Panel
class="text-xs rounded-md p-2 z-50 nc-erd-histogram cursor-pointer shadow-md transition-colors"
:class="{
'text-white bg-brand-500 md:(hover:bg-brand-600)': config.isFullScreen,
'border-1 border-gray-200 bg-white hover:bg-gray-100': !config.isFullScreen,
'text-nc-content-gray-extreme bg-nc-brand-500 md:(hover:bg-nc-brand-600)': config.isFullScreen,
'border-1 border-nc-border-gray-medium bg-nc-bg-default hover:bg-nc-bg-gray-light': !config.isFullScreen,
}"
:position="PanelPosition.BottomRight"
>

2
packages/nc-gui/components/erd/HistogramPanel.vue
View File

@@ -4,7 +4,7 @@ import { Panel, PanelPosition } from '@vue-flow/additional-components'
<template>
<Panel
class="text-xs bg-white border-1 rounded border-gray-200 shadow-md p-1.5 z-50 nc-erd-histogram"
class="text-xs bg-nc-bg-default border-1 rounded border-nc-border-gray-medium shadow-md p-1.5 z-50 nc-erd-histogram"
:position="PanelPosition.TopLeft"
>
<div class="flex flex-col">

8
packages/nc-gui/components/erd/TableNode.vue
View File

@@ -53,7 +53,7 @@ watch(
</template>
<div
class="relative h-full max-w-76 flex flex-col justify-center bg-white min-w-16 min-h-8 rounded-lg nc-erd-table-node"
class="relative h-full max-w-76 flex flex-col justify-center bg-nc-bg-default min-w-16 min-h-8 rounded-lg nc-erd-table-node"
:class="[
`nc-erd-table-node-${table.table_name}`,
showSkeleton ? 'cursor-pointer items-center min-h-200px min-w-300px' : '',
@@ -61,8 +61,8 @@ watch(
@click="$e('c:erd:node-click')"
>
<div
:class="[showSkeleton ? '' : '', hasColumns ? '' : '']"
class="text-gray-800 text-sm py-4 border-b-1 border-gray-200 rounded-t-lg w-full h-full px-3 font-medium flex items-center"
:class="[showSkeleton ? '' : '', hasColumns ? 'border-b-1 ' : '']"
class="text-nc-content-gray text-sm py-4 border-nc-border-gray-medium rounded-t-lg w-full h-full px-3 font-medium flex items-center"
>
<GeneralTableIcon class="text-primary" :class="{ '!text-6xl !w-auto mr-2 !h-18': showSkeleton }" :meta="table" />
<div :class="showSkeleton ? 'text-6xl' : ''" class="flex pr-2 pl-1">
@@ -136,6 +136,6 @@ watch(
<style lang="scss" scoped>
.nc-erd-table-node-column {
@apply py-0.5 px-2 text-gray-700;
@apply py-0.5 px-2 text-nc-content-gray-subtle;
}
</style>

2
packages/nc-gui/components/erd/View.vue
View File

@@ -154,7 +154,7 @@ onMounted(async () => {
<template>
<div
class="w-full bg-white border-1 border-gray-100 rounded-lg"
class="w-full bg-nc-bg-default border-1 border-nc-border-gray-light rounded-lg"
:class="{
'z-100 nc-h-screen nc-w-screen fixed top-0 left-0 right-0 bottom-0': config.isFullScreen,
'nc-erd-vue-flow-single-table': config.singleTableMode,

26
packages/nc-gui/components/feed/Changelog/Item.vue
View File

@@ -86,9 +86,9 @@ const handleOpenUrl = (url: string) => {
</script>
<template>
<div class="relative rounded-xl flex flex-col mt-6.25 bg-white changelog-card">
<div class="relative rounded-xl flex flex-col mt-6.25 bg-nc-bg-default changelog-card">
<div
class="w-full relative border cursor-pointer border-black h-[334px] xl:h-[394px] w-[540px] xl:w-[638px] border-opacity-10 rounded-t-xl overflow-hidden"
class="w-full relative border cursor-pointer border-base-black h-[334px] xl:h-[394px] w-[540px] xl:w-[638px] border-opacity-10 rounded-t-xl overflow-hidden"
@click="handleOpenUrl(item.Url)"
>
<img
@@ -106,26 +106,26 @@ const handleOpenUrl = (url: string) => {
v-for="tag in tags"
:key="tag.text"
:class="{
'bg-red-50': tag.color === 'red',
'bg-purple-50': tag.color === 'purple',
'bg-green-50': tag.color === 'green',
'bg-nc-red-50': tag.color === 'red',
'bg-nc-purple-50': tag.color === 'purple',
'bg-nc-green-50': tag.color === 'green',
}"
class="flex gap-2 items-center px-1 rounded-md"
>
<component
:is="tag.icon"
:class="{
'fill-red-700 text-transparent': tag.color === 'red',
'fill-purple-700 text-transparent': tag.color === 'purple',
'fill-green-700 text-transparent': tag.color === 'green',
'fill-nc-red-700 text-transparent': tag.color === 'red',
'fill-nc-purple-700 text-transparent': tag.color === 'purple',
'fill-nc-green-700 text-transparent': tag.color === 'green',
}"
class="w-4 h-4"
/>
<span
:class="{
'text-red-500': tag.color === 'red',
'text-purple-500': tag.color === 'purple',
'text-green-700': tag.color === 'green',
'text-nc-content-red-medium': tag.color === 'red',
'text-nc-content-purple-medium': tag.color === 'purple',
'text-nc-content-green-dark': tag.color === 'green',
}"
class="leading-5 text-[13px] whitespace-nowrap"
>
@@ -133,7 +133,7 @@ const handleOpenUrl = (url: string) => {
</span>
</span>
</div>
<span class="font-medium text-sm text-gray-500 whitespace-nowrap">
<span class="font-medium text-sm text-nc-content-gray-muted whitespace-nowrap">
{{ dayjs(CreatedAt).format('MMM DD, YYYY') }}
</span>
</div>
@@ -166,7 +166,7 @@ a {
:deep(.prose) {
@apply !max-w-auto;
a {
@apply text-gray-900;
@apply text-nc-content-gray-extreme;
}
h1 {

4
packages/nc-gui/components/feed/Header.vue
View File

@@ -1,9 +1,9 @@
<template>
<div class="w-full p-2 h-12 border-b-1 border-gray-200">
<div class="w-full p-2 h-12 border-b-1 border-nc-border-gray-medium">
<div class="h-full flex items-center gap-2 px-2">
<GeneralIcon icon="megaPhone" class="text-nc-content-brand h-4 w-4" />
<span class="font-bold text-sm text-gray-800"> What’s New! </span>
<span class="font-bold text-sm text-nc-content-gray"> What’s New! </span>
</div>
</div>
</template>

4
packages/nc-gui/components/feed/Recents/Card.vue
View File

@@ -69,7 +69,7 @@ const handleOpenUrl = (url: string) => {
</script>
<template>
<div class="bg-white recent-card border-gray-200 border-1 rounded-2xl max-w-[540px] xl:max-w-[640px]">
<div class="bg-nc-bg-default recent-card border-nc-border-gray-medium border-1 rounded-2xl max-w-[540px] xl:max-w-[640px]">
<div class="flex items-center justify-between px-5 py-4">
<div class="flex items-center gap-3">
<component :is="feedIcon[source]" class="w-4 h-4 stroke-transparent" />
@@ -121,7 +121,7 @@ const handleOpenUrl = (url: string) => {
box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.08), 0px 2px 4px -2px rgba(0, 0, 0, 0.04);
:deep(.prose) {
a {
@apply text-gray-900;
@apply text-nc-content-gray-emphasis;
}
h1 {
@apply text-3xl text-nc-content-gray-emphasis truncate leading-9 mb-0;

18
packages/nc-gui/components/feed/Social.vue
View File

@@ -1,6 +1,8 @@
<script setup lang="ts">
const { $e } = useNuxtApp()
const { isDark } = useTheme()
const socialIcons = [
{
name: '@nocodb',
@@ -43,16 +45,22 @@ const openUrl = (url: string, e: string) => {
</script>
<template>
<div style="width: 230px" class="flex flex-col bg-white border-gray-200 rounded-lg border-1">
<div class="text-gray-800 font-semibold leading-6 border-b-1 border-gray-200 px-4 py-3">Stay tuned</div>
<div style="width: 230px" class="flex flex-col bg-nc-bg-default border-nc-border-gray-medium rounded-lg border-1">
<div class="text-nc-content-gray font-semibold leading-6 border-b-1 border-nc-border-gray-medium px-4 py-3">Stay tuned</div>
<div class="flex flex-col p-1">
<div
v-for="social in socialIcons"
:key="social.name"
class="flex items-center social-icon-wrapper cursor-pointer rounded-lg hover:bg-gray-100 py-3 px-4 gap-2 text-gray-800"
class="flex items-center social-icon-wrapper cursor-pointer rounded-lg hover:bg-nc-bg-gray-light py-3 px-4 gap-2 text-nc-content-gray"
@click="openUrl(social.link, social.e)"
>
<component :is="social.icon" class="w-5 h-5 stroke-transparent social-icon" />
<component
:is="social.icon"
:class="{
'dark-mode': isDark,
}"
class="w-5 h-5 stroke-transparent social-icon"
/>
<span class="font-semibold">{{ social.name }}</span>
</div>
</div>
@@ -60,7 +68,7 @@ const openUrl = (url: string, e: string) => {
</template>
<style scoped lang="scss">
.social-icon {
.social-icon:not(.dark-mode) {
// Make icon black and white
filter: grayscale(100%);

10
packages/nc-gui/components/feed/View.vue
View File

@@ -79,20 +79,20 @@ onBeforeUnmount(() => {
<div class="flex flex-col h-full">
<NcTabs v-model:active-key="activeTab" centered>
<a-tab-pane v-for="tab in tabs" :key="tab.key" class="bg-gray-50 !h-full">
<a-tab-pane v-for="tab in tabs" :key="tab.key" class="bg-nc-bg-gray-extralight !h-full">
<template #tab>
<div class="flex gap-2 items-center">
<GeneralIcon
:class="{
'text-brand-500': activeTab === tab.key,
'text-gray-600': activeTab !== tab.key,
'text-nc-content-brand': activeTab === tab.key,
'text-nc-content-gray-subtle2': activeTab !== tab.key,
}"
:icon="tab.icon as any"
/>
<span
:class="{
'text-brand-500 font-medium': activeTab === tab.key,
'text-gray-700': activeTab !== tab.key,
'text-nc-content-brand font-medium': activeTab === tab.key,
'text-nc-content-gray-subtle': activeTab !== tab.key,
}"
class="text-sm"
>{{ tab.title }}

2
packages/nc-gui/components/feed/Youtube/Player.vue
View File

@@ -25,7 +25,7 @@ const watchVideo = () => {
</script>
<template>
<div class="mt-6 border-1 !bg-white recent-card !rounded-2xl border-gray-200">
<div class="mt-6 border-1 !bg-nc-bg-default recent-card !rounded-2xl border-nc-border-gray-medium">
<YoutubeVue3
:videoid="extractYoutubeVideoId(Url)"
class="!rounded-t-xl"