Materialize

Initial State

I am going to focus on the Posts list as it has a lot of the elements that I am concerned with. Right now it looks like a static website. It’s very flat and uses elements and design principles from a long time ago.

Adding Cards

The first thing I wanted to add was card layouts.

I added a mixin called material-card that I can add to an element to basically “cardify” it (super technical term).

@mixin material-card() {
    border-radius: $border-radius;
    padding: 0.5em 1em 1em 1em;
    margin-bottom: 1em;
    background-color: var(--card-color);
    h1, h2, h3, h4, h5, h6 {
        background-color: var(--card-color);
    }
}

I think it looks alright, but still feels flat.

Adding Shadows

To make the cards pop, I created a mixin called shadow

@mixin shadow() {
    box-shadow: 0 3px 6px $img-shadow-color, 0 3px 6px $img-shadow-color2;
}

and added it to the material-card mixin

@mixin material-card() {
    @include shadow;
    border-radius: 0.5rem;
    ...
}

Now it looks more like how I wanted

Theme Colors

The default theme for my site is always going to be Dark. I plan on trying to make it look good for light theme as well, but it’s going to be the secondary focus.

The main guide for colors I was looking at was this one.

Base Colors

They suggest using a background color of #121212 which is really dark, and they in fact don’t use that on their own site… so I decided to go a bit lighter and use #212121.

The guidelines also talks about how using a lighter shade in dark mode to show a higher layer. To get this lighter shade, you overlay the color with white at a low % opacity.

Here is a quick table

I then calculated the color of the overlays and came up with these.

--bg-color: #212121;
--card-color: #252525;
--card-color-2: #282828;
--card-color-3: #2a2a2a;

Here is an example of the different colors overlapping.

Font Colors

Next was the font color. From the Guidelines.

When light text appears on dark backgrounds (shown here as white on black) it should use the following opacity levels: High-emphasis text has an opacity of 87% Medium-emphasis text and hint text have opacities of 60% Disabled text has an opacity of 38%

So I added some Opacities that I will use on the font colors (looking at their CSS they have tweaked 60% -> 54%)

$text-full: 1;
$text-high: 0.87;
$text-low: 0.54;
$text-disabled: 0.38;

And then used them like this around my CSS.

color: rgba(var(--font-color), $text-high);

And here is the result. Top is all the same level. Bottom has $text-full for the title, $test-high for the text and $text-low for the meta data.

It’s subtle but I think it looks good.

Accent Color

They suggest that when doing an Accent/Primary color, you use a color with less saturation (lower tone), when using a dark theme.

The color I was using was #63ba95, so I plugged that into a tool to get some values. It seemed super imprecise on all the tools figuring out the tone and adjusting it, so I just played around with a few and landed on:

//Light Theme
--accent-color: #00ad69;

//Dark Theme
--accent-color: #56C696;

Another subtle change that I don’t notice too much, but it’s more inline with their guidelines so 🤷

Other Changes

I’ve gone around and added some shadows (including some text) to help make it feel less flat.

Overall I am very happy with these few changes and only took some CSS tweaks and minor restructure, which I wanted to do anyways for maintainability.