Skip to main content

darkMode

@shopify/shop-minis-platform-sdk / theme/gravity/colors/darkMode

DarkModeColors​

const DarkModeColors: object

Type declaration​

action-label-background​

action-label-background: string = Palette.Poppy.L2

action-label-foreground​

action-label-foreground: string = Palette.Poppy.D2

add-a-card-icon​

add-a-card-icon: string = Palette.Grayscale.White

auto-import-hero-text​

auto-import-hero-text: string = Palette.Grayscale.White

background-aos-webview-disclaimer-banner​

background-aos-webview-disclaimer-banner: string = Palette.Grayscale.Black

backgrounds-announcement-card​

backgrounds-announcement-card: string = Palette.Grayscale.D1

backgrounds-banner-prompt-primary​

backgrounds-banner-prompt-primary: string = Palette.Purple.D2

backgrounds-brand-primary​

backgrounds-brand-primary: string = Palette.Purple.L2

backgrounds-brand-secondary​

backgrounds-brand-secondary: string = Palette.Grayscale.D1

backgrounds-dangerous​

backgrounds-dangerous: string = Palette.Poppy.D1

backgrounds-dangerous-subdued​

backgrounds-dangerous-subdued: string = Palette.Poppy.L1

backgrounds-floating-tab​

backgrounds-floating-tab: string = '#333333'

backgrounds-message-bubble-merchant​

backgrounds-message-bubble-merchant: string = Palette.Purple.D2

backgrounds-overlay​

backgrounds-overlay: any

backgrounds-placeholder​

backgrounds-placeholder: string = Palette.Grayscale.D1

backgrounds-primary​

backgrounds-primary: string = Palette.Purple.L2

backgrounds-regular​

backgrounds-regular: string = Palette.Grayscale.D2

backgrounds-regular-fully-transparent​

backgrounds-regular-fully-transparent: any

backgrounds-regular-hover​

backgrounds-regular-hover: string = Palette.Grayscale.D2D

backgrounds-sash-primary​

backgrounds-sash-primary: string = Palette.Grayscale.D1

backgrounds-shop-cash-secondary​

backgrounds-shop-cash-secondary: string = Palette.Green.D2

backgrounds-subdued​

backgrounds-subdued: string = Palette.Grayscale.D2D

backgrounds-success​

backgrounds-success: string = Palette.Green.Primary

backgrounds-success-subdued​

backgrounds-success-subdued: string = Palette.Green.L1

badge-background-discounted​

badge-background-discounted: string = Palette.Poppy.D1

badge-text-light​

badge-text-light: string = Palette.Grayscale.White

banner-important-background: string = Palette.Ochre.D4

banner-important-foreground: string = Palette.Ochre.L1

banner-primary-close-color: string = Palette.Purple.L1

banner-primary-text-color: string = Palette.Purple.L2

bg-loading-order-info​

bg-loading-order-info: string = '#282828'

blurred-recommendation-background-android​

blurred-recommendation-background-android: string = 'rgba(0, 0, 0, 0.99)'

blurred-recommendation-background-ios​

blurred-recommendation-background-ios: string = 'rgba(40, 40, 40, 0.3)'

border-loading-order-info​

border-loading-order-info: string = Palette.Grayscale.L2

borders-regular​

borders-regular: string = Palette.Grayscale.D1

brand-badge-background​

brand-badge-background: string = Palette.Purple.Primary

carbon-neutral-title​

carbon-neutral-title: string = Palette.Grayscale.White

carbon-offset-gradient-to​

carbon-offset-gradient-to: string = '#2E2E39'

carousel-control-active: string = Palette.Grayscale.White

carousel-control-inactive: string

cart-indicator​

cart-indicator: string = Palette.Poppy.D1

cash-badge-text​

cash-badge-text: string = Palette.Green.D2

checkbox-checked​

checkbox-checked: string = Palette.Grayscale.White

checkbox-checkmark​

checkbox-checkmark: string = Palette.Grayscale.Black

checkbox-unchecked-border​

checkbox-unchecked-border: string = Palette.Grayscale.L2

community-product-badge-text​

community-product-badge-text: string = Palette.Grayscale.Black

continue-to-cart-subtotal​

continue-to-cart-subtotal: string = Palette.Grayscale.White

