i have built this app https://cvirus.app and build and deployed on browser.
on chrome browser on android phones it renders dark background (as dark theme is being applied by default it seems).
I want to force light theme everywhere no matter what device what browser. how do I do that?
commenting dark colors portins in theme/variables.scss did not work
To resolve this, you have to go to theme/variable.scss at the src folder and locate
#media (prefers-color-scheme: dark)
And change from dark to light. If you have not modified the variable.scss. it should be in line 79. Click to see the screenshot of my own code I hope this helps.
Since version 79 of the Chrome browser, you can choose between CSS prefers-color-sheme media feature values. Ionic respects this media feature and reacts to changes to it.
To change it without changing your OS preference and color theme, you need to open the Rendering panel in the Chrome Dev Tools:
Open the the Chrome Dev Tools.
Press Crtl+Shift+P on PC or Cmd+Shift+P on Mac.
Type "Show rendering" in the Command Palette.
Press Enter with the option Drawer | Show rendering selected, which should be already selected.
The Rendering drawer opens. Then on the "Emulate CSS media..." option, select the color scheme you prefer.
you should comment ios body and md body classes at the theme/variables.scss then it will become light mode.
In ionic 5+ Just rename prefers-color-scheme: dark to prefers-color-scheme: light Then It will not switch to dark theme no matter what.
In my case, commenting the dark theme in theme/variables.scss works well.
I comment on line 70 #media (prefers-color-scheme: dark) {
Until the end of the file.
Here is my file
// Ionic Variables and Theming. For more info, please see:
// http://ionicframework.com/docs/theming/
/** Ionic CSS Variables **/
:root {
--ion-color-primary : #633A82;
--ion-color-primary-rgb : 99, 58, 130;
--ion-color-primary-contrast : #FFFFFF;
--ion-color-primary-contrast-rgb : 255, 255, 255;
--ion-color-primary-shade : #573372;
--ion-color-primary-tint : #734E8F;
--ion-color-secondary : #72B5B7;
--ion-color-secondary-rgb : 114, 181, 183;
--ion-color-secondary-contrast : #000000;
--ion-color-secondary-contrast-rgb : 0, 0, 0;
--ion-color-secondary-shade : #649FA1;
--ion-color-secondary-tint : #80BCBE;
--ion-color-tertiary : #F1FCFC;
--ion-color-tertiary-rgb : 241, 252, 252;
--ion-color-tertiary-contrast : #000000;
--ion-color-tertiary-contrast-rgb : 0, 0, 0;
--ion-color-tertiary-shade : #D4DEDE;
--ion-color-tertiary-tint : #F2FCFC;
--ion-color-success : #10DC60;
--ion-color-success-rgb : 16, 220, 96;
--ion-color-success-contrast : #FFFFFF;
--ion-color-success-contrast-rgb : 255, 255, 255;
--ion-color-success-shade : #0EC254;
--ion-color-success-tint : #28E070;
--ion-color-warning : #FFCE00;
--ion-color-warning-rgb : 255, 206, 0;
--ion-color-warning-contrast : #FFFFFF;
--ion-color-warning-contrast-rgb : 255, 255, 255;
--ion-color-warning-shade : #E0B500;
--ion-color-warning-tint : #FFD31A;
--ion-color-danger : #F04141;
--ion-color-danger-rgb : 245, 61, 61;
--ion-color-danger-contrast : #FFFFFF;
--ion-color-danger-contrast-rgb : 255, 255, 255;
--ion-color-danger-shade : #D33939;
--ion-color-danger-tint : #F25454;
--ion-color-dark : #222428;
--ion-color-dark-rgb : 34, 34, 34;
--ion-color-dark-contrast : #FFFFFF;
--ion-color-dark-contrast-rgb : 255, 255, 255;
--ion-color-dark-shade : #1E2023;
--ion-color-dark-tint : #383A3E;
--ion-color-medium : #989AA2;
--ion-color-medium-rgb : 152, 154, 162;
--ion-color-medium-contrast : #FFFFFF;
--ion-color-medium-contrast-rgb : 255, 255, 255;
--ion-color-medium-shade : #86888F;
--ion-color-medium-tint : #A2A4AB;
--ion-color-light : #F4F5F8;
--ion-color-light-rgb : 244, 244, 244;
--ion-color-light-contrast : #000000;
--ion-color-light-contrast-rgb : 0, 0, 0;
--ion-color-light-shade : #D7D8DA;
--ion-color-light-tint : #F5F6F9;
}
//#media (prefers-color-scheme: dark) {
// /*
// * Dark Colors
// * -------------------------------------------
// */
//
// body {
// --ion-color-primary: #428cff;
// --ion-color-primary-rgb: 66,140,255;
// --ion-color-primary-contrast: #ffffff;
// --ion-color-primary-contrast-rgb: 255,255,255;
// --ion-color-primary-shade: #3a7be0;
// --ion-color-primary-tint: #5598ff;
//
// --ion-color-secondary: #50c8ff;
// --ion-color-secondary-rgb: 80,200,255;
// --ion-color-secondary-contrast: #ffffff;
// --ion-color-secondary-contrast-rgb: 255,255,255;
// --ion-color-secondary-shade: #46b0e0;
// --ion-color-secondary-tint: #62ceff;
//
// --ion-color-tertiary: #6a64ff;
// --ion-color-tertiary-rgb: 106,100,255;
// --ion-color-tertiary-contrast: #ffffff;
// --ion-color-tertiary-contrast-rgb: 255,255,255;
// --ion-color-tertiary-shade: #5d58e0;
// --ion-color-tertiary-tint: #7974ff;
//
// --ion-color-success: #2fdf75;
// --ion-color-success-rgb: 47,223,117;
// --ion-color-success-contrast: #000000;
// --ion-color-success-contrast-rgb: 0,0,0;
// --ion-color-success-shade: #29c467;
// --ion-color-success-tint: #44e283;
//
// --ion-color-warning: #ffd534;
// --ion-color-warning-rgb: 255,213,52;
// --ion-color-warning-contrast: #000000;
// --ion-color-warning-contrast-rgb: 0,0,0;
// --ion-color-warning-shade: #e0bb2e;
// --ion-color-warning-tint: #ffd948;
//
// --ion-color-danger: #ff4961;
// --ion-color-danger-rgb: 255,73,97;
// --ion-color-danger-contrast: #ffffff;
// --ion-color-danger-contrast-rgb: 255,255,255;
// --ion-color-danger-shade: #e04055;
// --ion-color-danger-tint: #ff5b71;
//
// --ion-color-dark: #f4f5f8;
// --ion-color-dark-rgb: 244,245,248;
// --ion-color-dark-contrast: #000000;
// --ion-color-dark-contrast-rgb: 0,0,0;
// --ion-color-dark-shade: #d7d8da;
// --ion-color-dark-tint: #f5f6f9;
//
// --ion-color-medium: #989aa2;
// --ion-color-medium-rgb: 152,154,162;
// --ion-color-medium-contrast: #000000;
// --ion-color-medium-contrast-rgb: 0,0,0;
// --ion-color-medium-shade: #86888f;
// --ion-color-medium-tint: #a2a4ab;
//
// --ion-color-light: #222428;
// --ion-color-light-rgb: 34,36,40;
// --ion-color-light-contrast: #ffffff;
// --ion-color-light-contrast-rgb: 255,255,255;
// --ion-color-light-shade: #1e2023;
// --ion-color-light-tint: #383a3e;
// }
//
// /*
// * iOS Dark Theme
// * -------------------------------------------
// */
//
// .ios body {
// --ion-background-color: #000000;
// --ion-background-color-rgb: 0,0,0;
//
// --ion-text-color: #ffffff;
// --ion-text-color-rgb: 255,255,255;
//
// --ion-color-step-50: #0d0d0d;
// --ion-color-step-100: #1a1a1a;
// --ion-color-step-150: #262626;
// --ion-color-step-200: #333333;
// --ion-color-step-250: #404040;
// --ion-color-step-300: #4d4d4d;
// --ion-color-step-350: #595959;
// --ion-color-step-400: #666666;
// --ion-color-step-450: #737373;
// --ion-color-step-500: #808080;
// --ion-color-step-550: #8c8c8c;
// --ion-color-step-600: #999999;
// --ion-color-step-650: #a6a6a6;
// --ion-color-step-700: #b3b3b3;
// --ion-color-step-750: #bfbfbf;
// --ion-color-step-800: #cccccc;
// --ion-color-step-850: #d9d9d9;
// --ion-color-step-900: #e6e6e6;
// --ion-color-step-950: #f2f2f2;
//
// --ion-toolbar-background: #0d0d0d;
//
// --ion-item-background: #1c1c1c;
// --ion-item-background-activated: #313131;
// }
//
//
// /*
// * Material Design Dark Theme
// * -------------------------------------------
// */
//
// .md body {
// --ion-background-color: #121212;
// --ion-background-color-rgb: 18,18,18;
//
// --ion-text-color: #ffffff;
// --ion-text-color-rgb: 255,255,255;
//
// --ion-border-color: #222222;
//
// --ion-color-step-50: #1e1e1e;
// --ion-color-step-100: #2a2a2a;
// --ion-color-step-150: #363636;
// --ion-color-step-200: #414141;
// --ion-color-step-250: #4d4d4d;
// --ion-color-step-300: #595959;
// --ion-color-step-350: #656565;
// --ion-color-step-400: #717171;
// --ion-color-step-450: #7d7d7d;
// --ion-color-step-500: #898989;
// --ion-color-step-550: #949494;
// --ion-color-step-600: #a0a0a0;
// --ion-color-step-650: #acacac;
// --ion-color-step-700: #b8b8b8;
// --ion-color-step-750: #c4c4c4;
// --ion-color-step-800: #d0d0d0;
// --ion-color-step-850: #dbdbdb;
// --ion-color-step-900: #e7e7e7;
// --ion-color-step-950: #f3f3f3;
//
// --ion-item-background: #1A1B1E;
// }
//
// ion-title.title-large {
// --color: white;
// }
//}
Hope to help you
One way to do this is to force light styles by using media queries. On devices that prefer light, you can supply your dark theme variables, but you need to override #media (prefers-color-scheme: dark) scope with your light theme variables.
One way to do this is to use a mixin for your theme, and include it in both :root scope and #media (prefers-color-scheme: dark).
Conversely, if you want to force dark theme, use a mixin for your theme, and include it in both :root scope and #media (prefers-color-scheme: light).
Note: Ionic (ionic/cli#6.10.0) and SCSS
/**
* {#mixin} - Supplies dark theme variables to the included scope
*/
#mixin eternal-darkness() {
// Dark theme variables...
}
:root {
#include eternal-darkness;
}
#media (prefers-color-scheme: light) {
#include eternal-darkness;
}
In my web browser, the theme was light. Which is what I wanted.
In the ios emulator, it was dark. To make it light I did this:
In variables.css
#media (prefers-color-scheme: lights) {
...
}
Simply have this tag placed in index.html file
<meta name="color-scheme" content="light dark" />
It works for me! Thanks
Related
I have a mui dialog and would like to set its background to black. (no color), but I don't succeed.
And I don't understand why it doesn't work.
My Dialog:
export const MyDialog = (props: any) => {
return (
<ThemeProvider theme={TestTheme}>
<CssBaseline />
<Dialog open={true}>
<DialogTitle>Title</DialogTitle>
<DialogContentText>Text</DialogContentText>
</Dialog>
</ThemeProvider>
);
};
My TestTheme looks like this:
export const TestTheme = createTheme(
{palette: {
mode: 'dark',
background: {
paper: '#000000',
// paper: 'red',
default: '#000000',
},
}
}
)
and it looks like this:
As we can see the dialog color has not the same black as the background even I have set the colors for both correctly.
If I set the colors :
paper: 'red',
// paper: '#000000',
// default: '#000000',
default: 'blue',
How can I set the background color of the dialog to black (no color)? (Regardless if it make sence or not, I would like to understand)
You are doing everything right with the way you set the background color.
The reason you see two different black colours is because when the Dialog is open is getting a class of MuiBackdrop-root which has a background-colour of background-color: rgba(0, 0, 0, 0.5); so this additional semi transparent layer is causing this colour difference.
Here is a codesandbox with a solution to your issue.
Code:
<Dialog open={true}
sx={{ //You can copy the code below in your theme
background: '#000',
'& .MuiPaper-root': {
background: '#000'
},
'& .MuiBackdrop-root': {
backgroundColor: 'transparent' // Try to remove this to see the result
}
}}>
<DialogTitle sx={{ color: "white" }}>Title</DialogTitle>
<DialogContentText sx={{ color: "white" }}>Text</DialogContentText>
</Dialog>
Hope it helps.
I'm trying to follow some YT tutorial about Bootstrap 5 with the use of some tools like Sass.
Author of this video in his example at the beginning is testing if his script for compiling Sass code is working.
Here's the screenshot of his work:
screenshot 1
I tried to do the same thing and I got an error saying:
Error: Sass variables aren't allowed in plain CSS.
Here's my code:
$primary: #ff0000;
.test-1 {
color: $primary;
}
And the screenshot: screenshot 2
This showed up after compiling my script:
/* Error: Sass variables aren't allowed in plain CSS.
* ,
* 1 | $primary: #ff0000;
* | ^^^^^^^^
* '
* scss/style.css 1:1 root stylesheet */
body::before {
font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
"Droid Sans Mono", monospace, monospace;
white-space: pre;
display: block;
padding: 1em;
margin-bottom: 1em;
border-bottom: 2px solid black;
content: "Error: Sass variables aren't allowed in plain CSS.\a \2577 \a 1 \2502 $primary: #ff0000;\a \2502 ^^^^^^^^\a \2575 \a scss/style.css 1:1 root stylesheet";
}
Screenshot of terminal
I think that my code looks the same as his, so where is the problem? Had some rules of Sass had changed since the video was posted?
Here is my info from package.json:
"sass": "^1.45.2"
},
"dependencies": {
"#fortawesome/fontawesome-free": "^5.15.4",
"autoprefixer": "^10.4.1",
"bootstrap": "^5.1.3",
"postcss": "^8.4.5",
"postcss-cli": "^9.1.0"
And his:
"sass": "^1.32.12"
},
"dependencies": {
"#fortawesome/fontawesome-free": "^5.15.3",
"autoprefixer": "^10.2.5",
"bootstrap": "^5.0.0",
"postcss-cli": "^8.3.1"
What is your file extension? It should be .scss. => my-style.scss
I'm currently building a webserver with webpage to control led strips. The website runs fine and I can control a single LED perfectly. When I select a rainbow animation for example (cycle through evry color of the rainbow) this loop takes quit a lot of time (5 seconds per color). When the node mcu (ESP8266) is in that loop inputs from the webserver are not seen. I don't want to write in every animation that I wrote to check for the inputs (these are 50 animations or more) so I came up with an interrupt. I start an timer and everytime (executed in less then 250ms to trigger watchdog) the interrupt is triggered the handlewebserver is executed. When I put my handleClient in the void loop everything works fine, but when I put it in my timerInterrupt the page start constantly reloading. Can anyone tell why? ps: with only controlling a simple led on or off this doenst work eather, thats why I dont incuded the extra code here, you can include a very long delay after turning D4 high to test this :)
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <Ticker.h>
Ticker blinker;
const char ssid[] = "*****";
const char pass[] = "*****";
// Web server port
const uint16_t port = 80;
boolean ledStatus = false;
// Web server object declaration
ESP8266WebServer server(port);
/*
String webPage =
"<html>\r\n" \
"<head>\r\n" \
"<title>ESP8266 Basic Page LED</title>\r\n" \
"</head>\r\n" \
"<body>\r\n" \
"<h1>LED</h1>\r\n" \
"<form method=\"post\">\r\n" \
"<input type=\"submit\" name=\"led\" value=\"ON\">\r\n" \
"<input type=\"submit\" name=\"led\" value=\"OFF\">\r\n" \
"</form>\r\n" \
"</body>\r\n" \
"</html>\r\n";
*/
const char MAIN_page[] PROGMEM = R"=====(
<HTML>
<HEAD>
<title>ESP8266 Basic Page LED</title>
</HEAD>
<style>
.panel{
width: 100%;
height: 40vh;
margin-bottom: 10px;
background-color rgba(255,208,142,1);
}
.slidecontainer {
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #89cff0;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.color-picker {
width: 200px;
height: 100px;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#simonwep/pickr/dist/themes/classic.min.css"/> <!-- 'classic' theme -->
<BODY>
<div class="color-picker"></div>
<div class="panel" id="panel"></div>
<h1>LED</h1>
<form method="post" id="formie">
<input type="submit" name="led" value="ON">
<input type="submit" name="led" value="OFF">
leds dimmen:
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" name="slider" class="slider" id="myRange">
<p class="valueSlider">Value: <span id="demo"></span></p>
</div>
<input type="text" id="field" name="fname" value="John"><br><br>
</form>
<script src="https://cdn.jsdelivr.net/npm/#simonwep/pickr/dist/pickr.min.js"></script>
<script>
let panel = document.getElementById('panel');
// Simple example, see optional options for more configuration.
const pickr = Pickr.create({
el: '.color-picker',
theme: 'classic', // or 'monolith', or 'nano'
swatches: [
'rgba(244, 67, 54, 1)',
'rgba(233, 30, 99, 1)',
'rgba(156, 39, 176, 1)',
'rgba(103, 58, 183, 1)',
'rgba(63, 81, 181, 1)',
'rgba(33, 150, 243, 1)',
'rgba(3, 169, 244, 1)',
'rgba(0, 188, 212, 1)',
'rgba(0, 150, 136, 1)',
'rgba(76, 175, 80, 1)',
'rgba(139, 195, 74, 1)',
'rgba(205, 220, 57, 1)',
'rgba(255, 235, 59, 1)',
'rgba(255, 193, 7, 1)',
'rgba(255, 193, 7, 1)',
'rgba(255, 193, 7, 1)',
'rgba(255, 193, 7, 1)'
],
components: {
// Main components
preview: true,
opacity: false,
hue: true,
// Input / output Options
interaction: {
hex: false,
rgba: false,
hsla: false,
hsva: false,
cmyk: false,
input: false,
clear: false,
save: false
}
}
});
pickr.on('change', (color, instance) => {
//console.log('change', color, instance);
var testieee = color.toRGBA(); // Returns [r, g, b, a]
console.log(testieee);
this.panel.style.backgroundColor = 'rgba(${color[0]},${color[1]},${color[2]},${color[3]})';
var myForm = document.getElementById('formie');
var hiddenInput = document.createElement('input');
hiddenInput.type = 'hidden';
hiddenInput.name = 'myarray';
hiddenInput.value = JSON.stringify(testieee);
var testelement = document.getElementById('field');
testelement.value = JSON.stringify(testieee);
})
</script>
</BODY>
</HTML>
)=====";
void handleRoot()
{
String s = MAIN_page; //Read HTML contents
server.send(200, "text/html", s); //Send web page
}
void handleLed()
{
// *** Turn on or off the LED ***
if (server.arg("led") == "ON")
digitalWrite(D4, LOW);
else if (server.arg("led") == "OFF")
digitalWrite(D4, HIGH);
if (server.arg("slider").toInt() > 50)
digitalWrite(D2, HIGH);
else
digitalWrite(D2, LOW);
server.sendHeader("Location","/");
server.send(303);
}
//=======================================================================
void ICACHE_RAM_ATTR onTimerISR(){
//digitalWrite(LED,!(digitalRead(LED))); //Toggle LED Pin
server.handleClient(); /* when It moves to here the server is constantly reloading and starst again a few times! */
timer1_write(250000);
Serial.printf("execute interrupt");
}
void setup()
{
// Set pin as output
pinMode(D4, OUTPUT);
pinMode(D2, OUTPUT);
// Setup serial communication
Serial.begin(74880);
// *** Connect to a WiFi acces point ***
Serial.printf("Connecting to %s ", ssid);
WiFi.begin(ssid, pass);
while (WiFi.status() != WL_CONNECTED)
{
delay(500);
Serial.print(".");
}
Serial.printf(" Connected\n");
Serial.printf("IP address: %s\n", WiFi.localIP().toString().c_str());
// *** Start web server ***
server.on("/", HTTP_GET, handleRoot);
server.on("/", HTTP_POST, handleLed);
server.begin();
Serial.printf("Web server started at port %d\n", port);
//Initialize Ticker every 0.5s / 2 and a little bit less --> so under 250ms
timer1_attachInterrupt(onTimerISR);
timer1_enable(TIM_DIV16, TIM_EDGE, TIM_SINGLE);
timer1_write(250000); //120000 us
}
void loop()
{
//server.handleClient(); /* when It stays here everything is fine! */
//server.handleClient();
//Serial.print(server.arg("fname"));
}
On styled-components we can have something like this
import syled, { css } from 'styled-components';
const StyledButton = styled.button<StyledButtonProps>`
display: flex;
${textStyles.styledButton}
${props =>
props.disabled &&
css`
opacity: 0.5;
`}
`
I'm trying to use MUI's styled but can't find how to conditionally add the opacity property based on the props passed to the button. I'm trying something like this, but don't want to define the default value of every conditional styles as on opacity here (since there could be a LOT of conditional properties based on the value of a passed prop)
import { styled } from '#material-ui/core/styles';
// eslint-disable-next-line #typescript-eslint/no-unused-vars
const StyledMUIButton = styled(({ disabled, disclosure, whiteButton, fullWidth, noMarginTop, ...rest }: StyledButtonProps) => (
<button {...rest} />
))({
display: 'flex',
...textStyles.button,
opacity: (props: StyledButtonProps) => props.disabled ? 0.5 : 1
})
Another case would be something like this in styled-components, how can be that applied to MUI's styled?
${props =>
props.whiteButton
? css`
background-color: transparent;
border: none;
${textStyles.styledLink}
`
: css`
&:focus {
background: transparent;
border: 1px solid ${colors.textLink};
color: ${colors.textLink};
}
`}
I ended up using makeStyles the following way
const useStyles = makeStyles({
button: (props: StyledButtonProps) => ({
display: 'flex',
...textStyles.button,
...props.disabled && { opacity: 0.5 },
})
})
I'm trying to change the font of my entire react-select component (control, drop-down, etc). I'm using material-ui themes, so I tried setting theme:
<Select
theme={theme}
/>
But that didn't work. This also didn't work:
<Select
theme={theme => ({
...theme,
typography: {
...theme.typography,
fontFamily: ["Montserrat", "sans-serif"].join(",")
}
})}
/>
Demo here
I figured out how to do it with styles (demo):
const customStyles = {
container: (provided, state) => ({
...provided,
fontFamily: ["Montserrat", "sans-serif"].join(",")
}),
};
<Select
styles={customStyles}
/>
But it would be nice to use themes, since I already created a theme with my font.
If you take a look at the theme.js file below you will notice that there no font option for now so no way to use this props to achieve what you're looking for.
import type { Theme } from './types';
export const colors = {
primary: '#2684FF',
primary75: '#4C9AFF',
primary50: '#B2D4FF',
primary25: '#DEEBFF',
danger: '#DE350B',
dangerLight: '#FFBDAD',
neutral0: 'hsl(0, 0%, 100%)',
neutral5: 'hsl(0, 0%, 95%)',
neutral10: 'hsl(0, 0%, 90%)',
neutral20: 'hsl(0, 0%, 80%)',
neutral30: 'hsl(0, 0%, 70%)',
neutral40: 'hsl(0, 0%, 60%)',
neutral50: 'hsl(0, 0%, 50%)',
neutral60: 'hsl(0, 0%, 40%)',
neutral70: 'hsl(0, 0%, 30%)',
neutral80: 'hsl(0, 0%, 20%)',
neutral90: 'hsl(0, 0%, 10%)',
};
const borderRadius = 4;
const baseUnit = 4; /* Used to calculate consistent margin/padding on elements */
const controlHeight = 38; /* The minimum height of the control */
const menuGutter = baseUnit * 2; /* The amount of space between the control and menu */
export const spacing = {
baseUnit,
controlHeight,
menuGutter,
};
export const defaultTheme: Theme = {
borderRadius,
colors,
spacing,
};
export type ThemeConfig = Theme | ((theme: Theme) => Theme);