Ankhena

.element {
   color: var(--color);

   body[theme="dark"] & {
      --color: white;
   }

   body[theme="light"] & {
      --color: #333333;
   }
}

<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>new window.VConsole();</script>

.div {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 30px;
}
.div::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border: 20px solid red;
  border-color: red red green green;
  border-radius: 100%;
  transform: rotate(45deg);
  pointer-events: none;
}

:root {
  --small-screen: 500px;
}
.sidebar { background: red; }

@media (max-width: var(--small-screen)) {
  :root {
    --small-screen: 1000px;
  }
  .sidebar { background: green; }
}

<div>
<div class="element1">
<div class="element2">
</div>

<div>
<div class="element1">
<div></div>
<div></div>
<div></div>
<div class="element2">
</div>

<filter id="filter0_b_601_49" x="93.425" y="129.676" width="237" height="445.648" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
      <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
-      <feGaussianBlur in="BackgroundImage" stdDeviation="25"></feGaussianBlur>
+      <feGaussianBlur in="BackgroundImageFix" stdDeviation="25"></feGaussianBlur>
      <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_601:49"></feComposite>
      <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_601:49" result="shape"></feBlend>
    </filter>