122
Views
3
Comments
[Reactive OutSystemsUI Dark Mode] Using the DarkTheme CSS to change my Reactive Screen/block darkmode
instant-dark-theme
Reactive icon
Forge asset by José Pedro Proença
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
2021-03-18 21-03-15
Benjith Sam
 
MVP

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

2019-02-27 17-48-20
Caldeira81

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{}

2021-03-18 21-03-15
Benjith Sam
 
MVP

You are welcome, Caldeira.

Glad you got it solved and thank you for sharing the final implementation :)


Kind regards,

Benjith Sam

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.