Theme-aware Custom CSS

This topic has 1 reply, 2 voices, and was last updated 6 months, 3 weeks ago by Alexander Bautz.

Viewing 1 reply thread

Author

Posts

August 26, 2025 at 14:48 #38857

Participant

Hello. I figured something out recently which I wanted to share in hopes it may be useful to others. I was creating a 5-star rating component for some DFFS forms (I will post another topic to explain my solution to this) and really wanted to make the stars theme-aware. I wanted to make the CSS something I could copy/paste on future forms without having to modify the colors to match a different theme. In addition, the site I was working on has a custom theme applied and I didn’t want to have to track down the colors I needed.

I am aware of how you can use the site theme in SPFx while developing, but since I was applying Custom CSS without access to the underlying SCSS used to build DFFS I could not use that method. I am also aware of how you can design a custom theme online at https://aka.ms/themedesigner, but I could not figure out how to access these variables in CSS. I googled various terms trying to find what I needed but wasn’t really getting the answer. Finally, I decided to explore the SharePoint list I was working on to see if I could figure out if there was a way I could mimic the colors of the “+ Add new item” button since this button obviously follows the theme of the site. I opened the Developer tools and inspected the button and found the solution! Not only did I see what I needed for this SPECIFIC color, but I finally found a good list of many of the available variables and how you can use these in your own custom CSS.

First of all, this is the CSS for the button I inspected:


.item_cb8e3e55.primary_cb8e3e55 {
    background: var(--ms-semanticColors-primaryButtonBackground);
    color: var(--ms-semanticColors-primaryButtonText);
    font-weight: 500;
    padding: 0 12px;
    margin: 0 8px;
}

This gave me the background color I was looking for. This also illustrates the way to use the variables: wrap them in var(). While this is probably something many people know, I had not previously worked with variables much in CSS, so I wanted to point it out for others like me.

Second, if you can find a variable in use in Developer tools, you can follow the variable to see where it is declared. I did this and it brought me to a long list with many variables available for me to use. These work perfectly if you use them in your own custom CSS in DFFS! Here is the list. If you pull this up in your browser’s developer tools you can see the colors for the theme in use on your own site. There are other variables declared elsewhere which you can hunt down too if you inspect an element with a color/style/effect you like.


