/* Dark mode overrides for the Minimal Mistakes CSS in main.css. Activated by setting data-theme="dark" on (see ThemeToggle.astro). */ :root[data-theme='dark'] { color-scheme: dark; } :root[data-theme='dark'] html, :root[data-theme='dark'] body { background-color: #1b1d1f; } :root[data-theme='dark'] body { color: #d8dadd; } :root[data-theme='dark'] a { color: #6ec8e0; } :root[data-theme='dark'] a:visited { color: #9ad4e4; } :root[data-theme='dark'] a:hover { color: #bfe6f2; } :root[data-theme='dark'] figcaption { color: #a7abae; } :root[data-theme='dark'] figcaption a:hover { color: #bfe6f2; } :root[data-theme='dark'] hr { border-top-color: #33373a; } :root[data-theme='dark'] blockquote { border-inline-start-color: #6f777d; } /* forms */ :root[data-theme='dark'] form { background-color: #26292c; } :root[data-theme='dark'] form legend, :root[data-theme='dark'] label, :root[data-theme='dark'] input, :root[data-theme='dark'] textarea, :root[data-theme='dark'] select { color: #d8dadd; } :root[data-theme='dark'] input, :root[data-theme='dark'] textarea, :root[data-theme='dark'] select { background-color: #1b1d1f; border-color: #33373a; } :root[data-theme='dark'] .help-block, :root[data-theme='dark'] .help-inline { color: #a7abae; } :root[data-theme='dark'] thead { background-color: #26292c; border-bottom-color: #4a4f53; } :root[data-theme='dark'] table, :root[data-theme='dark'] th, :root[data-theme='dark'] td { border-color: #33373a; } /* buttons */ :root[data-theme='dark'] .btn--inverse { background-color: #26292c; color: #d8dadd; border-color: #33373a; } :root[data-theme='dark'] .btn--inverse:visited { background-color: #26292c; color: #d8dadd; } :root[data-theme='dark'] .btn--inverse:hover { background-color: #33373a; color: #d8dadd; } /* notices / markdown alerts - keep accent hues, darken the fill */ :root[data-theme='dark'] .notice, :root[data-theme='dark'] .markdown-alert { color: #d8dadd; background-color: #2a2d30; } :root[data-theme='dark'] .notice code, :root[data-theme='dark'] .markdown-alert code { background-color: #1b1d1f; } :root[data-theme='dark'] .notice--primary, :root[data-theme='dark'] .markdown-alert-important { color: #d8dadd; background-color: #2c2f33; } :root[data-theme='dark'] .notice--primary code, :root[data-theme='dark'] .markdown-alert-important code { background-color: #24272a; } :root[data-theme='dark'] .notice--info, :root[data-theme='dark'] .markdown-alert-note { color: #d8dadd; background-color: #1c333c; } :root[data-theme='dark'] .notice--info code, :root[data-theme='dark'] .markdown-alert-note code { background-color: #17282f; } :root[data-theme='dark'] .notice--warning, :root[data-theme='dark'] .markdown-alert-warning { color: #d8dadd; background-color: #3b2e19; } :root[data-theme='dark'] .notice--warning code, :root[data-theme='dark'] .markdown-alert-warning code { background-color: #302614; } :root[data-theme='dark'] .notice--success, :root[data-theme='dark'] .markdown-alert-tip { color: #d8dadd; background-color: #1e3220; } :root[data-theme='dark'] .notice--success code, :root[data-theme='dark'] .markdown-alert-tip code { background-color: #192a1b; } :root[data-theme='dark'] .notice--danger, :root[data-theme='dark'] .markdown-alert-caution { color: #d8dadd; background-color: #3a201f; } :root[data-theme='dark'] .notice--danger code, :root[data-theme='dark'] .markdown-alert-caution code { background-color: #2e1a19; } /* masthead / navigation */ :root[data-theme='dark'] .masthead { border-bottom-color: #33373a; } :root[data-theme='dark'] .greedy-nav { background: #1b1d1f; } :root[data-theme='dark'] .greedy-nav a { color: #b7bbbe; } :root[data-theme='dark'] .greedy-nav a:hover { color: #eaf6fa; } :root[data-theme='dark'] .greedy-nav .visible-links a:before { background: #6ec8e0; } :root[data-theme='dark'] .greedy-nav .hidden-links { border-color: #33373a; background: #26292c; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4), 0 2px 10px 0 rgba(0, 0, 0, 0.3); } :root[data-theme='dark'] .greedy-nav .hidden-links a:hover { color: #eaf6fa; background: #33373a; } :root[data-theme='dark'] .greedy-nav .hidden-links::before { border-color: #33373a transparent; } :root[data-theme='dark'] .greedy-nav .hidden-links::after { border-color: #26292c transparent; } :root[data-theme='dark'] .greedy-nav .hidden-links li { border-bottom-color: #33373a; } :root[data-theme='dark'] .toc { color: #b7bbbe; background-color: #26292c; border-color: #33373a; } :root[data-theme='dark'] .toc .active a { background-color: #33373a; color: #eaf6fa; } :root[data-theme='dark'] .toc__menu a { color: #a7abae; border-bottom-color: #33373a; } :root[data-theme='dark'] .toc__menu a:hover { color: #eaf6fa; } /* footer */ :root[data-theme='dark'] .page__footer { color: #a7abae; background-color: #26292c; } :root[data-theme='dark'] .page__footer .fas, :root[data-theme='dark'] .page__footer .fab, :root[data-theme='dark'] .page__footer .far, :root[data-theme='dark'] .page__footer .fal { color: #a7abae; } :root[data-theme='dark'] .social-icons .fas, :root[data-theme='dark'] .social-icons .fab, :root[data-theme='dark'] .social-icons .far, :root[data-theme='dark'] .social-icons .fal { color: #d8dadd; } /* page content */ :root[data-theme='dark'] .page__title a { color: #d8dadd; } :root[data-theme='dark'] .page__content h2 { border-bottom-color: #33373a; } :root[data-theme='dark'] .page__content :not(pre) > code { background: #26292c; } /* author sidebar */ :root[data-theme='dark'] .author__avatar img { border-color: #33373a; } @media (max-width: 63.9375em) { :root[data-theme='dark'] .author__urls { background: #26292c; border-color: #33373a; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4), 0 2px 10px 0 rgba(0, 0, 0, 0.3); } :root[data-theme='dark'] .author__urls::before { border-color: #33373a transparent; } :root[data-theme='dark'] .author__urls::after { border-color: #26292c transparent; } } /* resume / portfolio custom sections */ :root[data-theme='dark'] .result-callout { background-color: rgba(110, 200, 224, 0.1); border-left-color: #6ec8e0; } :root[data-theme='dark'] .result-callout::before { color: #6ec8e0; } :root[data-theme='dark'] .tagButton { background: #2a2d30; color: #d8dadd; border-color: #3a3e42; } :root[data-theme='dark'] .tagButton:hover { background: #33383c; color: #eaf6fa; border-color: #6ec8e0; } :root[data-theme='dark'] .tagButton.tagButtonSelected { background: #6ec8e0; color: #1b1d1f; border-color: #6ec8e0; box-shadow: 0 1px 3px rgba(110, 200, 224, 0.35); } :root[data-theme='dark'] .tagButton.tagButtonSelected:hover { background: #8fd6ea; border-color: #8fd6ea; } :root[data-theme='dark'] .arrow::after, :root[data-theme='dark'] .arrow .arrow::after { border-color: #d8dadd; } :root[data-theme='dark'] .arrow::before, :root[data-theme='dark'] .arrow .arrow::before { background-color: #d8dadd; } @media (min-width: 64em) { :root[data-theme='dark'] .sidebar h2, :root[data-theme='dark'] .sidebar h3 { color: #d8dadd; } }