You need 4 colors

2 for text and background(primary & secondary colors). 1 accent color to highlight important elements(number 4 & buttons). And an optional tertiary color to add a bit of personality(the hue slider).

How it works? CodePen

:root {
                --color-primary: hsl(0, 50%, 90%);
                --color-secondary: hsl(0, 50%, 10%);
                --color-tertiary: hsl(60, 80%, 20%);
                --color-accent: hsl(300, 80%, 20%);
            }
        .dark {
                --color-primary: hsl(0, 50%, 10%);
                --color-secondary: hsl(0, 50%, 90%);
                --color-tertiary: hsl(60, 80%, 80%);
                --color-accent: hsl(300, 80%, 80%);
            }

Copy