html {
    --ms-palette-themeDarker: #014446;
    --ms-palette-themeDark: #025c5f;
    --ms-palette-themeDarkAlt: #026d70;
    --ms-palette-themePrimary: #03787C;
    --ms-palette-themeSecondary: #13898d;
    --ms-palette-themeTertiary: #49aeb1;
    --ms-palette-themeLight: #98d6d8;
    --ms-palette-themeLighter: #c5e9ea;
    --ms-palette-themeLighterAlt: #f0f9fa;
    --ms-palette-black: #000000;
    --ms-palette-blackTranslucent40: rgba(0, 0, 0, .4);
    --ms-palette-neutralDark: #201f1e;
    --ms-palette-neutralPrimary: #323130;
    --ms-palette-neutralPrimaryAlt: #3b3a39;
    --ms-palette-neutralSecondary: #605e5c;
    --ms-palette-neutralSecondaryAlt: #8a8886;
    --ms-palette-neutralTertiary: #a19f9d;
    --ms-palette-neutralTertiaryAlt: #c8c8c8;
    --ms-palette-neutralQuaternary: #d0d0d0;
    --ms-palette-neutralQuaternaryAlt: #dadada;
    --ms-palette-neutralLight: #eaeaea;
    --ms-palette-neutralLighter: #f4f4f4;
    --ms-palette-neutralLighterAlt: #f8f8f8;
    --ms-palette-accent: #03787C;
    --ms-palette-white: #ffffff;
    --ms-palette-whiteTranslucent40: rgba(255, 255, 255, .4);
    --ms-palette-yellowDark: #d29200;
    --ms-palette-yellow: #ffb900;
    --ms-palette-yellowLight: #fff100;
    --ms-palette-orange: #d83b01;
    --ms-palette-orangeLight: #ea4300;
    --ms-palette-orangeLighter: #ff8c00;
    --ms-palette-redDark: #a4262c;
    --ms-palette-red: #e81123;
    --ms-palette-magentaDark: #5c005c;
    --ms-palette-magenta: #b4009e;
    --ms-palette-magentaLight: #e3008c;
    --ms-palette-purpleDark: #32145a;
    --ms-palette-purple: #5c2d91;
    --ms-palette-purpleLight: #b4a0ff;
    --ms-palette-blueDark: #002050;
    --ms-palette-blueMid: #00188f;
    --ms-palette-blue: #0078d4;
    --ms-palette-blueLight: #00bcf2;
    --ms-palette-tealDark: #004b50;
    --ms-palette-teal: #008272;
    --ms-palette-tealLight: #00b294;
    --ms-palette-greenDark: #004b1c;
    --ms-palette-green: #107c10;
    --ms-palette-greenLight: #bad80a;
    --ms-palette-primaryBackground: #ffffff;
    --ms-palette-primaryText: #323130;
    --ms-palette-backgroundOverlay: ;
    --ms-palette-suiteBarBackground: #03787C;
    --ms-palette-suiteBarText: #ffffff;
    --ms-palette-suiteBarDisabledText: #eaeaea;
    --ms-palette-topBarBackground: #eaeaea;
    --ms-palette-topBarText: #605e5c;
    --ms-palette-topBarHoverText: #323130;
    --ms-palette-dialogBorder: #f4f4f4;
    --ms-palette-backgroundColor: #ffffff;
    --ms-palette-backgroundImageUri: none;
    --ms-semanticColors-bodyBackground: #ffffff;
    --ms-semanticColors-bodyFrameBackground: #ffffff;
    --ms-semanticColors-accentButtonText: #ffffff;
    --ms-semanticColors-buttonBackground: #ffffff;
    --ms-semanticColors-primaryButtonText: #ffffff;
    --ms-semanticColors-primaryButtonTextHovered: #ffffff;
    --ms-semanticColors-primaryButtonTextPressed: #ffffff;
    --ms-semanticColors-inputBackground: #ffffff;
    --ms-semanticColors-inputForegroundChecked: #ffffff;
    --ms-semanticColors-listBackground: #ffffff;
    --ms-semanticColors-menuBackground: #ffffff;
    --ms-semanticColors-cardStandoutBackground: #ffffff;
    --ms-semanticColors-bodyTextChecked: #000000;
    --ms-semanticColors-buttonTextCheckedHovered: #000000;
    --ms-semanticColors-link: #03787C;
    --ms-semanticColors-primaryButtonBackground: #03787C;
    --ms-semanticColors-inputBackgroundChecked: #03787C;
    --ms-semanticColors-inputIcon: #03787C;
    --ms-semanticColors-inputFocusBorderAlt: #03787C;
    --ms-semanticColors-menuIcon: #03787C;
    --ms-semanticColors-menuHeader: #03787C;
    --ms-semanticColors-accentButtonBackground: #03787C;
    --ms-semanticColors-primaryButtonBackgroundPressed: #025c5f;
    --ms-semanticColors-inputBackgroundCheckedHovered: #025c5f;
    --ms-semanticColors-inputIconHovered: #025c5f;
    --ms-semanticColors-linkHovered: #014446;
    --ms-semanticColors-primaryButtonBackgroundHovered: #026d70;
    --ms-semanticColors-inputPlaceholderBackgroundChecked: #c5e9ea;
    --ms-semanticColors-bodyBackgroundChecked: #eaeaea;
    --ms-semanticColors-bodyFrameDivider: #eaeaea;
    --ms-semanticColors-bodyDivider: #eaeaea;
    --ms-semanticColors-variantBorder: #eaeaea;
    --ms-semanticColors-buttonBackgroundCheckedHovered: #eaeaea;
    --ms-semanticColors-buttonBackgroundPressed: #eaeaea;
    --ms-semanticColors-listItemBackgroundChecked: #eaeaea;
    --ms-semanticColors-listHeaderBackgroundPressed: #eaeaea;
    --ms-semanticColors-menuItemBackgroundPressed: #eaeaea;
    --ms-semanticColors-menuItemBackgroundChecked: #eaeaea;
    --ms-semanticColors-bodyBackgroundHovered: #f4f4f4;
    --ms-semanticColors-buttonBackgroundHovered: #f4f4f4;
    --ms-semanticColors-buttonBackgroundDisabled: #f4f4f4;
    --ms-semanticColors-buttonBorderDisabled: #f4f4f4;
    --ms-semanticColors-primaryButtonBackgroundDisabled: #f4f4f4;
    --ms-semanticColors-disabledBackground: #f4f4f4;
    --ms-semanticColors-listItemBackgroundHovered: #f4f4f4;
    --ms-semanticColors-listHeaderBackgroundHovered: #f4f4f4;
    --ms-semanticColors-menuItemBackgroundHovered: #f4f4f4;
    --ms-semanticColors-primaryButtonTextDisabled: #d0d0d0;
    --ms-semanticColors-disabledSubtext: #d0d0d0;
    --ms-semanticColors-listItemBackgroundCheckedHovered: #dadada;
    --ms-semanticColors-disabledBodyText: #a19f9d;
    --ms-semanticColors-variantBorderHovered: #a19f9d;
    --ms-semanticColors-buttonTextDisabled: #a19f9d;
    --ms-semanticColors-inputIconDisabled: #a19f9d;
    --ms-semanticColors-disabledText: #a19f9d;
    --ms-semanticColors-bodyText: #323130;
    --ms-semanticColors-actionLink: #323130;
    --ms-semanticColors-buttonText: #323130;
    --ms-semanticColors-inputBorderHovered: #323130;
    --ms-semanticColors-inputText: #323130;
    --ms-semanticColors-listText: #323130;
    --ms-semanticColors-menuItemText: #323130;
    --ms-semanticColors-bodyStandoutBackground: #f8f8f8;
    --ms-semanticColors-defaultStateBackground: #f8f8f8;
    --ms-semanticColors-actionLinkHovered: #201f1e;
    --ms-semanticColors-buttonTextHovered: #201f1e;
    --ms-semanticColors-buttonTextChecked: #201f1e;
    --ms-semanticColors-buttonTextPressed: #201f1e;
    --ms-semanticColors-inputTextHovered: #201f1e;
    --ms-semanticColors-menuItemTextHovered: #201f1e;
    --ms-semanticColors-bodySubtext: #605e5c;
    --ms-semanticColors-focusBorder: #605e5c;
    --ms-semanticColors-inputBorder: #605e5c;
    --ms-semanticColors-smallInputBorder: #605e5c;
    --ms-semanticColors-inputPlaceholderText: #605e5c;
    --ms-semanticColors-buttonBorder: #8a8886;
    --ms-semanticColors-disabledBodySubtext: #c8c8c8;
    --ms-semanticColors-disabledBorder: #c8c8c8;
    --ms-semanticColors-buttonBackgroundChecked: #c8c8c8;
    --ms-semanticColors-menuDivider: #c8c8c8;
    --ms-semanticColors-cardShadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108);
    --ms-semanticColors-cardShadowHovered: 0 0 1px #a19f9d;
    --ms-semanticColors-primaryButtonBorder: transparent;
    --ms-semanticColors-errorText: #a4262c;
    --ms-semanticColors-messageText: #323130;
    --ms-semanticColors-messageLink: #005A9E;
    --ms-semanticColors-messageLinkHovered: #004578;
    --ms-semanticColors-infoIcon: #605e5c;
    --ms-semanticColors-errorIcon: #A80000;
    --ms-semanticColors-blockingIcon: #FDE7E9;
    --ms-semanticColors-warningIcon: #797775;
    --ms-semanticColors-severeWarningIcon: #D83B01;
    --ms-semanticColors-successIcon: #107C10;
    --ms-semanticColors-infoBackground: #f3f2f1;
    --ms-semanticColors-errorBackground: #FDE7E9;
    --ms-semanticColors-blockingBackground: #FDE7E9;
    --ms-semanticColors-warningBackground: #FFF4CE;
    --ms-semanticColors-severeWarningBackground: #FED9CC;
    --ms-semanticColors-successBackground: #DFF6DD;
    --ms-semanticColors-warningHighlight: #ffb900;
    --ms-semanticColors-successText: #107C10;
    --ms-semanticColors-listTextColor: #323130;
    --ms-semanticColors-warningText: #323130;
    --ms-fonts-tiny-fontSize: 10px;
    --ms-fonts-tiny-fontWeight: 400;
    --ms-fonts-xSmall-fontSize: 10px;
    --ms-fonts-xSmall-fontWeight: 400;
    --ms-fonts-small-fontSize: 12px;
    --ms-fonts-small-fontWeight: 400;
    --ms-fonts-smallPlus-fontSize: 12px;
    --ms-fonts-smallPlus-fontWeight: 400;
    --ms-fonts-medium-fontSize: 14px;
    --ms-fonts-medium-fontWeight: 400;
    --ms-fonts-mediumPlus-fontSize: 16px;
    --ms-fonts-mediumPlus-fontWeight: 400;
    --ms-fonts-large-fontSize: 18px;
    --ms-fonts-large-fontWeight: 400;
    --ms-fonts-xLarge-fontSize: 20px;
    --ms-fonts-xLarge-fontWeight: 600;
    --ms-fonts-xLargePlus-fontSize: 24px;
    --ms-fonts-xLargePlus-fontWeight: 600;
    --ms-fonts-xxLarge-fontSize: 28px;
    --ms-fonts-xxLarge-fontWeight: 600;
    --ms-fonts-xxLargePlus-fontSize: 32px;
    --ms-fonts-xxLargePlus-fontWeight: 600;
    --ms-fonts-superLarge-fontSize: 42px;
    --ms-fonts-superLarge-fontWeight: 600;
    --ms-fonts-mega-fontSize: 68px;
    --ms-fonts-mega-fontWeight: 600;
    --ms-effects-elevation4: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108);
    --ms-effects-elevation8: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108);
    --ms-effects-elevation16: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
    --ms-effects-elevation64: 0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18);
    --ms-effects-roundedCorner2: 2px;
    --ms-effects-roundedCorner4: 4px;
    --ms-effects-roundedCorner6: 6px;
}

I hope this helps someone. I was very excited when I discovered this and wanted to share with the DFFS community.