Global style
Magic Portfolio's styling is based on Once UI's customization through data-attributes. You can generate a custom color palette for brand, accent and neutral colors on Once UI where you'll find instructions on how to apply it.
Tsx
theme: 'dark', // dark | light
neutral: 'gray', // sand | gray | slate
brand: 'blue', // blue | indigo | violet | magenta | pink | red | orange | yellow | moss | green | emerald | aqua | cyan
accent: 'indigo', // blue | indigo | violet | magenta | pink | red | orange | yellow | moss | green | emerald | aqua | cyan
solid: 'contrast', // color | contrast
solidStyle: 'flat', // flat | plastic
border: 'playful', // rounded | playful | conservative
surface: 'translucent', // filled | translucent
transition: 'all', // all | micro | macro
scaling: '100', // 90 | 95 | 100 | 105 | 110Background effect
There's a pre-configured background in layout.tsx that you can modify in the config file. Set graphic elements such as gradient, dots, lines, and grid and configure their appearance.
Tsx
const effects = {
mask: {
cursor: false,
x: 50,
y: 0,
radius: 100
},
gradient: {
display: true,
x: 50,
y: -25,
width: 100,
height: 100,
tilt: 0,
colorStart: 'accent-background-strong',
colorEnd: 'static-transparent',
opacity: 50
},
dots: {
display: true,
size: 2,
color: 'brand-on-background-weak',
opacity: 20
},
lines: {
display: false,
color: 'neutral-alpha-weak',
opacity: 100
},
grid: {
display: false,
color: 'neutral-alpha-weak',
opacity: 100,
width: 'var(--static-space-32)',
height: 'var(--static-space-32)'
}
}
