Styling and Theming

We are basically done at this point — the application is functional… it’s just not particularly good looking.

Making the application pretty was not really one of our goals for this module. Some of the later modules get into the styling side of things a bit more (including creating themes with Angular Material), but for now we are just going to set up some basic CSS styles to make this application look decent.

Global Styles

First, we are going to add some global styles to our styles.scss file. Styles we add here will apply to our entire application.

Add the following to src/styles.scss:

:root {
  --color-primary: #32db64;
  --color-secondary: #2dd36f;
  --color-dark: #1c1d3b;
  --color-light: #ffffff;
}

html {
  height: 100%;
}

body {
  margin: 0;
  height: 100%;
  background: var(--color-dark);
  font-family: "Roboto", sans-serif;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem;
  background: var(--color-light);
}

section {
  height: 100%;
  padding: 2rem;
  background: var(--color-primary);
}

button {
  height: 30px;
}

.dialog-container {
  position: absolute !important;
  background: var(--color-dark);
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

Most of this is reasonably basic CSS, but there are a couple of things worth pointing out here. First is our use of CSS variables: