Skip to content

OneDrive After Dark by stamminator

Mirrored from https://github.com/stamminator/onedrive-after-dark/raw/main/dark.user.css

Screenshot of OneDrive After Dark

Details

Authorstamminator

LicenseMIT

Categoryonedrive.live.com

Created

Updated

Size22 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Finely tuned UserCSS dark theme for the OneDrive web app

Notes

Work in progress. Please raise issues through the GitHub page.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name         OneDrive After Dark
@description  Finely tuned UserCSS dark theme for the OneDrive web app
@namespace    https://github.com/stamminator
@version      20240330.2
@author       stamminator
==/UserStyle== */
#appRoot > .od-FilePickerApp,
#appRoot > .od-FilePickerApp .od-FilePicker,
#appRoot > .od-FilePickerApp .od-FilePicker-tray {
  background-color: #2c2c2c;
}
#appRoot > .od-FilePickerApp [class^='navPane_'] {
  background-color: #2c2c2c;
  border-color: #2c2c2c;
}
#appRoot > .od-FilePickerApp [class^='navPane_'] .ms-Button.ms-Nav-link {
  background-color: transparent !important;
  --buttonHoverBackgroundAlpha: rgba(255, 255, 255, 0.07);
}
#appRoot > .od-FilePickerApp [class^='navPane_'] .ms-Button.ms-Nav-link:not(.is-disabled):hover,
#appRoot > .od-FilePickerApp [class^='navPane_'] .ms-Button.ms-Nav-link:not(.is-disabled):active {
  background-color: var(--buttonHoverBackgroundAlpha) !important;
}
#appRoot > .od-FilePickerApp .od-FilePicker-tray {
  background-color: #2c2c2c;
  border-color: #2c2c2c;
}
@-moz-document domain("onedrive.live.com"), domain("photos.onedrive.com"), url-prefix("https://www.odwebp.svc.ms/share") {
  body {
    color: #ebebeb !important;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: #ebebeb !important;
  }
  dt {
    color: #8b8b8b !important;
  }
  dd {
    color: #bdbdbd !important;
  }
  :root,
  * {
    --colorBrandForegroundLinkSelected: #0f6cbd;
    --colorNeutralBackgroundAlpha3Hover: rgba(0, 0, 0, 0.25);
    --colorNeutralForeground1: #ebebeb;
    --colorNeutralForeground2: #bdbdbd;
    --od3-row-divider: #333 !important;
    --od3-row-inset-background: rgba(40, 134, 222, 0.25) !important;
    --ms-palette-neutralPrimary: #ebebeb;
    --ms-semanticColors-bodyBackground: #202020;
  }
  :root,
  [data-theme="fluent-light"],
  [data-theme="fluent-dark"] {
    --pageBackgroundGradientColorStop1: #242424;
    --pageBackgroundGradientColorStop2: #202020;
    --pageBackgroundGradientColorStop3: #1c1c1c;
  }
  :root {
    --buttonHoverBackgroundAlpha: rgba(0, 0, 0, 0.25);
  }
  html body .ms-fontColor-neutralSecondary {
    color: #989898;
  }
  .ms-Button,
  .ms-Button i {
    color: #ebebeb !important;
  }
  .ms-Button:hover,
  .ms-Button:hover .ms-Button-menuIcon {
    color: #ebebeb !important;
  }
  .ms-Button:hover:not(.is-disabled) {
    background-color: var(--buttonHoverBackgroundAlpha);
  }
  .ms-Button.ms-Button--command:hover,
  .ms-Button.ms-Button--commandBar:hover {
    background-color: transparent !important;
  }
  .ms-Button.ms-Button--default {
    color: #bdbdbd;
    background-color: transparent !important;
    border-color: #a6a6a6 !important;
  }
  .ms-Button.ms-Button--default:hover:not(.is-disabled) {
    background-color: var(--buttonHoverBackgroundAlpha) !important;
  }
  .ms-Button.ms-Button--primary:hover:not(.is-disabled) {
    background-color: #0f66b0 !important;
  }
  .ms-Button.is-disabled {
    opacity: 0.25;
  }
  .od-Panel-button--close {
    color: #bdbdbd;
  }
  .od-Panel-button--close:hover {
    background-color: var(--buttonHoverBackgroundAlpha);
  }
  .ms-TextField {
    background-color: #f0f0f0 !important;
    color: #000000 !important;
  }
  .ms-TextField-fieldGroup,
  input.ms-TextField-field,
  textarea.ms-TextField-field,
  .ms-BasePicker-input {
    background-color: #ebebeb !important;
    color: #000000 !important;
    border-radius: 4px;
  }
  .ms-TextField-fieldGroup::placeholder,
  input.ms-TextField-field::placeholder,
  textarea.ms-TextField-field::placeholder,
  .ms-BasePicker-input::placeholder {
    color: #707070 !important;
  }
  .ms-Dialog-main,
  .ms-Dialog-content,
  .ms-Dialog-subText {
    color: #bdbdbd !important;
    background-color: #333333 !important;
  }
  .ms-Dialog-title {
    color: #ebebeb !important;
  }
  .ms-Dialog-button {
    color: #bdbdbd !important;
  }
  .ms-Dialog-button:hover,
  .ms-Dialog-button:active {
    background-color: var(--buttonHoverBackgroundAlpha) !important;
  }
  [data-automationid="msFluentToast"][role='alert'][class*='root-'] {
    background-color: #121212 !important;
    --buttonHoverBackgroundAlpha: rgba(255, 255, 255, 0.07) !important;
  }
  i[data-icon-name="SyncStatusSolid"] {
    line-height: 1;
  }
  .ms-Pivot-link:hover {
    background-color: #0000001a;
  }
  .ms-Breadcrumb-item,
  .ms-Breadcrumb-itemLink {
    color: #ebebeb !important;
  }
  .ms-Breadcrumb-chevron {
    color: #8b8b8b !important;
  }
  .ms-Suggestions-item,
  .ms-Suggestions-itemButton {
    color: #bdbdbd;
    background-color: #2c2c2c;
  }
  .ms-Suggestions-item:hover,
  .ms-Suggestions-itemButton:hover {
    background-color: #242424 !important;
  }
  .ms-Suggestions-item.is-suggested,
  .ms-Suggestions-itemButton.is-suggested {
    background-color: #202020 !important;
  }
  .ms-Suggestions-item .ms-Persona-primaryText:hover,
  .ms-Suggestions-itemButton .ms-Persona-primaryText:hover {
    color: #ebebeb;
  }
  .ms-Dropdown-item {
    color: #bdbdbd;
    background-color: #2c2c2c;
  }
  .ms-Dropdown-item:hover {
    background-color: #242424 !important;
  }
  .ms-PickerPersona-container {
    color: #bdbdbd;
    background-color: #1a1a1a;
    border: 1px solid #333333;
  }
  .ms-PickerPersona-container:hover {
    cursor: pointer;
    background-color: #121212;
  }
  .ms-PickerPersona-container.is-selected,
  .ms-PickerPersona-container.is-selected:hover {
    background-color: #121212;
    border-color: var(--colorBrandForegroundLink);
  }
  .ms-PickerPersona-container .ms-PickerItem-content.ms-Button--icon:hover {
    background-color: #333333;
  }
  .ms-Persona-primaryText {
    color: #ebebeb;
  }
  .ms-Persona-primaryText:hover {
    color: #ebebeb;
  }
  .ms-Persona-secondaryText {
    color: #bdbdbd;
  }
  .ms-Persona-tertiaryText {
    color: #8b8b8b;
  }
  .ms-Callout,
  .ms-Callout-beak,
  .ms-Callout-beakCurtain,
  .ms-Callout-main,
  .ms-ContextualMenu,
  .ms-ContextualMenu-link {
    color: #bdbdbd !important;
    background-color: #1a1a1a !important;
    border-color: #242424;
  }
  .ms-ContextualMenu-itemText {
    color: #bdbdbd !important;
  }
  .ms-ContextualMenu-secondaryText {
    color: #8b8b8b !important;
  }
  .ms-ContextualMenu-link:hover {
    background-color: #242424 !important;
  }
  .ms-ContextualMenu-link .ms-ContextualMenu-icon {
    color: inherit;
  }
  .ms-ContextualMenu-checkmarkIcon {
    color: #ebebeb !important;
  }
  .ms-ContextualMenu-divider {
    background-color: #424242;
  }
  .ms-Tooltip-content,
  .ms-Tooltip-subText {
    color: #bdbdbd !important;
  }
  .ms-DatePicker {
    background-color: #1a1a1a;
  }
  .ms-DatePicker [class*='monthAndYear-'] {
    color: #bdbdbd;
  }
  .ms-DatePicker [class*='monthComponents-'] button {
    color: #bdbdbd;
  }
  .ms-DatePicker [class*='monthComponents-'] button:hover {
    background-color: #242424;
  }
  .ms-DatePicker [class*='monthComponents-'] button[class*='disabledStyle'] {
    color: #424242;
  }
  .ms-DatePicker [class*='dayCell-'] {
    color: #ebebeb;
  }
  .ms-DatePicker [class*='dayCell-'].ms-CalendarDay-hoverStyle {
    background-color: #333333;
  }
  .ms-DatePicker [class*='dayCell-'][class*='daySelected-'] {
    background-color: #333333 !important;
    border-color: #fafafa;
  }
  .ms-DatePicker [class*='dayOutsideBounds-'] button {
    color: #616161;
  }
  .ms-DatePicker th[class*='dayCell-'] {
    cursor: default;
    border-bottom: 1px solid #7d7d7d;
  }
}
@-moz-document url-prefix("https://www.odwebp.svc.ms/share") {
  #odc-share-root,
  .od-Share,
  .od-ShareMain-section {
    background-color: #202020 !important;
    color: #bdbdbd !important;
  }
  .od-ShareHintDetail-statusText,
  .od-ShareHintDetail-statusText * {
    color: var(--colorNeutralForegroundInvertedLink) !important;
  }
  .od-RoleSelectorCompact-permissionButton {
    background-color: inherit;
    color: inherit;
  }
  .od-ShareLinkDescription-label {
    color: #bdbdbd !important;
  }
  .od-ShareLinkDescription-detailText {
    color: #8b8b8b !important;
  }
  .od-ExpirationDatePicker-delete {
    color: #bdbdbd;
  }
  .od-RoleSelectorLarge-rolesDropdown .ms-Dropdown-title,
  .od-ExpirationDatePicker-content,
  .od-PasswordField .od-ShareLink-passwordFieldContent {
    border-bottom-color: transparent;
  }
  .od-PasswordField .ms-TextField {
    padding: 0;
    padding-left: 4px;
    padding-right: 4px;
  }
  .od-PasswordField .ms-TextField .ms-TextField-fieldGroup {
    height: auto;
  }
  .od-ShareHint .od-ShareHint-shimmer {
    border-color: transparent !important;
    background-image: linear-gradient(to right, #616161 0, #8b8b8b 50%, #616161 100%);
    background-color: #616161;
  }
  .od-ShareHint .od-ShareHint-shimmer .od-ShareHint-iconHolder-shimmer svg {
    fill: #202020 !important;
  }
  .od-ShareHint .od-ShareHint-shimmer .od-ShareHint-text-shimmer {
    border-color: #202020 !important;
  }
  .od-PermissionsPivot-emptySection {
    color: inherit;
  }
  .od-SharePrincipal2,
  .od-PermissionsPivot-dropdown div[role=tablist].ms-FocusZone,
  .od-PermissionsPivot-pivot div[role=tablist].ms-FocusZone {
    border-color: #424242;
  }
}
@-moz-document domain("onedrive.live.com") {
  #O365_NavHeader {
    background-color: #121212;
  }
  #O365_NavHeader .o365cs-base,
  #O365_NavHeader .o365sx-appName,
  #O365_NavHeader .o365sx-waffle {
    color: var(--globalColorGrey88);
  }
  #O365_NavHeader .o365cs-base:hover,
  #O365_NavHeader .o365sx-appName:hover,
  #O365_NavHeader .o365sx-waffle:hover {
    background-color: #242424;
  }
  #O365_NavHeader .o365sx-activeButton {
    background-color: #2c2c2c;
  }
  #O365_NavHeader .o365sx-searchBoxInactive,
  #O365_NavHeader .o365sx-searchBoxActive {
    color: #424242;
    background-color: #f0f0f0;
  }
  #O365_UniversalMeContainer:hover {
    background-color: #242424;
  }
  #mectrl_main_body,
  .mectrl_body,
  #mectrl_body_signOut {
    background-color: #1a1a1a;
    color: #ebebeb;
  }
  .mectrl_accountList,
  #mectrl_body_signOut:hover...

Reviews

No reviews yet.