MediaWiki:Gadget-DarkModeSwitch.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

.flw-theme-widget-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flw-theme-widget-container > * {
  flex: none;
}

.flw-theme-icon {
  fill: #266666;
  fill: var(--main-link-color, #266666);
}

.flw-theme-icon-dark {
  filter: grayscale(1);
}
[data-flw-theme='dark'] .flw-theme-icon-bright {
  filter: grayscale(1);
}
[data-flw-theme='dark'] .flw-theme-icon-dark {
  filter: none;
}

.flw-theme-toggle.oo-ui-toggleSwitchWidget {
  background-color: #ded4c4;
  background-color: var(--box-bg-color, #ded4c4);
  border-color: #3a3a3a;
  border-color: var(--heading-underline-color, #3a3a3a);
}

.flw-theme-toggle.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled
  .oo-ui-toggleSwitchWidget-grip {
  background-color: #266666;
  background-color: var(--main-link-color, #266666);
  border-color: #3a3a3a;
  border-color: var(--heading-underline-color, #3a3a3a);
}

.flw-theme-toggle.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on {
  background-color: #10140f;
  background-color: var(--box-bg-color, #10140f);
  border-color: #42686b;
  border-color: var(--heading-underline-color, #42686b);
}

.flw-theme-toggle.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on
  .oo-ui-toggleSwitchWidget-grip {
  background-color: #84d2d2;
  background-color: var(--main-link-color, #84d2d2);
  border-color: #42686b;
  border-color: var(--heading-underline-color, #42686b);
}

.flw-theme-toggle.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:focus {
  border-color: #266666;
  border-color: var(--main-link-color, #266666);
  box-shadow: inset 0 0 0 1px #266666;
  box-shadow: inset 0 0 0 1px var(--main-link-color, #266666);
}

.flw-theme-toggle.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover {
  background-color: #f5e9d6;
  background-color: var(--box-bg-hover-color, #f5e9d6);
  border-color: #42686b;
  border-color: var(--heading-underline-color, #42686b);
}

.flw-theme-toggle.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:focus:before {
  border: 0;
}

.flw-theme-toggle.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active,
.flw-theme-toggle.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:hover,
.flw-theme-toggle.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:focus,
.flw-theme-toggle.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:active,
.flw-theme-toggle.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:active:hover,
.flw-theme-toggle.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:active:focus {
  background-color: #266666;
  border-color: #a8f6f6;
  box-shadow: inset 0 0 0 1px #266666;
}

.flw-theme-toggle.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active
  .oo-ui-toggleSwitchWidget-grip,
.flw-theme-toggle.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:hover
  .oo-ui-toggleSwitchWidget-grip,
.flw-theme-toggle.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:focus
  .oo-ui-toggleSwitchWidget-grip,
.flw-theme-toggle.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:active
  .oo-ui-toggleSwitchWidget-grip,
.flw-theme-toggle.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:active:hover
  .oo-ui-toggleSwitchWidget-grip,
.flw-theme-toggle.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:active:focus
  .oo-ui-toggleSwitchWidget-grip {
  background-color: #a8f6f6;
  border-color: #a8f6f6;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}