@import '../_variables';

html.dark {
  // brand colors
  --c-brand: #{$brandColorDark};

  // background colors
  --c-bg: #{$bgColorDark};
  --c-bg-light: #{$bgColorLightDark};
  --c-bg-lighter: #{$bgColorLighterDark};
  --c-bg-transparent: #{$bgColorTransparentDark};

  // text colors
  --c-text: #{$textColorDark};
  --c-text-sub: #{$textColorSubDark};

  // border colors
  --c-border: #{$borderColorDark};
  --c-border-sub: #{$borderColorSubDark};

  // code blocks vars
  --code-hl-bg-color: #363b46;
  --inline-code-color: #{$inlineCodeTextDark};
  --inline-code-bg-color: #{$inlineCodeBgDark};

  // image masks
  --image-mask-color: #{$darkColor3};

  // shadows
  --box-shadow: #{$boxShadowDark};
  --box-shadow-hover: #{$boxShadowHoverDark};
  --box-shadow-inset: #{$boxShadowInsetDark};
  --related-post: #{$relatedPostColorDark};
  --footer-color: #{$footerColorDark};
}

// plugin-docsearch
html.dark .DocSearch {
  --docsearch-logo-color: var(--c-text);
  --docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
  --docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d,
    0 2px 2px 0 rgba(3, 4, 9, 0.3);
  --docsearch-key-gradient: linear-gradient(-225deg, #444950, #1c1e21);
  --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5),
    0 -4px 8px 0 rgba(0, 0, 0, 0.2);
}