Created
February 6, 2026 10:26
-
-
Save feoche/e56ff01bee4519f96a34b8e56c80ef81 to your computer and use it in GitHub Desktop.
ODS - Dark theme try-out
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @media only screen and (prefers-color-scheme: dark) { | |
| /* please keep commented css variables as they represent all the possibilities from ODS */ | |
| :root { | |
| /* new */ | |
| --mods-logo-color: white; | |
| --navigation_navigation-background: #0f1747; | |
| /* Color */ | |
| --ods-theme-anchor-text-color: #4d90ff; | |
| --ods-theme-anchor-text-color-hover: #13f7f8; | |
| --ods-theme-anchor-text-color-visited: #4d90ff; | |
| --ods-theme-background-color: #000533; | |
| --ods-theme-background-color-disabled: #434456; | |
| /* --ods-theme-background-color-drag-over: var(--ods-color-primary-100); */ | |
| /* --ods-theme-background-color-readonly: #f2f2f2; */ | |
| /* --ods-theme-background-color-selected: #00185e; */ | |
| --ods-theme-border-color-disabled: #434456; | |
| /* --ods-theme-border-color-drag-over: var(--ods-color-primary-100); */ | |
| /* --ods-theme-border-color-readonly: #f2f2f2; */ | |
| /* --ods-theme-border-color-selected: #00185e; */ | |
| --ods-theme-heading-text-color: white; | |
| /* --ods-theme-progress-background-color: var(--ods-color-primary-500); */ | |
| /* --ods-theme-split-background-color: #e6e6e6; */ | |
| /* --ods-theme-split-border-color: #e6e6e6; */ | |
| --ods-theme-text-color: #b2b4c1; | |
| --ods-theme-text-color-disabled: #808080; | |
| /* --ods-theme-text-color-selected: #ffffff --ods-theme-text-color-selected: #ffffff; */ | |
| /* --ods-theme-track-background-color: var(--ods-color-neutral-100); */ | |
| /* --ods-theme-track-background-color-disabled: var(--ods-color-neutral-500); */ | |
| /* --ods-theme-critical-color: var(--ods-color-critical-500); */ | |
| /* --ods-theme-information-color: var(--ods-color-information-500); */ | |
| /* --ods-theme-neutral-color: var(--ods-color-neutral-500); */ | |
| /* --ods-theme-primary-color: var(--ods-color-primary-500); */ | |
| /* --ods-theme-success-color: var(--ods-color-success-500); */ | |
| /* --ods-theme-warning-color: var(--ods-color-warning-500); */ | |
| /* Outline */ | |
| --ods-theme-outline-color: #13f7f8; | |
| /* --ods-theme-outline-offset: 2px; */ | |
| /* --ods-theme-outline-style: solid; */ | |
| /* --ods-theme-outline-width: 2px; */ | |
| /* Overlay */ | |
| /* --ods-theme-backdrop-background-color: #0050d7; */ | |
| /* --ods-theme-backdrop-opacity: 0.75; */ | |
| /* --ods-theme-overlay-border-radius: calc(var(--ods-theme-border-radius) / 2); */ | |
| /* --ods-theme-overlay-box-shadow: none; */ | |
| /* --ods-theme-overlay-z-index: 99; */ | |
| /* Spacing */ | |
| /* --ods-theme-border-radius: 8px; */ | |
| /* --ods-theme-border-width: 1px; */ | |
| /* --ods-theme-column-gap: 8px; */ | |
| /* --ods-theme-padding-horizontal: 8px; */ | |
| /* --ods-theme-padding-vertical: 8px; */ | |
| /* --ods-theme-row-gap: 8px; */ | |
| /* Font Family */ | |
| /* --ods-theme-font-family: 'Source Sans Pro', 'Trebuchet MS', arial, 'Segoe UI', sans-serif; */ | |
| /* --ods-theme-font-family-code: 'Source Code Pro', arial; */ | |
| /* Form Element */ | |
| /* --ods-theme-input-background-color-checked: #0050d7; */ | |
| /* --ods-theme-input-background-color-checked-hover: #000e9c; */ | |
| /* --ods-theme-input-background-color-invalid: #bf0020; */ | |
| --ods-theme-input-border-color: #c7cbed; | |
| /* --ods-theme-input-border-color-checked: #0050d7; */ | |
| /* --ods-theme-input-border-color-checked-hover: #000e9c; */ | |
| --ods-theme-input-border-color-hover: #808bff; | |
| --ods-theme-input-border-color-invalid: #c11b1b; | |
| --ods-theme-input-border-radius: 5px; | |
| --ods-theme-input-border-width: 2px; | |
| /* --ods-theme-input-min-height: 32px; */ | |
| /* --ods-theme-input-option-background-color-hover: #bef1ff; */ | |
| /* --ods-theme-input-option-background-color-selected: #e6faff; */ | |
| /* --ods-theme-input-option-background-color-selected-hover: #bef1ff; */ | |
| /* --ods-theme-input-padding-horizontal: var(--ods-theme-padding-horizontal); */ | |
| /* --ods-theme-input-padding-vertical: calc(var(--ods-theme-padding-vertical) / 4); */ | |
| /* --ods-theme-input-placeholder-text-color: #666666; */ | |
| --ods-theme-input-text-color: #00074d; | |
| /* --ods-theme-input-text-color-checked: var(--ods-theme-background-color); */ | |
| --ods-theme-input-text-color-invalid: #c11b1b; | |
| } | |
| @layer minimal-ods { | |
| /* [class*='_button_'] is used instead of [data-ods='button'] since it's overriden for some component like modal button auto trigger */ | |
| /* Button */ | |
| [class*='_button_'] { | |
| outline-offset: -1px; | |
| outline: 4px solid var(--mods-button-outline-active); | |
| --ods-button-border-radius-md: 5px; | |
| --ods-button-background-color-critical: #c12d52; | |
| --ods-button-background-color-critical-hover: #971535; | |
| --ods-button-background-color-critical-active: #c12d52; | |
| --ods-button-border-color-critical: #c12d52; | |
| --ods-button-border-color-critical-hover: #971535; | |
| --ods-button-border-color-critical-active: #c12d52; | |
| --ods-button-text-color-critical: white; | |
| --ods-button-text-color-critical-hover: white; | |
| --ods-button-text-color-critical-active: white; | |
| --ods-button-background-color-primary: #0050d5; | |
| --ods-button-background-color-primary-hover: #000e9c; | |
| --ods-button-background-color-primary-active: #0050d5; | |
| --ods-button-border-color-primary: #0050d5; | |
| --ods-button-border-color-primary-hover: #000e9c; | |
| --ods-button-border-color-primary-active: #0050d5; | |
| --ods-button-text-color-primary: white; | |
| --ods-button-text-color-primary-hover: white; | |
| --ods-button-text-color-primary-active: white; | |
| --ods-button-background-color-primary-outline: unset; | |
| --ods-button-background-color-primary-outline-hover: unset; | |
| --ods-button-background-color-primary-outline-active: unset; | |
| --ods-button-border-color-primary-outline: #4d90ff; | |
| --ods-button-border-color-primary-outline-hover: #0060ff; | |
| --ods-button-border-color-primary-outline-active: #0060ff; | |
| --ods-button-text-color-primary-outline: #4d90ff; | |
| --ods-button-text-color-primary-outline-hover: #0060ff; | |
| --ods-button-text-color-primary-outline-active: #0060ff; | |
| --ods-button-background-color-primary-ghost: unset; | |
| --ods-button-background-color-primary-ghost-hover: #253166; | |
| --ods-button-background-color-primary-ghost-active: #253166; | |
| --ods-button-border-color-primary-ghost: unset; | |
| --ods-button-border-color-primary-ghost-hover: unset; | |
| --ods-button-border-color-primary-ghost-active: unset; | |
| --ods-button-text-color-primary-ghost: white; | |
| --ods-button-text-color-primary-ghost-hover: white; | |
| --ods-button-text-color-primary-ghost-active: white; | |
| /* --ods-button-background-color-neutral-ghost: unset; */ | |
| --ods-button-background-color-neutral-ghost-hover: #000533; | |
| --ods-button-background-color-neutral-ghost-active: #000533; | |
| --ods-button-border-color-neutral-ghost: unset; | |
| --ods-button-border-color-neutral-ghost-hover: unset; | |
| --ods-button-border-color-neutral-ghost-active: unset; | |
| /* --ods-button-text-color-neutral-ghost: unset; */ | |
| --ods-button-text-color-neutral-ghost-hover: white; | |
| --ods-button-text-color-neutral-ghost-active: white; | |
| } | |
| [class*='_button_'][class*='_button--primary'][class*='_button--default']:active, | |
| [class*='_button_'][class*='_button--primary'][class*='_button--ghost']:active { | |
| --mods-button-outline-active: #2c6ca7; | |
| } | |
| [class*='_button_'][class*='_button--primary'][class*='_button--outline']:active, | |
| [class*='_button_'][class*='_button--neutral'][class*='_button--ghost']:active { | |
| --mods-button-outline-active: #1f2885; | |
| } | |
| [class*='_button_'][class*='_button--critical'][class*='_button--default']:active { | |
| --mods-button-outline-active: #741d45; | |
| } | |
| [class*='_button_'][class*='_button--outline']:disabled { | |
| background-color: unset; | |
| border-color: #565a7b; | |
| color: #797b8d; | |
| } | |
| /* Badge */ | |
| [data-ods='badge'] { | |
| --ods-badge-border-radius: 99px; | |
| --ods-badge-padding-horizontal-sm: calc(var(--ods-theme-padding-horizontal) * 0.75); | |
| --ods-badge-padding-vertical-sm: 0; | |
| --ods-badge-padding-horizontal-md: var(--ods-theme-padding-horizontal); | |
| --ods-badge-padding-vertical-md: 0; | |
| --ods-badge-padding-horizontal-lg: calc(var(--ods-theme-padding-horizontal) * 1.25); | |
| --ods-badge-padding-vertical-lg: 0; | |
| --ods-badge-background-color-neutral: #000533; | |
| --ods-badge-text-color-neutral: white; | |
| --ods-badge-background-color-primary: #13f7f8; | |
| --ods-badge-text-color-primary: #0015e6; | |
| --ods-badge-background-color-success: #c8f950; | |
| --ods-badge-text-color-success: #354a03; | |
| } | |
| [data-ods='badge'][class*='_badge--neutral'] { | |
| border: 1px solid #b2b4c1; | |
| } | |
| /* Link */ | |
| [data-ods='link']::after { | |
| content: unset; | |
| } | |
| [data-ods='link']:active { | |
| color: #80afff; | |
| } | |
| /* Table */ | |
| [data-ods='table'] { | |
| --mods-table-heading-background-color: #253166; | |
| --mods-table-heading-color: white; | |
| --table-body-background-color: #0f1747; | |
| --table-body-color: #b7b9c7; | |
| } | |
| /* Card */ | |
| [data-ods='card'] { | |
| --mods-card-background-color: #0f1747; | |
| } | |
| /* Modal */ | |
| div[data-part='backdrop'] { | |
| @apply bg-[#000425B2] backdrop-filter-[blur(6px)]; | |
| } | |
| [data-ods='modal-content'] { | |
| --mods-box-shadow: | |
| 0 0 0 0 #ffffff00 inset, 0 0 0 0 #ffffff00 inset, 0 0 1px 0 #0000001a, | |
| 0 10px 24px 0 #00000033, 0 2px 5px 0 #00000026; | |
| --mods-background-color: #0f1747; | |
| } | |
| /* Input */ | |
| [data-ods='quantity-input'], | |
| div:not([class*='_combobox']):has(> [data-ods='input']), | |
| [data-ods='select-control'], | |
| [data-ods='combobox-control'], | |
| [data-ods='combobox-content'], | |
| [data-ods='select-content'] { | |
| background-color: #e6e9ff; | |
| } | |
| /* Tooltip */ | |
| [data-ods='tooltip-content'], | |
| [data-ods='popover-content'] { | |
| --mods-tooltip-background-color: #0f1747; | |
| --mods-tooltip-color: white; | |
| --mods-tooltip-border-color: #253166; | |
| } | |
| /* Breadcrumb */ | |
| [data-ods='breadcrumb'] { | |
| --mods-color: #3666c1; | |
| --mods-color-last: #597cc1; | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment