style-dark-mode.scss (2518B)
1 /* OS dark theme preference */ 2 @media only screen { 3 4 .is-dark-theme.is-dark-theme { 5 --global--color-background: var(--global--color-dark-gray); 6 --global--color-primary: var(--global--color-light-gray); 7 --global--color-secondary: var(--global--color-light-gray); 8 --button--color-text: var(--global--color-background); 9 --button--color-text-hover: var(--global--color-secondary); 10 --button--color-text-active: var(--global--color-secondary); 11 --button--color-background: var(--global--color-secondary); 12 --button--color-background-active: var(--global--color-background); 13 --global--color-border: #9ea1a7; 14 15 /* Block: Table */ 16 --table--stripes-border-color: rgba(240, 240, 240, 0.15); 17 --table--stripes-background-color: rgba(240, 240, 240, 0.15); 18 } 19 20 .is-dark-theme img { 21 filter: brightness(.85) contrast(1.1); 22 } 23 24 .respect-color-scheme-preference.is-dark-theme body { 25 background-color: var(--global--color-background); 26 } 27 28 #dark-mode-toggler { 29 cursor: pointer; 30 display: flex; 31 align-items: center; 32 justify-content: center; 33 font-size: var(--global--font-size-xs); 34 padding: 0.5em; 35 min-height: 44px; // A11y requirement for minimum clickable area. 36 min-width: max-content; 37 border: 2px solid currentColor; 38 box-shadow: none; 39 background: var(--button--color-text); 40 color: var(--button--color-background); 41 z-index: 9998; 42 43 .no-js & { 44 display: none; 45 } 46 47 &.fixed-bottom { 48 position: fixed; 49 bottom: 5px; 50 right: 5px; 51 transition: bottom 0.5s; 52 53 &.hide:not(:focus) { 54 bottom: -80px; 55 } 56 } 57 58 &.relative { 59 position: absolute; 60 height: 44px; 61 top: calc(2.4 * var(--global--spacing-vertical) - 44px); 62 right: calc(50vw - var(--responsive--alignwide-width) / 2 - 0.5em); 63 64 .admin-bar & { 65 top: calc(2.4 * var(--global--spacing-vertical) - 44px + 32px); 66 67 @media only screen and (max-width: 782px) { 68 top: calc(2.4 * var(--global--spacing-vertical) - 44px + 46px); 69 } 70 71 @media only screen and (max-width: 481px) { 72 top: calc(2.4 * var(--global--spacing-vertical) - 44px + 26px); 73 } 74 } 75 76 ~ nav { 77 78 body:not(.primary-navigation-open) & { 79 @media only screen and (max-width: 481px) { 80 top: calc(44px + 44px); 81 } 82 } 83 } 84 } 85 86 .primary-navigation-open & { 87 display: none; 88 } 89 90 &:hover, 91 &:focus { 92 color: var(--button--color-background-active); 93 border: 2px solid var(--button--color-text-active); 94 background-color: var(--button--color-text-active); 95 } 96 97 .is-IE & { 98 display: none; 99 } 100 } 101 }