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).

:root {
        --color-primary: hsl(0, 50%, 90%);
        --color-primary-pre: hsl(0, 50%, 95%);
        --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-primary-pre: hsl(0, 50%, 5%);
        --color-secondary: hsl(0, 50%, 90%);
        --color-tertiary: hsl(60, 80%, 80%);
        --color-accent: hsl(300, 80%, 80%);
    }

Copy