I'm trying to implement light and dark mode in my code but i got stuck. I have a theme file to global changes and i need to create a button to change the theme when pressed.
My theme file is that:
import { extendTheme } from 'native-base'
const LightTheme = {
mode: 'light',
colors: {
green: {
700: '#006330',
500: '#009649',
},
gray: {
700: '#EDEDED',
600: '#FFFFFF',
500: '#C4C4CC',
400: '#BBBBBB',
300: '#868686',
200: '#686873',
100: '#585860',
},
white: '#FFFFFF',
red: {
500: '#F75A68',
}
},
}
const DarkTheme = {
mode: 'dark',
colors: {
green: {
700: '#008943',
500: '#00E36E',
},
gray: {
700: '#121214',
600: '#202024',
500: '#29292E',
400: '#323238',
300: '#7C7C8A',
200: '#C4C4CC',
100: '#E1E1E6',
},
white: '#FFFFFF',
red: {
500: '#F75A68',
}
},
}
export const THEME = extendTheme({
config: {
initialColorMode: 'light',
},
colors: {
...LightTheme.colors,
modes: {
dark: { ...DarkTheme.colors }
}
},
fonts: {
heading: 'Roboto_700Bold',
body: 'Roboto_400Regular',
text: 'Roboto_300Light',
},
fontSizes: {
xs: 12,
sm: 14,
md: 16,
lg: 18,
xl: 20,
},
sizes: {
14: 56,
33: 148
}
})
What do i need to do to for my button work? I've tried several things and none of them worked
I've tried to do something like this:
const { colorMode, toggleColorMode } = useColorMode();
<Button onPress={toggleColorMode}/>
But didn't work
I'm having the same problem, what solved for me was changing the color mode into another component, for some weird reason you can't access the colorMode info in the App.js, or at least not in the NativeBaseProvider childrens.
Related
I have installed an external library (vuejs-progress-bar) in Quasar and I'm getting an error which says:
boot error: TypeError: Cannot read properties of undefined (reading 'component')
I'm not quite sure what went wrong, here's what I did in my boot file:
import { boot } from "quasar/wrappers";
import { ProgressBar } from "vuejs-progress-bar";
export default boot(async ({ app }) => {
app.use(ProgressBar);
});
here's my progress-bar code (I followed from their docs https://github.com/larsmars/vuejs-progress-bar):
<progress-bar :options="options" value="0" />
script:
export default {
data() {
return {
options: {
text: {
color: "#FFFFFF",
shadowEnable: true,
shadowColor: "#000000",
fontSize: 14,
fontFamily: "Helvetica",
dynamicPosition: false,
hideText: false,
},
progress: {
color: "#2dbd2d",
backgroundColor: "#333333",
inverted: false,
},
layout: {
height: 35,
width: 140,
verticalTextAlign: 61,
horizontalTextAlign: 43,
zeroOffset: 0,
strokeWidth: 30,
progressPadding: 0,
type: "line",
},
},
};
},
methods: {},
created() {},
};
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'm trying to add a custom color:
extend: {
colors: {
'body-color': '#525B73'
}
}
This breaks compilation with an error about built-in Tailwind classes not existing:
The bg-white class does not exist.
Also tried color: { bodyColor: '#525B73' }, to no avail. This error vanishes if I remove my custom color. What's going on?
Below is a simplified version of my config file:
module.exports = {
purge: [
'./components/**/*.vue',
'./layouts/**/*.vue',
'./pages/**/*.vue',
'./plugins/**/*.js'
],
theme: {
fontFamily: {
'intro-black': ['intro-black', 'sans-serif']
},
container: {
maxWidth: {
lg: 'none'
},
},
extend: {
colors: {
'body-color': '#525B73'
},
fontSize: {
'30': '30px'
},
lineHeight: {
'40': '40px'
},
height: {
'60': '60px'
},
margin: {
'100': '100px'
},
padding: {
'40': '40px'
},
borderWidth: {
'6': '6px'
},
zIndex: {
'20000': '20000'
},
boxShadow: {
'25': '0 0 20px rgba(0, 0, 0, 0.25)'
},
borderRadius: {
'8': '8px'
}
}
}
}
EDIT: as per #BoussadjraBrahim's comment I updated to Tailwind 2.x which replaces the main compilation problem with a minor "'body-color' class does not exist" problem.
When you add a custom color it will applied to any colorable property like background, text, border and gradient ..., so if you define a color named body-color it will be available as :
bg-body-color : for background color
text-body-color : for text color
border-body-color : for border color
and so on
I recommend to give an appropriate name like primary or blue-gray instead of body-color
I'm trying to add bottom tab bar in my jhipster ignite application, which uses react-native-navigation v2.
Screens are registered like:
Navigation.registerComponentWithRedux(LAUNCH_SCREEN, () => LaunchScreen, Provider, store)
Where e.g.:
export const LAUNCH_SCREEN = 'nav.LaunchScreen'
And here is the complete navigation:
export const topBar = {
title: {
text: 'MDNGHT',
color: Colors.snow
},
leftButtons: [
{
id: 'menuButton',
icon: Images.menuIcon,
testID: 'menuButton',
color: Colors.snow
}
]
}
export const launchScreenComponent = {
component: {
id: 'id.launch',
name: LAUNCH_SCREEN,
options: {
topBar: topBar,
bottomTab: {
fontSize: 12,
text: 'HOME'
}
}
}}
export const eventsScreenComponent = {
component: {
id: 'id.events',
name: EVENTS_SCREEN,
options: {
topBar: topBar,
bottomTab: {
fontSize: 12,
text: 'EVENTS'
}
}
}
}
export const bottomTabs = {
id: 'bottomTabs',
children: [
{
stack: {
children: [
launchScreenComponent
]
}
},
{
stack: {
children: [
eventsScreenComponent
]
}
}
],
options: {
bottomTabs: {
activeTintColor: 'red',
inactiveTintColor: 'grey',
backgroundColor: '#121212',
borderTopWidth: 0,
shadowOffset: {width: 5, height: 3},
shadowColor: 'black',
shadowOpacity: 0.5,
elevation: 5
}
}
}
export const appStack = {
root: {
sideMenu: {
left: {
component: {
name: DRAWER_CONTENT
}
},
center: {
bottomTabs: bottomTabs
}
}
}
}
Navigation.events().registerAppLaunchedListener(() => {
Navigation.setDefaultOptions({
topBar: {
topBar: {
title: {
color: Colors.snow
}
},
backButton: {
showTitle: false,
testID: 'backButton',
icon: Images.chevronLeftIcon,
color: Colors.snow,
iconColor: Colors.snow
},
background: {
color: Colors.background
}
},
sideMenu: {
left: {
enabled: false
}
}
})
Navigation.setRoot(appStack)
// handle app state and deep links
AppState.addEventListener('change', handleAppStateChange)
Linking.addEventListener('url', handleOpenURL)
})
I don't get any error message, my application just stops after start.
When I put:
stack: {
id: 'center',
children: [launchScreenComponent]
}
Instead of bottomTabs: bottomTabs in appStack, the application works (but without bottom tab bar)
Following the Layout docs from react-native-navigation, you can replace the appStack with a bottomTabs implementation instead of a drawer like below (only one tab configured as example, add another object in root.bottomTabs.children to add another tab).
export const appStack = {
root: {
bottomTabs: {
children: [
{
stack: {
id: 'firstTabStack',
children: [
{
component: {
name: LAUNCH_SCREEN,
options: {
topBar: {
title: {
text: 'Welcome!',
color: Colors.snow
}
}
}
}
}
],
options: {
bottomTab: {
iconColor: 'gray',
textColor: 'gray',
selectedIconColor: 'black',
selectedTextColor: 'black',
text: 'Launch Screen',
testID: 'LAUNCH_SCREEN',
icon: Images.menuIcon
}
}
}
}
]
}
}
}
It actually turns out that it is required to set an icon for each bottom tab, otherwise the app crashes:
bottomTab: {
fontSize: 12,
text: 'HOME'
icon: require('../shared/images/logo.png')
}
This resolves the issue.