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