body { --s: 3em; /* control the size*/ --c1: var(--pattern1); --c2: var(--pattern2); --_g: #0000 24%, var(--c2) 26% 34%,var(--c1) 36% 44%, var(--c2) 46% 54%,var(--c1) 56% 64%, var(--c2) 66% 74%,#0000 76%; background: radial-gradient(100% 100% at 100% 0,var(--_g)), radial-gradient(100% 100% at 0 100%,var(--_g)), radial-gradient(var(--c2) 14%,var(--c1) 16%) calc(var(--s)/2) calc(var(--s)/2); background-size: var(--s) var(--s); } :root { --mainbg: #0A0005; --mainfg: #B0B0A0; --altbg: #102; --link1: #A1C; --link2: #70A; --link3: #82B; --bodybg: #000; --accent1: #205; --accent2: #517; --button1: #200520; --button2: #300A30; --codefg: #ccc; --codebg: #000; --pattern1: #20000F; --pattern2: #000010; } @media (prefers-color-scheme: light) { :root { --mainbg: #B0B0A0; --mainfg: #0F0008; --altbg: #98A; --link1: #305; --link2: #70A; --link3: #406; --bodybg: #000; --accent1: #84B; --accent2: #206; --button1: #A6A; --button2: #C4C; --codefg: #000; --codebg: #ccc; } }