I'm getting some weird competing colors as you can see in the image. It only happens on dark mode using a theme provider.

The top color is hsl(220,84%,5%)
Which is my background color in my globals.css
The bottom color is hsl(227,100%,5%)
Which does not exist at all in the project.

It also only happens if I have any content on the page ?

Tailwind config colors:

colors: {
                border: "hsl(var(--border))",
                input: "hsl(var(--input))",
                ring: "hsl(var(--ring))",
                background: "hsl(var(--background))",
}

globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root { ... }

    .dark {
        --background: 222.2 84% 4.9%;
        --foreground: 210 40% 98%;

            ...
    }
}

@layer base {
    * {
        @apply border-border;
    }
    body {
        @apply bg-background text-foreground;
    }
}

Again the background up top is what background is set there, and then the other part is something random? There is no elements that could be changing it because no element is at the split other than the main body