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
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
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{}
You are welcome, Caldeira.
Glad you got it solved and thank you for sharing the final implementation :)