I use NativeBase Input Component and Costume Theme, I tried to change the font size of the input component in my costume theme I already tried to change it in the following examples, but it doesn't change.
How can I change the font size of the input component in my costume theme?
Example 1:
const themeOne = extendTheme({
components: {
Input: {
baseStyle: {
style: { color: "white", fontSize: "20" },
},
},
},
});
Example 2:
const themeOne = extendTheme({
components: {
Input: {
baseStyle: {
style: { color: "white"},
fontSize: "20",
},
},
},
});
You can use defaultProps. Read more about customizing Input component.
const theme = extendTheme({
components: {
Input: {
baseStyle: {
color: 'red.400',
},
defaultProps: { size: '2xl' },
},
},
});
Related
I really struggle with this simple thing.
By default the button color is primary.600 which is not the real primary color. So I just want it to be primary.400 (the real primary).
As there is nearly no documentation on this and to my regret no IDE auto-completion with typescript, I am asking your lights on how to solve the problem
Here is what I have tried so far:
export const theme = extendTheme({
components: {
Button: {
// I tried this after checking directly in ts file for extendTheme implementation
baseStyle: () => ({
bg: 'red.500',
backgroundColor: 'red.500',
})
// as well as
baseStyle: {
bg: 'red.500',
backgroundColor: 'red.500',
}
// also tried with hex colors with no success
},
// Also tried the code in this example: https://github.com/GeekyAnts/NativeBase/blob/v3.1.0/src/theme/components/button.ts#L72 with no success
variants: {
solid(props: Dict) {
const { colorScheme: c } = props;
let bg = `${c}.400`
bg = mode(bg, `${c}.400`)(props);
if (props.isDisabled) {
bg = mode(`muted.300`, `muted.500`)(props);
}
const styleObject = {
_web: {
outlineWidth: 0,
},
bg,
_hover: {
bg: mode(`${c}.600`, `${c}.500`)(props),
},
_pressed: {
bg: mode(`${c}.700`, `${c}.600`)(props),
},
};
return styleObject;
}
}
});
Also tried the code in this example: https://github.com/GeekyAnts/NativeBase/blob/v3.1.0/src/theme/components/button.ts#L72 with no success
As far as I can tell, there is no way to define the specific color, only a colorScheme. This may be because the button as designed in NativeBase relies on a set of colors, not a single one (normal, disabled, hovering, pressed, etc.).
That being said I can see two approaches to achieving your goal.
define a custom color scene and connect it to the button in the theme configuration:
const theme = extendTheme({
colors: {
custom: {
50: '#ecfeff',
100: '#67e8f9',
200: '#22d3ee',
300: '#06b6d4',
400: '#0891b2',
500: '#0e7490',
600: '#155e75',
700: '#164e63',
800: '#174e63',
900: '#184e63',
},
},
components: {
Button: {
defaultProps: {
colorScheme: 'custom',
},
},
},
});
Simply override the primary theme (this could of course have side effects if you use the primary color in other components)
const theme = extendTheme({
colors: {
primary: {
50: '#ecfeff',
100: '#67e8f9',
200: '#22d3ee',
300: '#06b6d4',
400: '#0891b2',
500: '#0e7490',
600: '#155e75',
700: '#164e63',
800: '#174e63',
900: '#184e63',
},
},
});
baseStyle: {
rounded: 'md',
bg: '#ffcc00',
backgroundColor: '#fc0',
},
Using bg and backgroundColor seems to work
I would like to add some custom colors in my theme, I'm new in React Native but I don't find something related about how to do it.
import { DefaultTheme } from 'react-native-paper';
const LightTheme: ReactNativePaper.Theme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
accent: '#6A148E',
primary: '#6A148E',
background: '#FFFFFF',
placeholder: '#666666',
error: '#EB0043',
text: '#000000',
disabled: '#EAEAEA',
onSurface: '#AB70EB',
myColor: '#464646',
},
fonts: {
...DefaultTheme.fonts,
},
animation: {
...DefaultTheme.animation,
},
};
export default LightTheme;
Can you help me? thank you
You can add them this way:
declare a global override
declare global {
namespace ReactNativePaper {
interface ThemeColors {
//Add your colors here
myColor: string;
}
}
}
//Your main theme
const myLightTheme: ReactNativePaper.Theme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
accent: '#6A148E',
primary: '#6A148E',
background: '#FFFFFF',
placeholder: '#666666',
error: '#EB0043',
text: '#000000',
disabled: '#EAEAEA',
onSurface: '#AB70EB',
},
fonts: {
...DefaultTheme.fonts,
},
animation: {
...DefaultTheme.animation,
},
};
//Combine them
const LightTheme = {
...myLightTheme
colors: {
...myLightTheme
myColor: "#333444"
},
};
//Export it
export default LightTheme;
There is probably a better way to combine the types, but this works.
You can find more about this here, under typescript section: https://callstack.github.io/react-native-paper/theming.html
I have upgraded to Tailwind 3 and am using Laravel 8. My tailwindconfig.js is below. When I try to use one of the newer colors (e.g., slate), it is black. I compiled with Laravel Mix, which has not reported any errors.
const defaultTheme = require("tailwindcss/defaultTheme");
const colors = require("tailwindcss/colors");
module.exports = {
content: [
"./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
"./storage/framework/views/*.php",
"./resources/views/**/*.blade.php",
"./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
],
theme: {
extend: {
fontFamily: {
sans: ["Nunito", ...defaultTheme.fontFamily.sans],
},
colors: {
green: colors.emerald,
yellow: colors.amber,
purple: colors.violet,
},
},
},
plugins: [
require("#tailwindcss/forms"),
require("#tailwindcss/aspect-ratio"),
require("#tailwindcss/typography"),
],
};
Are you run npm run dev to push the new generated assets to the public folder?
You've placed the colors at the wrong position in your code:
theme: {
colors: {
transparent: 'transparent',
current: 'currentColor',
green: colors.emerald,
yellow: colors.amber,
purple: colors.violet,
},
extend: {
fontFamily: {
sans: ["Nunito", ...defaultTheme.fontFamily.sans],
},
},
},
I'm trying to develop the front end of an application and I wanted to theme some boxes.
I pulled an example from here:
// theme.js
import { extendTheme } from "#chakra-ui/react"
const theme = extendTheme({
components: {
Button: {
// 1. We can update the base styles
baseStyle: {
fontWeight: "bold", // Normally, it is "semibold"
},
// 2. We can add a new button size or extend existing
sizes: {
xl: {
h: "56px",
fontSize: "lg",
px: "32px",
},
},
// 3. We can add a new visual variant
variants: {
"with-shadow": {
bg: "red.400",
boxShadow: "0 0 2px 2px #efdfde",
},
// 4. We can override existing variants
solid: (props) => ({
bg: props.colorMode === "dark" ? "red.300" : "red.500",
}),
},
},
},
})
export default theme
and adapted it to this test-code
const theme = extendTheme({
components: {
Box: {
// 1. We can update the base styles
baseStyle: {
},
// 2. We can add a new button size or extend existing
sizes: {
},
// 3. We can add a new visual variant
variants: {
Mini: {
fontWeight: "bold", // Normally, it is "semibold"
textDecoration: "underline",
boxShadow: "0px 30px 5px -20px rgba(0,0,0,0.75)"
}
},
},
},
})
The idea is that I can say <Box variant="Mini">, but that's not actually working. None of the styles have any affect on the box or it's content.
If I change Box: to Text: and add a Text element <Text variant="Mini">test</Text>, the styles are applied. It's also not working for Grid but does for Button
What am I doing wrong?
I do know that Box has a boxShadow property, but it's very limited.
I still haven't figured out how to modify Box with CSS, partly because the answer I'm about to give doesn't list a file for Box.
There's a note on the page
If you're curious as to what component styles you can override, please reference the default component style files.
When I wanted to modify Drawer, I found the same issue. I went to that link and opened drawer.ts. In there I found this function
const baseStyle: PartsStyleFunction<typeof parts> = (props) => ({
overlay: baseStyleOverlay,
dialogContainer: baseStyleDialogContainer,
dialog: baseStyleDialog(props),
header: baseStyleHeader,
closeButton: baseStyleCloseButton,
body: baseStyleBody,
footer: baseStyleFooter,
})
Which gives me some useful keys. I then found of I modified my theme styles like so, I could modify facets as expected.
import { extendTheme } from '#chakra-ui/react';
let theme = extendTheme({
components: {
Drawer: {
baseStyle: {
dialog: {
bg: "blue",
},
closeButton: {
bg: "hotpink",
},
header: {
bg: "red",
},
},
},
}
});
read the documentation in layer styles, i had the same problem with Grid component and also tried the same as you, thanks for the answer
https://chakra-ui.com/docs/theming/component-style#usestyleconfig-api
https://chakra-ui.com/docs/features/text-and-layer-styles
Im new to react native and react native navigation (v2) and been struggling with implementing a top nav button i.e. getting the top nav to show.
I wish to add a top bar with a button that can trigger the side drawer but cannot work out how to get the top nav to show.
Here is my working config of the bottom tabs and side draw:
const mainTabs = async () => {
Navigation.setRoot({
root: {
sideMenu: {
left: {
component: {
name: 'foo.SideDrawer',
},
},
center: {
id: 'MY_STACK',
bottomTabs: {
children: [
{
component: {
name: 'foo.HomeScreen',
options: {
bottomTab: {
fontSize: 12,
text: 'Home',
icon: await Icon.getImageSource("home", 30)
}
}
},
},
{
component: {
name: 'foo.ProfileScreen',
options: {
bottomTab: {
text: 'Profile',
fontSize: 12,
icon: await Icon.getImageSource("person", 30)
}
}
},
}
]
}
}
}
}
})
};
Can anyone advise where the top bar and button config should go?
--
EDIT 1 - Home screen component:
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
class HomeScreen extends Component {
static get options() {
return {
topBar: {
title: {
text: 'Home',
},
leftButtons: [
{
icon: require('../../assets/signin.png'),
text: 'Button one',
id: 'homeButton',
},
],
},
};
}
render () {
return (
<View style={styles.container}>
<Text>Home Screen</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F0EFE8'
}
})
export default HomeScreen;
You add this static function in your component
export default class HomeScreen extends Component {
static get options() {
return {
topBar: {
title: {
text: 'Home',
},
leftButtons: [
{
icon: require('../../../assets/icons/icon.png'),
id: 'homeButton',
},
],
},
};
}
}
and here you find all needed configs https://wix.github.io/react-native-navigation/#/docs/topBar-buttons