Code in CodeSnippet component is not visible in dark mode.

[meliora-solution]

I am using FluentUI CodeSnippet Component NET 8. Can Anybody tell me why with dark theme, the code are not visible ?

Source Code.

<CodeSnippet>
    &lt;main&gt;
    &lt;nav&gt;
    :
    &lt;/nav&gt;
    &lt;div class=&quot;content&quot;&gt;
    &lt;article id=&quot;article&quot;&gt;
    &lt;FluentMessageBarProvider Section="MESSAGES_TOP"/&gt;
    @@Body
    &lt;/article&gt;
    &lt;/div&gt;
    &lt;/main&gt;
</CodeSnippet>

With light theme, CodeSnippet is visible.

[dvoituron]

CodeSnippet is not a FluentUI-Blazor component. It's only a component used in our Demo website.

This component uses the highlightjs JavaScript Lib and requires you to specify the correct style to use: vs.min.css (Light) or vs2015.min.css (Dark).
You can find all the code details in this file: highlight-extensions.js

[meliora-solution]

I create a web site based on the the sample code from https://www.fluentui-blazor.net/. I am using the sample web site for my project documentation. For my project , highlight.js for CodeSnippet in dark mode is still not working. in this site https://www.fluentui-blazor.net/ hightlight.js is working good.

Yes, in highlight.js light mode is in vs.min.css and dark mode in vs2015.min.css.

highlight.js Code

hljs_addStylesheet('https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11.6.0/styles/vs.min.css', 'highlight-light', null);
hljs_addStylesheet('https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11.6.0/styles/vs2015.min.css', 'highlight-dark', 'disabled');

hljs_addInlineStylesheet(`pre[class~="snippet"] {
    --font-monospace: "courier";
    --type-ramp-base-font-variations: unset;
    font-weight: bold;
    }`);
...

I read the sample code over and over to find out what is wrong in my code ? I dont know what I miss ??

There is another error, Notification. Even in this site https://www.fluentui-blazor.net/, it throw an exception in my maschine.

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Unable to set property 'onclick' on object of type 'Microsoft.FluentUI.AspNetCore.Components.FluentAnchor'. The error was: Arg_InvalidCastException
System.InvalidOperationException: Unable to set property 'onclick' on object of type 'Microsoft.FluentUI.AspNetCore.Components.FluentAnchor'. The error was: Arg_InvalidCastException
 ---> System.InvalidCastException: Arg_InvalidCastException
   at Microsoft.AspNetCore.Components.Reflection.PropertySetter.CallPropertySetter[FluentAnchor,EventCallback](Action`2 setter, Object target, Object value)
   at Microsoft.AspNetCore.Components.Reflection.ComponentProperties.<SetProperties>g__SetProperty|3_0(Object , PropertySetter , String , Object )

[dvoituron]

The error talks about onclick. The last release uses an click event called OnClick

[meliora-solution]

Try to click Notification in your machine on this address https://www.fluentui-blazor.net/. Does it throw an exception ? Because in my machine the notification is not working.

[meliora-solution]

By the way the sample code of new version now is much simpler and easier to understand compare with previous version. It only takes a few hours to create a similar web site by following the samples code. It takes me much faster than before because I already learn the code from previous version. I think the site is faster too. Excellent job. Thank you.

[meliora-solution]

I got it. I need to add this line of code in _layout.cshtml.

  <!-- Set the default theme ("mode" value overrides "storage-name" mode value) -->
  <script src="_content/Microsoft.FluentUI.AspNetCore.Components/js/loading-theme.js" type="text/javascript"></script>
  <loading-theme storage-name="theme" random-color="true"></loading-theme>

It looks good now.