:root { --fillicon: rgba(34, 34, 34, 1); --textjp-12-w6-font-family: "Noto Sans JP", Helvetica; --textjp-12-w6-font-weight: 700; --textjp-12-w6-font-size: 12px; --textjp-12-w6-letter-spacing: 0.48px; --textjp-12-w6-line-height: 150%; --textjp-12-w6-font-style: normal; --textjp-12-w3-font-family: "Noto Sans JP", Helvetica; --textjp-12-w3-font-weight: 400; --textjp-12-w3-font-size: 12px; --textjp-12-w3-letter-spacing: 0.48px; --textjp-12-w3-line-height: 150%; --textjp-12-w3-font-style: normal; --collection-1-gray-gray-0-white: rgba(255, 255, 255, 1); --collection-1-gray-gray-50: rgba(241, 246, 248, 1); --collection-1-gray-gray-100: rgba(210, 218, 223, 1); --collection-1-gray-gray-200: rgba(182, 194, 198, 1); --collection-1-gray-gray-300: rgba(153, 166, 174, 1); --collection-1-gray-gray-400: rgba(125, 143, 149, 1); --collection-1-gray-gray-500: rgba(102, 119, 128, 1); --collection-1-gray-gray-600: rgba(80, 91, 102, 1); --collection-1-gray-gray-700: rgba(58, 67, 77, 1); --collection-1-gray-gray-800: rgba(36, 43, 50, 1); --collection-1-gray-gray-900: rgba(13, 19, 25, 1); --collection-1-main-blue-50: rgba(232, 248, 250, 1); --collection-1-main-blue-100: rgba(209, 241, 245, 1); --collection-1-main-blue-200: rgba(163, 226, 235, 1); --collection-1-main-blue-300: rgba(116, 212, 225, 1); --collection-1-main-blue-400: rgba(70, 197, 215, 1); --collection-1-main-blue-500: rgba(24, 183, 205, 1); --collection-1-main-blue-600: rgba(19, 146, 164, 1); --collection-1-main-blue-700: rgba(12, 92, 103, 1); --collection-1-main-blue-800: rgba(7, 55, 61, 1); --collection-1-main-blue-900: rgba(14, 2, 18, 1); --collection-1-accent-pink-50: rgba(255, 232, 242, 1); --collection-1-accent-pink-100: rgba(254, 209, 228, 1); --collection-1-accent-pink-200: rgba(254, 163, 201, 1); --collection-1-accent-pink-300: rgba(253, 118, 174, 1); --collection-1-accent-pink-400: rgba(253, 72, 147, 1); --collection-1-accent-pink-500: rgba(252, 26, 120, 1); --collection-1-accent-pink-600: rgba(202, 21, 96, 1); --collection-1-accent-pink-700: rgba(151, 16, 72, 1); --collection-1-accent-pink-800: rgba(101, 10, 48, 1); --collection-1-accent-pink-900: rgba(50, 5, 24, 1); --collection-1-utility-yellow: rgba(255, 255, 0, 1); --collection-1-utility-yellow-2: rgba(255, 229, 0, 1); --collection-1-utility-yellow-light: rgba(252, 251, 227, 1); --collection-1-utility-yellow-light-2: rgba(255, 246, 128, 1); --collection-1-utility-red: rgba(255, 17, 0, 1); --collection-1-sp-body: 358px; --ios-colors-labels-primary: rgba(0, 0, 0, 1); --ios-colors-backgrounds-primary: rgba(255, 255, 255, 1); } /* To enable a theme in your HTML, simply add one of the following data attributes to an HTML element, like so: You can apply the theme on any DOM node, not just the `body` */ [data-ios-colors-mode="light"] { --ios-colors-labels-primary: rgba(0, 0, 0, 1); --ios-colors-backgrounds-primary: rgba(255, 255, 255, 1); } [data-ios-colors-mode="dark"] { --ios-colors-labels-primary: rgba(255, 255, 255, 1); --ios-colors-backgrounds-primary: rgba(0, 0, 0, 1); } [data-ios-colors-mode="dark-elevated"] { --ios-colors-labels-primary: rgba(255, 255, 255, 1); --ios-colors-backgrounds-primary: rgba(28, 28, 30, 1); }