Application theme
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the Fullstack React with TypeScript Masterclass course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Fullstack React with TypeScript Masterclass with a single-time purchase.
[00:00 - 00:07] Application theme. Great, now it's time to create a theme for our application. Create a new file, shared, theme.
[00:08 - 00:15] Define an expert const, theme. Expert const, theme. It will have fonts and colors, fields, fonts.
[00:16 - 00:26] Here we'll describe the basic and accent fonts and colors. Our basic color is going to be Helvetica or just Sans Serif as a fallback.
[00:27 - 00:32] The accent font will be permanent. Marker, as a fallback we'll just use generic cursive.
[00:33 - 00:51] Now two colors. We'll have orange, F4A, E40, blue, 38, AF5, 38, 7, AF5, and pink, EB5, 783. Then let's create the global style for all the pages.
[00:52 - 01:09] To do this we'll define the main theme props that will be used in the generic function create global style. Expert, type, main, theme. Props, it is theme props from styled components where we pass type of theme as the type argument.
[01:10 - 01:26] If we check the type of theme it will be an object containing fonts, basic, accent, and colors, orange, blue, pink. Define an expert that global style, expert const, global, style, create global, style with the main, theme props.
[01:27 - 01:33] Import create global style from styled components. Now we find the global styles. Here we have the style for the body.
[01:34 - 01:53] We'll reset the margins, set the font family to basic font from the theme, which is Helvetica or Sans Serif, and specify the fonts moving. Then for all the elements, and thereafter and before, should the elements, we'll define box sizing, border box, so that it's easier to use them in the layout and specify their sizes.
[01:54 - 02:06] Define the styles for the headers. For all the levels of the headers, we reset the margin. Set the link color to blue from the theme, and link hover color to pink from the theme.
[02:07 - 02:20] Also define the style for the main element. You should have padding and min height equal to screen height minus 50 pixels. From now on, we'll focus on components and integration with next rather than styles.
[02:21 - 02:28] You can find all styles in the source code attached to this lesson, or in the text version of this lesson below this video.