Other theme changes

Global styling

If you want more control over global styling of the viewer, besides changing colors and updating the font, feel free to add custom CSS to src/theme.scss.

Note that, since this project uses Tailwind CSS, you're free to make use of Tailwind's @apply directives rather than writing custom CSS, though both will work identically.

// Making use of Tailwind's @apply directives
.clickable {  
	@apply underline decoration-slate-300 cursor-pointer;  
}

// Using plain CSS
.clickable {
	text-decoration-line: underline;
	text-decoration-color: #cbd5e1;
	cursor: pointer;
}

Component styling

To change the appearance of specific (sub-)sections of the viewer, you might need to style individual Angular components, which can be done in the component's .scss file.

Note that in Angular, component CSS is encapsulated by default, meaning styling applied to an individual component does not affect the rest of the application.

As an example, in the components/home-intro component, paragraph styling (defined in home-intro-component.scss) is only applied to that particular component.

Tip

See the Style scoping section of Angular's styling guide for changing default component view encapsulation.