diff --git a/src/lib/commandCenter/panels/template.svelte b/src/lib/commandCenter/panels/template.svelte index 6e4d3d2de2..31a14a33e6 100644 --- a/src/lib/commandCenter/panels/template.svelte +++ b/src/lib/commandCenter/panels/template.svelte @@ -369,29 +369,31 @@ --cmd-center-border: hsl(var(--color-neutral-10)); --cmd-center-shadow: 0px 16px 32px 0px rgba(55, 59, 77, 0.04); - --kbd-bg: hsl(var(--color-neutral-30)); + --kbd-bg: hsl(var(--color-neutral-15)); + --kbd-color: hsl(var(--color-neutral-60)); --crumb-bg: hsl(var(--color-neutral-10)); --crumb-color: hsl(var(--color-neutral-100)); --result-bg: hsl(var(--color-neutral-10)); - --footer-bg: linear-gradient(180deg, #fff 49.38%, #e8e9f0 100%); + --footer-bg: linear-gradient(180deg, #fff 0%, #e8e9f0 100%); --icon-color: hsl(var(--color-neutral-50)); - --label-color: hsl(var(--color-neutral-100)); + --label-color: hsl(var(--color-neutral-60)); } :global(.theme-dark) .card { - --cmd-center-bg: hsl(var(--color-neutral-100)); - --cmd-center-border: hsl(var(--color-neutral-150)); - --cmd-center-shadow: 0px 16px 32px 0px hsl(var(--color-neutral-110)); + --cmd-center-bg: hsl(var(--color-neutral-90)); + --cmd-center-border: hsl(var(--color-neutral-80)); + --cmd-center-shadow: 0px 16px 32px 0px #14141f; - --kbd-bg: hsl(var(--color-neutral-150)); + --kbd-bg: hsl(var(--color-neutral-80)); + --kbd-color: hsl(var(--color-neutral-15)); --crumb-bg: hsl(var(--color-neutral-150)); --crumb-color: hsl(var(--color-neutral-30)); - --result-bg: hsl(var(--color-neutral-200)); + --result-bg: hsl(var(--color-neutral-85)); --footer-bg: linear-gradient( 180deg, hsl(var(--color-neutral-100)) 0%, @@ -399,7 +401,7 @@ ); --icon-color: hsl(var(--color-neutral-70)); - --label-color: hsl(var(--color-neutral-30)); + --label-color: hsl(var(--color-neutral-15)); } // Elements @@ -430,6 +432,7 @@ } :global(.kbd) { + color: var(--kbd-color); background-color: var(--kbd-bg); padding-inline: 0.25rem; } diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 381f77416f..fdad1365be 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -138,7 +138,7 @@ @import '@appwrite.io/pink/src/abstract/variables/_devices.scss'; .tippy-box { --p-tooltip-text-color: var(--color-neutral-10); - --p-tooltip--bg-color: var(--color-neutral-100); + --p-tooltip--bg-color: var(--color-neutral-80); background-color: hsl(var(--p-tooltip--bg-color)); color: hsl(var(--p-tooltip-text-color));