Стилізація overscroll для macOS

На macOS є чудовий візуальний ефект оверскрола в браузерах. Але він виглядає не дуже красиво, якщо сайт, або тільки хедер та футер мають темний фон. Зробимо потрібний фон в ціх областях за межамами документа наступним чином:

1. Для Safari підійде беграунд для тега html:

html {
  backgroud: #16342E;
}

2. Для Chrome треба додати в head метатег theme-color:

html {
  <meta name="theme-color" content="#16342E" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#16342E" media="(prefers-color-scheme: dark)">
}

3. Якщо фон підвала відрізняється, то додаємо до body псевдоелемент after:

:after {
        content: '';
        position: fixed;
        top: 50%;
        right: -50%;
        bottom: -50%;
        left: -50%;
        z-index: -1;
        background: #0A2923;
    }