vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Add noir to themes

pull/5507/head
Cagatay Civici 2024-03-27 18:37:56 +03:00
parent 4b02af4cd4
commit 71fe64dd69
2 changed files with 81 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/styles/layout/variables/main/_light.scss
View File

@ -14,7 +14,7 @@
--ground-background: var(--p-surface-50); --ground-background: var(--p-surface-50);
--overlay-background: #ffffff; --overlay-background: #ffffff;
--hover-background: var(--p-surface-100); --hover-background: var(--p-surface-100);
--code-background: var(--p-surface-800); --code-background: var(--p-surface-950);
--high-contrast-text-color: var(--p-surface-900); --high-contrast-text-color: var(--p-surface-900);
--hover-border-color: var(--p-surface-400); --hover-border-color: var(--p-surface-400);
--mark-background: var(--p-surface-200); --mark-background: var(--p-surface-200);

101
layouts/AppConfigurator.vue
View File

@ -10,7 +10,7 @@
type="button" type="button"
@click="updateColors('primary', primaryColor)" @click="updateColors('primary', primaryColor)"
:class="{ 'active-color': selectedPrimaryColor === primaryColor.name }" :class="{ 'active-color': selectedPrimaryColor === primaryColor.name }"
:style="{ backgroundColor: `${primaryColor.palette['500']}` }" :style="{ backgroundColor: `${primaryColor.name === 'noir' ? 'var(--text-color)' : primaryColor.palette['500']}` }"
></button> ></button>
</div> </div>
</div> </div>
@ -38,7 +38,7 @@
</template> </template>
<script> <script>
import { updatePrimary, updateSurface } from 'primevue/themes'; import { updatePreset, updateSurface } from 'primevue/themes';
export default { export default {
data() { data() {
@ -46,6 +46,7 @@ export default {
selectedPrimaryColor: 'emerald', selectedPrimaryColor: 'emerald',
selectedSurfaceColor: null, selectedSurfaceColor: null,
primaryColors: [ primaryColors: [
{ name: 'noir', palette: { 50: '#fafafa', 100: '#f4f4f5', 200: '#e4e4e7', 300: '#d4d4d8', 400: '#a1a1aa', 500: '#71717a', 600: '#52525b', 700: '#3f3f46', 800: '#27272a', 900: '#18181b', 950: '#09090b' } },
{ name: 'emerald', palette: { 50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b7', 400: '#34d399', 500: '#10b981', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22' } }, { name: 'emerald', palette: { 50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b7', 400: '#34d399', 500: '#10b981', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22' } },
{ name: 'green', palette: { 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac', 400: '#4ade80', 500: '#22c55e', 600: '#16a34a', 700: '#15803d', 800: '#166534', 900: '#14532d', 950: '#052e16' } }, { name: 'green', palette: { 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac', 400: '#4ade80', 500: '#22c55e', 600: '#16a34a', 700: '#15803d', 800: '#166534', 900: '#14532d', 950: '#052e16' } },
{ name: 'lime', palette: { 50: '#f7fee7', 100: '#ecfccb', 200: '#d9f99d', 300: '#bef264', 400: '#a3e635', 500: '#84cc16', 600: '#65a30d', 700: '#4d7c0f', 800: '#3f6212', 900: '#365314', 950: '#1a2e05' } }, { name: 'lime', palette: { 50: '#f7fee7', 100: '#ecfccb', 200: '#d9f99d', 300: '#bef264', 400: '#a3e635', 500: '#84cc16', 600: '#65a30d', 700: '#4d7c0f', 800: '#3f6212', 900: '#365314', 950: '#1a2e05' } },
@ -101,25 +102,83 @@ export default {
document.startViewTransition(() => this.applyTheme(type, color)); document.startViewTransition(() => this.applyTheme(type, color));
}, },
applyTheme(type, color) { applyTheme(type, color) {
if (type === 'primary') updatePrimary(color.palette); if (type === 'primary') {
else if (type === 'surface') updateSurface(color.palette); if (color.name === 'noir') {
updatePreset({
/*updatePreset({ semantic: {
semantic: primary: color.palette,
type === 'surface' colorScheme: {
? { light: {
colorScheme: { primary: {
dark: { color: '#09090b',
surface: color.palette inverseColor: '#ffffff',
} hoverColor: '#18181b',
} activeColor: '#27272a'
} },
: { [type]: color.palette } highlight: {
});*/ background: '#09090b',
focusBackground: '#3f3f46',
/*for (const shade in color.palette) { color: '#ffffff',
document.documentElement.style.setProperty(`--p-${type}-${shade}`, `${color.palette[shade]}`); focusColor: '#ffffff'
}*/ }
},
dark: {
primary: {
color: '#fafafa',
inverseColor: '#09090b',
hoverColor: '#f4f4f5',
activeColor: '#e4e4e7'
},
highlight: {
background: 'rgba(250, 250, 250, .16)',
focusBackground: 'rgba(250, 250, 250, .24)',
color: 'rgba(255,255,255,.87)',
focusColor: 'rgba(255,255,255,.87)'
}
}
}
}
});
} else {
updatePreset({
semantic: {
primary: color.palette,
colorScheme: {
light: {
primary: {
color: '{primary.500}',
inverseColor: '#ffffff',
hoverColor: '{primary.600}',
activeColor: '{primary.700}'
},
highlight: {
background: '{primary.50}',
focusBackground: '{primary.100}',
color: '{primary.700}',
focusColor: '{primary.800}'
}
},
dark: {
primary: {
color: '{primary.400}',
inverseColor: '{surface.900}',
hoverColor: '{primary.300}',
activeColor: '{primary.200}'
},
highlight: {
background: 'color-mix(in srgb, {primary.400}, transparent 84%)',
focusBackground: 'color-mix(in srgb, {primary.400}, transparent 76%)',
color: 'rgba(255,255,255,.87)',
focusColor: 'rgba(255,255,255,.87)'
}
}
}
}
});
}
} else if (type === 'surface') {
updateSurface(color.palette);
}
}, },
onRippleChange(value) { onRippleChange(value) {
this.$appState.ripple = value; this.$appState.ripple = value;