Fluent Dark Theme???

[amirburbea]

Is there a good dark variant of the ICustomizations of @ui-fabric/fluent-theme? Basically the dark (or Neptune) theme from Azure Devops would be good.

I tried using AzureCustomizationsDark from @uifabric/azure-themes, it looks dated and lousy (Black text on blue buttons is harder to read for example). I tried using the Theme Designer on MS site and apply it to the Fluent Theme but it's not quite right, because its just the ITheme not the settings which correctly use the ITheme. Someone needs to build all the settings for a bunch of the controls that would look out of place and rather than me do all that, I'm assuming someone else already did.

I want to offer a toggle in my app from light theming to dark, but for now only light (fluent) is any good

[Vitalius1]

@amirburbea, theoretically you don’t need @uifabric/fluent-theme package if you are on Fabric 7. That package is mainly for users still on Fabric 6 but want to have the new fluent looks. What version are you on and if it’s 6 can you upgrade to 7 and have fluent by default?

Don’t forget that besides creating a new theme palette you can also modify the values of the semanticColors property of the theme to fix some of the look out of place controls.

I think there is a current effort in building a Fabric dark theme that is used by one of our partners. @phkuo might have some context about how they implemented it.

[phkuo]

@amirburbea I would also suggest looking at tweaking the semantic slot colors, and making sure you're using the Azure customizations against the correct version of Fabric that it's built for (I assume Fabric 6). The reason for that is that buttons pull from very different slots in Fabric 6 than 7.

Otherwise, you can try this palette for your theme:

    neutralLighterAlt: '#282828',
    neutralLighter: '#313131',
    neutralLight: '#3f3f3f',
    neutralQuaternaryAlt: '#484848',
    neutralQuaternary: '#4f4f4f',
    neutralTertiaryAlt: '#6d6d6d',
    neutralTertiary: '#c8c8c8',
    neutralSecondary: '#d0d0d0',
    neutralPrimaryAlt: '#dadada',
    neutralPrimary: '#ffffff',
    neutralDark: '#f4f4f4',
    black: '#f8f8f8',
    white: '#1f1f1f',

You can mix that with your choice of primary color, for example a dark blue:

        themePrimary: "#3a96dd",
        themeLighterAlt: "#020609",
        themeLighter: "#091823",
        themeLight: "#112d43",
        themeTertiary: "#235a85",
        themeSecondary: "#3385c3",
        themeDarkAlt: "#4ba0e1",
        themeDark: "#65aee6",
        themeDarker: "#8ac2ec",
        accent: "#3a96dd"

[amirburbea]

Trying to use 7, I did the following but it still didn't look all that great with the colors, maybe one day when i have time I can dig into the semantic colors.

import React, { FunctionComponent } from 'react';
import {
  Customizer,
  ICustomizations
} from 'office-ui-fabric-react/lib/Utilities';
import {
  PrimaryButton,
  DefaultButton
} from 'office-ui-fabric-react/lib/Button';
import {
  ComboBox
} from 'office-ui-fabric-react/lib/ComboBox';
import { createTheme } from 'office-ui-fabric-react/lib/Styling';

const dark:ICustomizations = {
  settings: {
    theme: createTheme({
      palette: {
        neutralLighterAlt: '#282828',
        neutralLighter: '#313131',
        neutralLight: '#3f3f3f',
        neutralQuaternaryAlt: '#484848',
        neutralQuaternary: '#4f4f4f',
        neutralTertiaryAlt: '#6d6d6d',
        neutralTertiary: '#c8c8c8',
        neutralSecondary: '#d0d0d0',
        neutralPrimaryAlt: '#dadada',
        neutralPrimary: '#ffffff',
        neutralDark: '#f4f4f4',
        black: '#f8f8f8',
        white: '#1f1f1f',
        themePrimary: '#3a96dd',
        themeLighterAlt: '#020609',
        themeLighter: '#091823',
        themeLight: '#112d43',
        themeTertiary: '#235a85',
        themeSecondary: '#3385c3',
        themeDarkAlt: '#4ba0e1',
        themeDark: '#65aee6',
        themeDarker: '#8ac2ec',
        accent: '#3a96dd'
      }
    })
  },
  scopedSettings: {}
};

const INITIAL_OPTIONS = [{ key: 'J', text: 'Option J' }];

....


const Test:FunctionComponent = ()=>(
<Fabric>
      <Customizer {...dark}>
        <PrimaryButton text="Button" />
        <ComboBox options={INITIAL_OPTIONS} />
        <DefaultButton text="Other Button" />
      </Customizer>
    </Fabric>
);

[Vitalius1]

@amirburbea I believe to have a granular control over your theme you most definitely have to tap into semanticColors.
I will soft close the issue with Not an issue label or if you have more questions, feel free to to ask and I will reopen it. Thanks for submitting the issue. It will serve as search result for anyone else interested in this kind of questions.

[msft-github-bot]

This issue has been marked as being beyond the support scope of UI Fabric's issues board. It will now be closed automatically for house-keeping purposes.