github/directus
1
1
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-04-25 03:00:53 -04:00
Code Issues Packages Projects Releases Wiki Activity

invert color shades (#13940)

Browse Source 
* invert color shades

* Fix input glow

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>
This commit is contained in:
Ben Haynes
2022-06-16 17:26:18 -04:00
committed by GitHub
parent 37ec41794f
commit 42cb679fed
3 changed files with 19 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
app/src/components/v-input/v-input.vue
View File

@@ -252,20 +252,19 @@ function stepDown() {
}
</script>
<style>
body {
<style lang="scss" scoped>
:global(body) {
--v-input-font-family: var(--family-sans-serif);
--v-input-placeholder-color: var(--foreground-subdued);
}
</style>
<style lang="scss" scoped>
.v-input {
--arrow-color: var(--border-normal);
--v-icon-color: var(--foreground-subdued);
--v-input-box-shadow-color-focus: var(--primary);
--v-input-color: var(--foreground-normal);
--v-input-background-color: var(--background-input);
--v-input-border-color-focus: var(--primary);
}
.v-input {
--arrow-color: var(--border-normal);
--v-icon-color: var(--foreground-subdued);
display: flex;
align-items: center;
@@ -340,7 +339,7 @@ body {
color: var(--v-input-color);
background-color: var(--background-input);
border-color: var(--v-input-border-color-focus);
box-shadow: 0 0 16px -8px var(--primary);
box-shadow: 0 0 16px -8px var(--v-input-box-shadow-color-focus);
}
&.disabled {

4
app/src/utils/get-theme.ts
View File

@@ -3,9 +3,7 @@ import { useUserStore } from '@/stores';
export function getTheme(): 'light' | 'dark' {
const userStore = useUserStore();
if (!userStore.currentUser) return 'light';
if (userStore.currentUser.theme === 'auto') {
if (!userStore.currentUser || !('theme' in userStore.currentUser) || userStore.currentUser.theme === 'auto') {
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
return 'dark';
}

13
app/src/views/public/public-view.vue
View File

@@ -64,6 +64,7 @@ import { getRootPath } from '@/utils/get-root-path';
import { useI18n } from 'vue-i18n';
import { cssVar } from '@directus/shared/utils/browser';
import Color from 'color';
import { getTheme } from '@/utils/get-theme';
interface Props {
wide?: boolean;
@@ -81,7 +82,7 @@ const { info } = storeToRefs(serverStore);
const colors = computed(() => {
const primary = info.value?.project?.project_color || 'var(--primary)';
const primaryHex = primary.startsWith('var(--') ? cssVar(primary.substring(4, primary.length - 1)) : primary;
const isDark = getTheme() === 'dark';
const primaryColor = Color(primaryHex);
const primaryColorHSL = primaryColor.hsl() as unknown as {
@@ -91,15 +92,18 @@ const colors = computed(() => {
};
/**
* The default secondary color is based on the standard difference between Directus purple and pink, which is:
* The default light mode secondary color is based on the standard difference between Directus purple and pink, which is:
* primary = 250.9, 100, 63.3
* secondary = 320, 100, 80
* diff = +69.1, 0, +16.7
*
* For dark mode, we greatly reduce the lightness value to -50
*/
const secondaryColor = Color({
h: primaryColorHSL.color[0] + 69.1,
h: primaryColorHSL.color[0] + (isDark ? -69.1 : 69.1),
s: primaryColorHSL.color[1] + 0,
l: primaryColorHSL.color[2] + 16.7,
l: primaryColorHSL.color[2] + (isDark ? -50 : 16.7),
});
const shades = [];
@@ -314,6 +318,7 @@ const logoURL = computed<string | null>(() => {
&.branded :deep(.v-input) {
--v-input-border-color-focus: var(--foreground-normal);
--v-input-box-shadow-color-focus: var(--foreground-normal);
}
&.branded :deep(.v-input.solid) {