Complete Dark & Light Theme in a React Native App (Multiple Switching Methods & Saving Theme)
12.2 هزار بار بازدید -
2 سال پیش
-
In this video, we look
In this video, we look at implementing dark and light theme mode in a full React Native application using different switching methods.
GET SOURCE CODE 📀⬇️
🔴 Resulting Source Code - https://bit.ly/rn-dark-light-theme-pr...
🔴 All Other Source Codes & Support - https://bit.ly/ttpc-monthly-access
NOTES
🔵 We ensure consistent theme colors in all components and also status bar based on selected theme.
🔵 We look at switching theme using a toggle switch.
🔵 We look at switching theme using theme select buttons.
🔵 We look at switching theme using based on user system preference.
🔵 We look at storing the selected theme in memory for next app start.
🔵 The tools we'll be using include React Context, Async Storage, React Native Switch, etc.
VIDEO RESOURCES
🟢 News Feed Project Used - React Native Dark & Light Theme Project
🟢 React Context - https://reactjs.org/docs/context.html
🟢 Async Storage - https://react-native-async-storage.gi...
LET’S WORK
👋 You can reach me at - https://www.tothepointcode.com/contact
CHECK OUT THESE HELPFUL TUTORIALS
🟡 Complete React and Node JS Login System - Login Page with React and Node Js + E...
🟡 Node JS Projects - Node JS Starter Guide
🟡 React Native Projects - React Native Starter Guide
🟡 Publishing Expo React Native App to Play Store Journey
- Publish Expo React Native App to Play...
🟡 PHP Project
- PHP CRUD Application ft MySQL, JQuery
TOOLS USED
🟠 Tool for my thumbnail & images - https://partner.canva.com/ttpc
🟠 Cheap website domain name - https://namecheap.pxf.io/ttpc
FOLLOW US ON:
🔵 Twitter - Twitter: ToThePointCode
🔵 Instagram - https://www.instagram.com/invites/con...
🔵 GitHub - https://github.com/tothepointcode
🔵 YouTube - @tothepointcode
CHAPTERS
00:00 What will be done
00:47 Required Color Preparations
01:58 Updating Components with Initial Static Theme Colors
02:59 Important Styling Pattern Used
03:18 Continuation of Updating Components with Initial Static Theme Colors
08:45 Setting up Theme Context for global theme accessibility
12:48 Updating Components with Theme Colors from Context
18:54 Changing Theme with Toggle Switch
20:38 Setting Theme with Theme Select Buttons
22:40 Setting Theme Based on Device System Theme Mode
27:28 App.json Settings Needed for System Theme in Development
28:46 Constantly Monitoring System for Theme Changes
31:16 Saving Selected Theme for when App Starts Preparations
32:22 Setting up Async Storage Helper functions
35:26 Storing and Fetching Theme using Async Storage
39:00 Fetching Theme Before App Starts with Splash Screen
41:28 Final Theme Test
#tothepointcode #darktheme #reactnative
GET SOURCE CODE 📀⬇️
🔴 Resulting Source Code - https://bit.ly/rn-dark-light-theme-pr...
🔴 All Other Source Codes & Support - https://bit.ly/ttpc-monthly-access
NOTES
🔵 We ensure consistent theme colors in all components and also status bar based on selected theme.
🔵 We look at switching theme using a toggle switch.
🔵 We look at switching theme using theme select buttons.
🔵 We look at switching theme using based on user system preference.
🔵 We look at storing the selected theme in memory for next app start.
🔵 The tools we'll be using include React Context, Async Storage, React Native Switch, etc.
VIDEO RESOURCES
🟢 News Feed Project Used - React Native Dark & Light Theme Project
🟢 React Context - https://reactjs.org/docs/context.html
🟢 Async Storage - https://react-native-async-storage.gi...
LET’S WORK
👋 You can reach me at - https://www.tothepointcode.com/contact
CHECK OUT THESE HELPFUL TUTORIALS
🟡 Complete React and Node JS Login System - Login Page with React and Node Js + E...
🟡 Node JS Projects - Node JS Starter Guide
🟡 React Native Projects - React Native Starter Guide
🟡 Publishing Expo React Native App to Play Store Journey
- Publish Expo React Native App to Play...
🟡 PHP Project
- PHP CRUD Application ft MySQL, JQuery
TOOLS USED
🟠 Tool for my thumbnail & images - https://partner.canva.com/ttpc
🟠 Cheap website domain name - https://namecheap.pxf.io/ttpc
FOLLOW US ON:
🔵 Twitter - Twitter: ToThePointCode
🔵 Instagram - https://www.instagram.com/invites/con...
🔵 GitHub - https://github.com/tothepointcode
🔵 YouTube - @tothepointcode
CHAPTERS
00:00 What will be done
00:47 Required Color Preparations
01:58 Updating Components with Initial Static Theme Colors
02:59 Important Styling Pattern Used
03:18 Continuation of Updating Components with Initial Static Theme Colors
08:45 Setting up Theme Context for global theme accessibility
12:48 Updating Components with Theme Colors from Context
18:54 Changing Theme with Toggle Switch
20:38 Setting Theme with Theme Select Buttons
22:40 Setting Theme Based on Device System Theme Mode
27:28 App.json Settings Needed for System Theme in Development
28:46 Constantly Monitoring System for Theme Changes
31:16 Saving Selected Theme for when App Starts Preparations
32:22 Setting up Async Storage Helper functions
35:26 Storing and Fetching Theme using Async Storage
39:00 Fetching Theme Before App Starts with Splash Screen
41:28 Final Theme Test
#tothepointcode #darktheme #reactnative
2 سال پیش
در تاریخ 1401/08/09 منتشر شده
است.
12,204
بـار بازدید شده