Dark Mode

Are there any idea’s how we will support dark mode? I assume we’ll be using a CascadingParameter to choose the theme or do you have any other idea’s?

[Hona]

I am planning on implementing my ThemeProvider into AntBlazor natively soon

[Hona]

@diegofrata Using modifyVars at runtime for every user is expensive, it takes about 4 seconds in my testing.

# Now compile Ant Design less into CSS with custom theme
FROM node as theme
WORKDIR /theme
COPY --from=build /src/publish/wwwroot/_content/AntDesign/less/ .
COPY ["config/customTheme.less", "customTheme.less"]
RUN npm install less -g
RUN npm install less-plugin-clean-css -g
RUN lessc --clean-css="--s1 --advanced --compatibility=ie8" --js customTheme.less customTheme.css

FROM nginx:alpine
WORKDIR /var/www/web
COPY --from=build /src/publish/wwwroot .
COPY --from=theme /theme/customTheme.css css/customTheme.css
COPY ["Frontend/SharksApp.Frontend.Web/nginx.conf", "/etc/nginx/nginx.conf"]
EXPOSE 80

For anyone trying to implement this themselves, I made custom themes in my docker file this way.

customTheme.css:

@import "ant-design-blazor.less";

// Override variables here
@primary-color: #1890ff; // primary color for all components
@link-color: #1890ff; // link color
@success-color: #52c41a; // success state color
@warning-color: #faad14; // warning state color
@error-color: #f5222d; // error state color
@font-size-base: 14px; // major text font size
@heading-color: rgba(0, 0, 0, 0.85); // heading text color
@text-color: rgba(0, 0, 0, 0.65); // major text color
@text-color-secondary: rgba(0, 0, 0, 0.45); // secondary text color
@disabled-color: rgba(0, 0, 0, 0.25); // disable state color
@border-radius-base: 2px; // major border radius
@border-color-base: #d9d9d9; // major border color
@box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
0 9px 28px 8px rgba(0, 0, 0, 0.05); // major shadow for layers