curation-curator-foreground​

curation-curator-foreground: string = Palette.Grayscale.White

dashed-border​

dashed-border: string = Palette.Purple.PrimaryLight

discount-badge-background​

discount-badge-background: string = Palette.Ochre.L2

discount-badge-text​

discount-badge-text: string = Palette.Poppy.D2

dividers-regular​

dividers-regular: string = Palette.Grayscale.D2D

dividers-section​

dividers-section: string = Palette.Grayscale.D2D

drops-countdown-badge-gray​

drops-countdown-badge-gray: string = Palette.Grayscale.L1

drops-countdown-badge-green​

drops-countdown-badge-green: string = Palette.Green.D1

drops-info-registered-background​

drops-info-registered-background: string = Palette.Grayscale.D3

drops-info-registered-border​

drops-info-registered-border: string = Palette.Purple.L1

drops-info-registered-text-button​

drops-info-registered-text-button: string = Palette.Purple.L1

email-forwarding-box​

email-forwarding-box: string = Palette.Purple.D1

featured-merchant-image-text​

featured-merchant-image-text: string = Palette.Grayscale.White

fixed-dark​

fixed-dark: string = Palette.Grayscale.Black

fixed-dark-transparent​

fixed-dark-transparent: any

fixed-light​

fixed-light: string = Palette.Grayscale.White

foregrounds-contrasting​

foregrounds-contrasting: string = Palette.Grayscale.L4

foregrounds-contrasting-inverted​

foregrounds-contrasting-inverted: string = Palette.Grayscale.Black

foregrounds-discount​

foregrounds-discount: string = Palette.Ochre.L1

foregrounds-placeholder​

foregrounds-placeholder: string = Palette.Grayscale.L1

foregrounds-primary​

foregrounds-primary: string = Palette.Purple.L1

foregrounds-regular​

foregrounds-regular: string = Palette.Grayscale.White

foregrounds-secondary​

foregrounds-secondary: string = Palette.Grayscale.L2

foregrounds-shop-cash-secondary​

foregrounds-shop-cash-secondary: string = Palette.Green.L3

foregrounds-subdued​

foregrounds-subdued: string = Palette.Grayscale.L1

google-logo: string = '#FFFFFF'

highlight​

highlight: string = 'rgba(255,255,255,0.10)'

highlight-inverted​

highlight-inverted: string = 'rgba(0,0,0,0.10)'

highlights-dangerous​

highlights-dangerous: string = Palette.Poppy.D0

highlights-discounted​

highlights-discounted: string = Palette.Poppy.D0

highlights-primary​

highlights-primary: string = Palette.Purple.L1

highlights-success​

highlights-success: string = Palette.Green.Primary

highlights-success-subdued​

highlights-success-subdued: string = Palette.Green.L1

image-border​

image-border: string = 'rgba(255,255,255,0.15)'

image-tint-light​

image-tint-light: string = 'rgba(255,255,255,0.05)'

inactive-button-background​

inactive-button-background: string = Palette.Grayscale.D1

inactive-button-foreground​

inactive-button-foreground: string = Palette.Grayscale.Black

inputs-background​

inputs-background: string = Palette.Grayscale.Black

inputs-background-disabled​

inputs-background-disabled: string = Palette.Grayscale.D1

inputs-border​

inputs-border: string = Palette.Grayscale.D0

inputs-border-color​

inputs-border-color: string = Palette.Grayscale.L2

inputs-clear-button​

inputs-clear-button: string = Palette.Grayscale.PrimaryLight

inputs-placeholder-text​

inputs-placeholder-text: string = Palette.Grayscale.L1

logo-placeholder-background​

logo-placeholder-background: string = Palette.Grayscale.D1

main-nav-tab-active: string = Palette.Grayscale.White

main-nav-tab-active-foreground: string = Palette.Grayscale.Black

main-nav-tab-inactive: string = Palette.Grayscale.L1

mini-frame-legal-notice-text​

mini-frame-legal-notice-text: string = Palette.Grayscale.L2

mini-viewer-shopping-bag-badge​

mini-viewer-shopping-bag-badge: string = Palette.Grayscale.White

multiplier-badge-background​

multiplier-badge-background: string = Palette.Green.D1

multiplier-badge-foreground​

