21
Views
3
Comments
[Reactive OutSystemsUI Dark Mode] Using the DarkTheme CSS to change my Reactive Screen/block darkmode
Forge component by José Pedro Proença
7
Published on 15 Jun 2020
Application Type
Reactive

I am trying to use Reactive OutsystemsUi Dark Mode  from Forge:

Enable Dark Mode on your app  just calling a client action, trying to activate or deactivate dark theme.

I apply the JS script, imported the css file to resources, created  the client variable, the action to a button inside a block from a screen.


I changed the js script to print to console:

...

function appendDarkThemeCSSFile(){

    console.log('func appendDarkThemeCSSFile(): ');

    // source: https://www.geeksforgeeks.org/how-to-load-css-files-using-javascript/

    // Get HTML head element 

    var head = document.getElementsByTagName('HEAD')[0];  

     console.log('func appendDarkThemeCSSFile(): ' + head);

    // Create new link Element 

    var link = document.createElement('link'); 

     console.log('func appendDarkThemeCSSFile(): ' + link);

    // set the attributes for link element  

    link.rel = 'stylesheet';  

    link.id = 'DarkThemeLink';

    link.type = 'text/css'; 

    link.href = 'IndependentApp1_UI/css/DarkTheme.css';  

     console.log('func appendDarkThemeCSSFile(): link ' + link);

    // Append link element to HTML head 

    head.appendChild(link);

}


Realy dont know if is an html link construction error or acess problem the error 

Refused to apply style from 'https://filipe-caldeira81.outsystemscloud.com/IndependentApp1_UI/IndependentApp1_UI/css/DarkTheme.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

This happened to anyone?

Thanks 

CSS.PNG

mvp_badge
MVP
Rank: #78

Hi Caldeira,

Sorry for the late reply. In one of my sample application, I used the same forge component Sample App - DigitalGarage and it's working fine for me. Could you please try with the below mentioned steps:

Steps to follow:

1) Add the required Forge component reference to the working application module.

2) Add/include the referenced JS file to the respective Screen Required Scripts section as shown below

3) On the button click, call the ToogleDarkTheme referenced client action as shown below

Hope this helps you!


Kind regards,

Benjith Sam

Rank: #3197

Hi Benjith Sam, thank you for your anwser.


I did the 3 steps and something missing because it didn´t work, so i copy those elements diretly to my project not referenced but the script and the action flow i created in my module.

It did work for me doing the 

"Just add a CSS definition for your elements with the class .dark-theme" accordling with the author:

You can also change all the values by adding this definition to your CSS:

html.dark-theme{}