app/views/custom_styles/_primer_color_mapping.erb
<style type="text/css">
/* Overwrite Primer primitives */
[data-color-mode] {
--body-background: var(--bgColor-default);
--body-font-color: var(--fgColor-default);
}
/* Override Primer variable to ensure compatibility with currently
configured design outside of high contrast mode */
[data-color-mode]:not([data-light-theme=light_high_contrast]) {
--fgColor-accent: var(--accent-color) !important;
--control-checked-bgColor-rest: var(--control-checked-color) !important;
--control-checked-bgColor-active: var(--control-checked-color) !important;
--control-checked-bgColor-hover: var(--control-checked-color--major1) !important;
--controlKnob-borderColor-checked: var(--control-checked-color) !important;
--button-primary-bgColor-rest: var(--button--primary-background-color) !important;
--button-primary-bgColor-hover: var(--button--primary-background-hover-color) !important;
--button-primary-bgColor-disabled: var(--button--primary-background-disabled-color) !important;
}
[data-light-theme=light_high_contrast]{
--avatar-border-color: var(--avatar-borderColor);
--list-item-hover--border-color: var(--control-transparent-borderColor-hover);
--list-item-hover--color: var(--fgColor-default);
--inplace-edit--border-color: var(--borderColor-default);
--ck-color-toolbar-border: var(--borderColor-default);
--ck-color-base-border: var(--borderColor-default);
--table-border-color: var(--borderColor-default);
--toolbar-item--bg-color: var(--button-default-bgColor-rest);
--toolbar-item--border-color: var(--borderColor-default);
--header-border-bottom-width: 1px;
--header-bg-color: var(--page-header-bgColor);
--header-item-font-color: var(--fgColor-default);
--header-item-bg-hover-color: var(--control-transparent-bgColor-hover);
--header-item-font-hover-color: var(--fgColor-default);
--header-border-bottom-color: var(--borderColor-muted) !important;
--main-menu-bg-color: var(--page-header-bgColor);
--main-menu-hover-font-color: var(--fgColor-default);
--main-menu-bg-selected-background: var(--control-transparent-bgColor-hover);
--main-menu-bg-hover-background: var(--control-transparent-bgColor-hover);
--main-menu-font-color: var(--fgColor-default);
--main-menu-selected-font-color: var(--fgColor-default);
--main-menu-border-color: var(--borderColor-muted);
--main-menu-resizer-color: var(--borderColor-muted);
--main-menu-bg-selected-border: var(--borderColor-muted);
--main-menu-hover-border-color: var(--fgColor-default) !important;
--main-menu-fieldset-header-color: var(--fgColor-muted) !important;
--main-menu-border-width: 1px;
--button-default-borderColor-rest: var(--borderColor-default);
--button--primary-background-hover-color: var(--button-primary-bgColor-hover);
--button--primary-background-color: var(--button-primary-bgColor-rest);
--button--active-border-color: var(--borderColor-default);
--button--background-hover-color: var(--button-default-bgColor-hover);
--button--background-color: var(--button-default-bgColor-rest);
--accent-color: var(--fgColor-accent);
--primary-button-color: var(--button-primary-bgColor-rest);
--status-selector-border-color: var(--button-default-borderColor-rest);
--link-text-decoration: underline;
}
</style>