Add noir to themes
parent
4b02af4cd4
commit
71fe64dd69
|
@ -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);
|
||||||
|
|
|
@ -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: {
|
colorScheme: {
|
||||||
|
light: {
|
||||||
|
primary: {
|
||||||
|
color: '#09090b',
|
||||||
|
inverseColor: '#ffffff',
|
||||||
|
hoverColor: '#18181b',
|
||||||
|
activeColor: '#27272a'
|
||||||
|
},
|
||||||
|
highlight: {
|
||||||
|
background: '#09090b',
|
||||||
|
focusBackground: '#3f3f46',
|
||||||
|
color: '#ffffff',
|
||||||
|
focusColor: '#ffffff'
|
||||||
|
}
|
||||||
|
},
|
||||||
dark: {
|
dark: {
|
||||||
surface: color.palette
|
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)'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
: { [type]: color.palette }
|
}
|
||||||
});*/
|
});
|
||||||
|
} else {
|
||||||
/*for (const shade in color.palette) {
|
updatePreset({
|
||||||
document.documentElement.style.setProperty(`--p-${type}-${shade}`, `${color.palette[shade]}`);
|
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;
|
||||||
|
|
Loading…
Reference in New Issue