Jairus Joer

Senior Software Engineer & Designer

Exploring

Experiments and other curiosities

Theme Contrast & Palette

While writing the post Demonstrating Software Personalisation, I built these theme components to offer a more interactive and explorable approach to the topic.

Aa
Aa

Changing the theme colour will automatically apply an appropriate contrast color

Code
0
100
200
300
400
500
600
700
800
900
--color-theme-0: oklch(from var(--color-theme-raw) 1.00 calc(c * 0.10) h);
--color-theme-100: oklch(from var(--color-theme-raw) 0.90 calc(c * 0.32) h);
--color-theme-200: oklch(from var(--color-theme-raw) 0.80 calc(c * 0.54) h);
--color-theme-300: oklch(from var(--color-theme-raw) 0.70 calc(c * 0.77) h);
--color-theme-400: oklch(from var(--color-theme-raw) 0.60 calc(c * 0.99) h);
--color-theme-500: oklch(from var(--color-theme-raw) 0.50 calc(c * 0.99) h);
--color-theme-600: oklch(from var(--color-theme-raw) 0.40 calc(c * 0.77) h);
--color-theme-700: oklch(from var(--color-theme-raw) 0.30 calc(c * 0.54) h);
--color-theme-800: oklch(from var(--color-theme-raw) 0.20 calc(c * 0.32) h);
--color-theme-900: oklch(from var(--color-theme-raw) 0.10 calc(c * 0.10) h);

Dot Matrix

I've come to like Bungie's Marathon and its art style, which was surely assisted by the involvement of Kurppa Hosk, a design favourite of mine. What you see here is a customisable approximation of the game's loading animation.

UsageCode