:root { --m3-elevation-light-4: 0px 2px 3px 0px rgba(0, 0, 0, 0.3), 0px 6px 10px 4px rgba(0, 0, 0, 0.15); --m3-elevation-light-3: 0px 1px 3px 0px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15); --clarivize-variables-primary-buttons-primary-button-rest: rgba( 2, 119, 189, 1 ); --clarivize-variables-primary-buttons-primary-button-hover: rgba( 0, 87, 155, 1 ); --clarivize-variables-primary-buttons-primary-button-disabled: rgba( 236, 239, 241, 1 ); --clarivize-variables-primary-buttons-primary-button-rest-stroke: rgba( 2, 119, 189, 1 ); --clarivize-variables-primary-buttons-primary-button-hover-rest-stroke: rgba( 0, 87, 155, 1 ); --clarivize-variables-primary-buttons-primary-button-disabled-rest-stroke: rgba( 230, 230, 230, 1 ); --clarivize-variables-secondary-buttons-secondary-button-rest: rgba( 255, 255, 255, 1 ); --clarivize-variables-primary-buttons-primary-button-disabled-text: rgba( 96, 125, 139, 1 ); --clarivize-variables-primary-buttons-primary-button-error: rgba( 216, 27, 96, 1 ); --clarivize-variables-primary-buttons-primary-button-error-stroke: rgba( 216, 27, 96, 1 ); --clarivize-variables-primary-buttons-success-icon: rgba(175, 82, 222, 1); --clarivize-variables-secondary-buttons-secondary-button-hover: rgba( 232, 248, 255, 1 ); --clarivize-variables-secondary-buttons-tab-button-selected: rgba( 2, 119, 189, 1 ); --clarivize-variables-secondary-buttons-secondary-button-disabled: rgba( 243, 246, 248, 1 ); --clarivize-variables-secondary-buttons-seondary-button-rest-stroke: rgba( 0, 112, 200, 1 ); --clarivize-variables-secondary-buttons-secondary-button-hover-stroke: rgba( 24, 102, 165, 1 ); --clarivize-variables-secondary-buttons-secondary-button-disabled-stroke: rgba( 96, 125, 139, 1 ); --clarivize-variables-secondary-buttons-secondary-button-text-disabled: rgba( 96, 125, 139, 1 ); --clarivize-variables-secondary-buttons-secondary-button-text-rest: rgba( 0, 112, 200, 1 ); --clarivize-variables-TOC-buttons-tab-button-selected-hover: rgba( 0, 87, 155, 1 ); --clarivize-variables-TOC-buttons-tab-button-deselected-hover: rgba( 232, 248, 255, 1 ); --clarivize-variables-TOC-buttons-TOC-button-deselected: rgba( 243, 246, 248, 1 ); --clarivize-variables-TOC-buttons-TOC-button-selected: rgba(255, 255, 255, 1); --clarivize-variables-TOC-buttons-TOC-button-deselected-hover: rgba( 232, 235, 236, 1 ); --clarivize-variables-TOC-buttons-TOC-button-selected-hover: rgba( 232, 248, 255, 1 ); --clarivize-variables-TOC-buttons-TOC-button-selected-stripe: rgba( 0, 112, 200, 1 ); --clarivize-variables-TOC-buttons-TOC-button-selected-text: rgba( 0, 87, 155, 1 ); --clarivize-variables-TOC-buttons-TOC-button-deselected-text: rgba( 69, 90, 100, 1 ); --clarivize-variables-keylines-black: rgba(0, 0, 0, 1); --clarivize-variables-keylines-darker-outline: rgba(144, 147, 153, 1); --clarivize-variables-keylines-box-outlines: rgba(192, 196, 203, 1); --clarivize-variables-keylines-row-lines: rgba(215, 219, 226, 1); --clarivize-variables-keylines-white-BG: rgba(255, 255, 255, 1); --clarivize-variables-keylines-gray-BG: rgba(243, 246, 248, 1); --clarivize-variables-keylines-selected-BG: rgba(232, 248, 255, 1); --clarivize-variables-primary-buttons-primary-button-rest-duplicate: rgba( 2, 119, 189, 1 ); --system-colors-miscellaneous-floating-tab-text-unselected: rgba(9, 9, 9, 1); --system-colors-miscellaneous-floating-tab-pill-fill: 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-clarivize-variables-mode="light-theme"] { --clarivize-variables-primary-buttons-primary-button-rest: rgba( 2, 119, 189, 1 ); --clarivize-variables-primary-buttons-primary-button-hover: rgba( 0, 87, 155, 1 ); --clarivize-variables-primary-buttons-primary-button-disabled: rgba( 236, 239, 241, 1 ); --clarivize-variables-primary-buttons-primary-button-rest-stroke: rgba( 2, 119, 189, 1 ); --clarivize-variables-primary-buttons-primary-button-hover-rest-stroke: rgba( 0, 87, 155, 1 ); --clarivize-variables-primary-buttons-primary-button-disabled-text: rgba( 96, 125, 139, 1 ); --clarivize-variables-primary-buttons-primary-button-error: rgba( 216, 27, 96, 1 ); --clarivize-variables-primary-buttons-primary-button-error-stroke: rgba( 216, 27, 96, 1 ); --clarivize-variables-primary-buttons-success-icon: rgba(175, 82, 222, 1); --clarivize-variables-secondary-buttons-secondary-button-hover: rgba( 232, 248, 255, 1 ); --clarivize-variables-secondary-buttons-tab-button-selected: rgba( 2, 119, 189, 1 ); --clarivize-variables-secondary-buttons-secondary-button-disabled: rgba( 243, 246, 248, 1 ); --clarivize-variables-secondary-buttons-seondary-button-rest-stroke: rgba( 0, 112, 200, 1 ); --clarivize-variables-secondary-buttons-secondary-button-hover-stroke: rgba( 24, 102, 165, 1 ); --clarivize-variables-secondary-buttons-secondary-button-disabled-stroke: rgba( 96, 125, 139, 1 ); --clarivize-variables-secondary-buttons-secondary-button-text-disabled: rgba( 96, 125, 139, 1 ); --clarivize-variables-secondary-buttons-secondary-button-text-rest: rgba( 0, 112, 200, 1 ); --clarivize-variables-TOC-buttons-tab-button-selected-hover: rgba( 0, 87, 155, 1 ); --clarivize-variables-TOC-buttons-tab-button-deselected-hover: rgba( 232, 248, 255, 1 ); --clarivize-variables-TOC-buttons-TOC-button-deselected: rgba( 243, 246, 248, 1 ); --clarivize-variables-TOC-buttons-TOC-button-deselected-hover: rgba( 232, 235, 236, 1 ); --clarivize-variables-TOC-buttons-TOC-button-selected-hover: rgba( 232, 248, 255, 1 ); --clarivize-variables-TOC-buttons-TOC-button-selected-stripe: rgba( 0, 112, 200, 1 ); --clarivize-variables-TOC-buttons-TOC-button-selected-text: rgba( 0, 87, 155, 1 ); --clarivize-variables-TOC-buttons-TOC-button-deselected-text: rgba( 69, 90, 100, 1 ); --clarivize-variables-keylines-black: rgba(0, 0, 0, 1); --clarivize-variables-keylines-darker-outline: rgba(144, 147, 153, 1); --clarivize-variables-keylines-box-outlines: rgba(192, 196, 203, 1); --clarivize-variables-keylines-row-lines: rgba(215, 219, 226, 1); --clarivize-variables-keylines-gray-BG: rgba(243, 246, 248, 1); --clarivize-variables-keylines-selected-BG: rgba(232, 248, 255, 1); --clarivize-variables-primary-buttons-primary-button-rest-duplicate: rgba( 2, 119, 189, 1 ); } [data-clarivize-variables-mode="dark-theme"] { --clarivize-variables-primary-buttons-primary-button-rest: rgba( 0, 139, 250, 1 ); --clarivize-variables-primary-buttons-primary-button-hover: rgba( 24, 102, 165, 1 ); --clarivize-variables-primary-buttons-primary-button-disabled: rgba( 230, 230, 230, 1 ); --clarivize-variables-primary-buttons-primary-button-rest-stroke: rgba( 0, 139, 250, 1 ); --clarivize-variables-primary-buttons-primary-button-hover-rest-stroke: rgba( 24, 102, 165, 1 ); --clarivize-variables-primary-buttons-primary-button-disabled-text: rgba( 255, 255, 255, 1 ); --clarivize-variables-primary-buttons-primary-button-error: rgba( 255, 255, 255, 1 ); --clarivize-variables-primary-buttons-primary-button-error-stroke: rgba( 255, 255, 255, 1 ); --clarivize-variables-primary-buttons-success-icon: rgba(255, 255, 255, 1); --clarivize-variables-secondary-buttons-secondary-button-hover: rgba( 255, 255, 255, 1 ); --clarivize-variables-secondary-buttons-tab-button-selected: rgba( 255, 255, 255, 1 ); --clarivize-variables-secondary-buttons-secondary-button-disabled: rgba( 255, 255, 255, 1 ); --clarivize-variables-secondary-buttons-seondary-button-rest-stroke: rgba( 255, 255, 255, 1 ); --clarivize-variables-secondary-buttons-secondary-button-hover-stroke: rgba( 255, 255, 255, 1 ); --clarivize-variables-secondary-buttons-secondary-button-disabled-stroke: rgba( 255, 255, 255, 1 ); --clarivize-variables-secondary-buttons-secondary-button-text-disabled: rgba( 255, 255, 255, 1 ); --clarivize-variables-secondary-buttons-secondary-button-text-rest: rgba( 255, 255, 255, 1 ); --clarivize-variables-TOC-buttons-tab-button-selected-hover: rgba( 255, 255, 255, 1 ); --clarivize-variables-TOC-buttons-tab-button-deselected-hover: rgba( 255, 255, 255, 1 ); --clarivize-variables-TOC-buttons-TOC-button-deselected: rgba( 255, 255, 255, 1 ); --clarivize-variables-TOC-buttons-TOC-button-deselected-hover: rgba( 255, 255, 255, 1 ); --clarivize-variables-TOC-buttons-TOC-button-selected-hover: rgba( 255, 255, 255, 1 ); --clarivize-variables-TOC-buttons-TOC-button-selected-stripe: rgba( 255, 255, 255, 1 ); --clarivize-variables-TOC-buttons-TOC-button-selected-text: rgba( 255, 255, 255, 1 ); --clarivize-variables-TOC-buttons-TOC-button-deselected-text: rgba( 255, 255, 255, 1 ); --clarivize-variables-keylines-black: rgba(255, 255, 255, 1); --clarivize-variables-keylines-darker-outline: rgba(255, 255, 255, 1); --clarivize-variables-keylines-box-outlines: rgba(255, 255, 255, 1); --clarivize-variables-keylines-row-lines: rgba(255, 255, 255, 1); --clarivize-variables-keylines-gray-BG: rgba(255, 255, 255, 1); --clarivize-variables-keylines-selected-BG: rgba(255, 255, 255, 1); --clarivize-variables-primary-buttons-primary-button-rest-duplicate: rgba( 0, 139, 250, 1 ); } [data-system-colors-mode="light"] { --system-colors-miscellaneous-floating-tab-text-unselected: rgba(9, 9, 9, 1); --system-colors-miscellaneous-floating-tab-pill-fill: rgba(255, 255, 255, 1); } [data-system-colors-mode="dark"] { --system-colors-miscellaneous-floating-tab-text-unselected: rgba( 171, 171, 177, 0.93 ); --system-colors-miscellaneous-floating-tab-pill-fill: rgba( 255, 255, 255, 0.07 ); } [data-system-colors-mode="dark-elevated"] { --system-colors-miscellaneous-floating-tab-text-unselected: rgba( 171, 171, 177, 0.93 ); --system-colors-miscellaneous-floating-tab-pill-fill: rgba( 255, 255, 255, 0.07 ); } [data-system-colors-mode="IC-light"] { --system-colors-miscellaneous-floating-tab-text-unselected: rgba(9, 9, 9, 1); --system-colors-miscellaneous-floating-tab-pill-fill: rgba(255, 255, 255, 1); } [data-system-colors-mode="IC-dark"] { --system-colors-miscellaneous-floating-tab-text-unselected: rgba( 171, 171, 177, 0.93 ); --system-colors-miscellaneous-floating-tab-pill-fill: rgba( 255, 255, 255, 0.22 ); } [data-system-colors-mode="IC-dark-elevated"] { --system-colors-miscellaneous-floating-tab-text-unselected: rgba( 171, 171, 177, 0.93 ); --system-colors-miscellaneous-floating-tab-pill-fill: rgba( 255, 255, 255, 0.22 ); }