multiplier-badge-foreground: string = Palette.Grayscale.White

new-rating-stars-background​

new-rating-stars-background: string = Palette.Grayscale.PrimaryLight

no-image-found-background​

no-image-found-background: string = '#E6E6E6'

notification-highlight-background​

notification-highlight-background: string = Palette.Grayscale.D2D

notification-highlight-bar​

notification-highlight-bar: string = Palette.Grayscale.White

outlined-button-border​

outlined-button-border: string = Palette.Grayscale.D0

price-slider-background​

price-slider-background: string = Palette.Purple.PrimaryLight

price-slider-selected-background​

price-slider-selected-background: string = Palette.Purple.Primary

primary-button-background​

primary-button-background: string = Palette.Purple.L0

primary-button-background-hover​

primary-button-background-hover: string = Palette.Purple.D0

product-image-background​

product-image-background: string = Palette.Grayscale.White

product-image-overlay​

product-image-overlay: string = 'rgba(255,255,255,0.04)'

product-image-placeholder​

product-image-placeholder: string = Palette.Grayscale.D1

progress-bar-completed​

progress-bar-completed: string = Palette.Purple.L1

rating-stars-background​

rating-stars-background: string = Palette.Grayscale.D2

rating-stars-fill​

rating-stars-fill: string = Palette.Grayscale.White

rating-stars-void​

rating-stars-void: string = Palette.Grayscale.L1

reviews-search-highlights-background​

reviews-search-highlights-background: string = Palette.Purple.PrimaryLight

search-input-background​

search-input-background: string = Palette.Grayscale.D2D

secondary-button-background-hover​

secondary-button-background-hover: string = Palette.Grayscale.L2

shadows-soft​

shadows-soft: string = Palette.Grayscale.Black

sheet-background​

sheet-background: string = Palette.Grayscale.D2D

sheet-close-button​

sheet-close-button: string = Palette.Grayscale.D1

shop-cash-claiming-flow-default-background​

shop-cash-claiming-flow-default-background: string = '#008552'

shop-cash-claiming-flow-transparent-dark​

shop-cash-claiming-flow-transparent-dark: string = 'rgba(0, 0, 0, 0.2)'

shop-cash-claiming-flow-transparent-light​

shop-cash-claiming-flow-transparent-light: string = 'rgba(255, 255, 255, 0.2)'

shop-cash-dark-button-background​

shop-cash-dark-button-background: string = Palette.Grayscale.D3

smart-onboarding-icon-background​

smart-onboarding-icon-background: string = Palette.Grayscale.White

smart-onboarding-product-box-background​

smart-onboarding-product-box-background: string = Palette.Grayscale.D1

splash-shopify-logo: string = Palette.Grayscale.White

sponsored-badge-background: string = 'rgba(0, 0, 0, 0.3)'

subdued-button-background​

subdued-button-background: string = Palette.Purple.PrimaryLight

subdued-button-foreground​

subdued-button-foreground: string = Palette.Purple.Primary

tertiary-button-background​

tertiary-button-background: string = Palette.Grayscale.D2D

tertiary-button-background-hover​

tertiary-button-background-hover: string = Palette.Grayscale.D1

tertiary-button-foreground​

tertiary-button-foreground: string = Palette.Grayscale.L3

toasts-background​

toasts-background: string = Palette.Purple.Primary

toasts-foreground​

toasts-foreground: string = Palette.Grayscale.L4

tracker-map-fallback-background​

tracker-map-fallback-background: string = Palette.Grayscale.D1

tracking-info-globe-image-background​

tracking-info-globe-image-background: string = '#010101'

tracking-info-white-text​

tracking-info-white-text: string = Palette.Grayscale.White

tracking-item-pill-background​

tracking-item-pill-background: string = Palette.Grayscale.White

tracking-item-pill-text​

tracking-item-pill-text: string = Palette.Grayscale.D2

unbranded-button-background​

unbranded-button-background: string = Palette.Grayscale.L3

unbranded-button-foreground​

unbranded-button-foreground: string = Palette.Grayscale.Black

unverified-confirm-product-background​

unverified-confirm-product-background: string = Palette.Grayscale.White

Copyright © Shopify Inc., 2024
Help CenterLegal & Policies
Copyright © Shopify Inc., 2024