Notes

theme.ts
uhren replika

Introduction Theme switching is an optional but useful feature. It can make our websites flexible and no longer boring. However, this task could be complex because styles may be added in different ways. e.g., SCSS, CSS module, etc.
The purpose of this article is to add the switchable theme for existed Next.js websites.
AgendaArchitectureWorkflowImplementationsAbout this series The target of this series is to build a ReactJS single page application(SPA) with Django API server and deploy on Heroku.
Part 1: Deploy Django application to Heroku and migrate PostgreSQLPart 2: Connect React App with Django AppPart 3: Use JWT with DRF and tests endpoints on Travis-CIPart 4: Create Endpoints to Manipulate ResourcesPart 5.1: Exchange Facebook’s access token to JWT from Django/DRFPart 5.2: Exchange Github’s access token to JWT from Django/DRFPart 6: Create Django Application’s sitemap on Heroku for SEOPart 7: How to Refactor Function Components with HOC?Part 8: Static Rendering with Next.js and Django on HerokuPart 9: Access Redux on the Next.js page-levelPart 10: Improve SEO with Pyppeteer in DjangoPart 11. this articleArchitecture The following diagram shows the libraries and components we need for add the switchable theme.
Redux/RTK For syncing the theme between components, we will need the reactivity provided by Redux global state and React hooks. It means that the user interface should react immediately after the specific theme was used.
We can just assign the global state as the theme parameter of the Theme provider of the styled-component.
There is an article I wrote before for learning Redux RTK.
styled-component The styled-component provides a few important items.
The Theme provider can accept a theme parameterThe Global style is a function to return a style according to the theme parameter The usage for using these items is to wrap components and the Global style with the Theme provider. There is an article I wrote before for learning styled-component.
Higher Order Component (HOC) Consider to the Next.js pages router, we may have several components need to be wrap with the Theme provider and the Global style. We also have to retrieve the global state and uses React hooks in these components.
For the reusing purpose, we can create a component wrapper in the concept of HOC. There is an article I wrote before for learning HOC.
Theme switcher We may need a component to allow users to switch the current theme.
Workflow1. Switch and store the global style When the user switches the theme on the Theme Switcher, the Global theme will be changed with the Redux global state.
Second, we have to store the style in the localStorage for the persistency. The user can still get the style even the tab was closed.
2. Load the stored global style After the component was mounted, it will have to retrieve the theme from the localStorage. And then set the retrieved theme to the Redux store if it got the stored theme.
The Theme switcher also need to load the theme from the Redux store for displaying the current selected theme.
Implementations1. Create the theme template The theme template provides default stylesheets for different themes. In the following example code, we specify the body, icon, and image style for the light and dark theme.
2. Create the Global Style createGlobalStyle is a function to return the real stylesheets and it can override the existed style on components.
3. Update Redux/RTK state and the slice To understand the basic concepts of Redux/RTK, feel free to refer to this article. Here we just have to update the state and slice.
Update stateUpdate slice4. Create the utility for localStorage Create functions for getting and setting items to localStorage.
5. Create the component wrapper There are a few thing we have to do in the component wrapper.
Retrieve the theme from Redux (line 13 ~ line 18)Retrieve the theme from localStorage and set it to the Redux (line 24 ~ line 32)When the Redux state was updated, set the state to the localStorage (line 34 ~ line 38)Wrap components and the Global style with the Theme provider (line 42 ~ line 46)6. Create the Theme switcher component There are a few thing we have to do in the component wrapper.
Retrieve the theme from Redux (line 14 ~ line 18)When the user chooses the specific theme, set it to the Redux (line 39)Reference使用 CreateGlobalStyle 在 React Styled-Components 取代 CSS Reset 與 CSS NormalizeTheming and Theme Switching with React and styled-componentsA Complete Guide to Dark Mode on the WebSummary Thanks for your patient. I am Sean. I work as a software engineer.
This article is my note. Please feel free to give me advice if any mistakes. I am looking forward to your feedback.
The Facebook page for articlesA LaymanA Layman. 81 likes. The page sharing the information about programming languages, algorithm, databases, devops and… www.facebook.com
The latest side project: Daily LearningALayman Daily LearningDaily learning provides articles, challenges, or videos to people who are also self-learner for programming. daily-learning.herokuapp.com
Related topics How to use the two-way binding in Knout.js and ReactJS?
How to use the two-way binding in Knout.js and ReactJS?Components built by different frameworks must have the same action in one website. What we have to realize is how to… medium.com
Learn how to use SignalR to build a chatroom application
Learn how to use SignalR to build a chatroom applicationThe Introduction of SignalR medium.com
My reflection of <Effective SQL>:
How To Design The Data Model? — My reflection of <Effective SQL><Effective SQL: 61 Specific Ways to Write Better SQL> gave me many tips for using the database. medium.com
How To Design The Index? — My reflection of <Effective SQL><Effective SQL: 61 Specific Ways to Write Better SQL> gave me many tips for using the database. medium.com
What if we can’t change the design? — My reflection of <Effective SQL> Part 3<Effective SQL: 61 Specific Ways to Write Better SQL> gave me many tips for using the database. medium.com
IT & Network:
Back to the basic: Introduction to DNSI decided to back to the basic and enhance these bits of knowledge. I also expect that this article can help someone… medium.com
Database:
Learning SQL server part.1 — lock and concurrency in SQL serverEven though I used the SQL server for a long time, I didn’t know it very well. However, I received an alert with the… medium.com
Software testing:
Software testing-Automatic test with Newman medium.com
Debugging:
Service Fabric trouble shooting part.1 — How to install and create Service Fabric cluster?Introduction medium.com
Service Fabric trouble shooting part.2 — How to attach Visual studio code?ASP NET core, Service Fabric medium.com
DevOps:
[DevOps] Introduction to OpserverIntroduction to Opserver
Introductionmedium.com

Website: https://replicauhren.ru