Dark Mode
I have developed a dark mode plugin table/database that I would like to share and get feedback on. It adds a clickable monitor image in the upper right corner when the database is opened.
The entire formula could be entered in Trigger after open, but that would be rather long. Instead, I use a Formula field from the DM-Plugin table which can be hidden.
I am open to suggestions and requests and I will respond when I can.
75 replies
-
I have noticed that TABS with colors do not work so well in Dark Mode.
-
Alan Cooke This is with the new code from updated version sample Dark Mode. I am using Cloud Version. The blue for TABS and VIEWS can be hard to read I feel
-
Alan Cooke Note Sidebar does not change
-
Alan Cooke In the code you posted you are running my code after Jacques' code. I suggest you run mine first or place it above Jacques' code so that his rule changes will override mine.
Which browser are you using?
If you have access to the English Webinar would you please try opening the 001_Iconset Database and see if the results are the same regarding the Sidebar.
-
Sean Microsoft Edge which is Chrome based - will try your other suggestions and report back
-
Sean I have a light gray (my choice) for some TAB background colours. They are not replaced by Dark Mode. I also discovered that unless pinned the sidebar does not change colour from the blue. I have moved the Dark code to top most.
I checked Icon set and works fine for me but if you change the TAB colour via the Wrench/Admin it overides the Dark Mode setting which of course does make sense.
I did revert the colour by the way :-)
-
Alan Cooke Yes, I would be concerned if Dark Mode disabled the ability for style changes to be made using Ninox itself.
If I understand correctly, you need to change the field label color within a Tab? You can change the color of the field labels with - .component>label{color:Your-Color;}
The rule is already there you just need to change the color.
-
Alan Cooke you will probably want to limit changes to the Form so you will need to add another rule.
.form .component>label{color:Your-Color;}
-
-
Just a reminder, the Ninox Mac app is now free. If you have a Mac and use the Mac app you will get some functionality that isn't available in the browser app. One function is the ability to import Tables from other Ninox databases. That should save a lot of copying and pasting.
-
Sean Some Screenshoot on Darkmode
-
Rafael Great! I'm glad you got it working
-
-
New rules for Grouped table rows and the 4 square popup menu. The attached DB also includes Jacques' update.
.t-rowhead.group{background-color:#292929;}
.t-row.group .t-cell{background-color:#292929!important;}.PopupMenu_root{background-color:#292929;}
.PopupMenu_searchBar{border-color:#141414;}
.PopupMenuTab_sortable{color:#afafaf;background-color:#36393c;}
.PopupMenuTab_Selected{color:#4970ff;border-color:#4970ff;}
.PopupMenuTab:hover{color:#4970ff;background-color:#36393c;border-bottom:3px solid #4970ff;}-
Sean A kind of repo loading mechanism how Jacques TUR is doing it with ninext would be so cool
-
Martin Mueller Jacques and I have communicated about possibly adding Dark Mode to Ninext in the past. Since he already has a loading mechanism, it would make sense to use that. Plus I am very much a GitHub novice
.I also wanted to demonstrate the plugin possibilities with Ninox thanks to M. Daaboul and this post.
-
Sean Yes, I would be happy to add DarkMode to the Ninext project
. I just made it possilbe to load the code locally as you do in your example (see here). -
Jacques TUR Excellent, I will contact you as soon as I am able.
-
-
Alan Cooke said:
The blue for TABS and VIEWS can be hard to read I feelI plan on adding a feature that lets you choose a color from the Ninox Color field which will replace the appropriate color codes with the new color.
-
I am pleased to announce that DarkMode is integrated into the Ninext project.
You can now initialize it by adding darkMode : true (line 21) in the Ninext configuration:
function getNinext() do "// load the last GitHub version"; var res := http("GET", "https://raw.githubusercontent.com/JacquesTur/Ninext/main/dist/ninext.js", {}, {}); "// extract code and version number from GitHub result"; var vCode := text(res.result); var vVersion := extractx(vCode, "(?:var exModulesVersion = ')(.*)(')", "", "$1"); vCode end; dialog("Ninext intialization", "<div style='white-space: normal;' ; id='exLoadModule'></div> <script> window.exConfigLoadModules = { badges: true, viewEvent: true, buttonEvent : true, fieldsInspector: true, nativeJS: true, tableView: true, debugTracer : true, languages : true, errorsViewer : true, darkMode : true, autoCloseDialog: false };" + getNinext() + "</script>", ["close"])Thank you very much to Sean for sharing with us this excellent work on Ninox colors and for taking care of our eyes.
I am very honored that he invited me to include it in Ninext. -
@sean - as said before a first class job of doing this.
@jacques - great job of implementing this into your Ninetext project - very usable !!
Just shows what can be done. to Ninox ! - albeit not by me! I am light years behind these guys.
But sure glad you both exist on the forum. so i can keep learning!
-
Hello,
I wanted to let you all know that I haven't abandoned the Dark Mode project. I chose to wait and see what was going to happen with the Ninox updates and how Jacques TUR was going to proceed with Ninext.
I have communicated with Jacques and he has generously provided a launch page for me to load and modify the Dark Mode code. We agreed that it would be best to separate our projects and that means Dark Mode will eventually be removed from Ninext, but it can be loaded with this script in Trigger after open
var res := http("get", "https://www.ninext.fr/_functions/darkmode", { version: "1.1" }); dialog("Init Dark mode v" + res.result.version, html("<script>" + res.result.code + "</script>"), ["close"]);I had most of the applicable class names sorted out in Ninox version 3.7.15, but some have been changed with version 3.8+ and I will need to update those. If anyone finds a section that has not been updated and posts a description or image I will happily update ASAP.
Since the amount of time I have available to spend on this project is limited, this is how Dark Mode will accessed instead uploading databases with tables that can be imported.
-
Works great! Small issue is it seems 'spaces' do not change to dark mode. Is there something I need to do?
-
Alan Cooke Thanks Alan. Nothing for you to do in regards to using Dark Mode. I will need to add that to the rule list and I will try to get that done tonight.
-
Version 1.1.1 fixes spaces and line breaks. Still more to do, but that's for another evening
-
-
Version 1.1.2 fixes Choice and Yes/No combo box colors on a Form. Component highlighting on a Form in edit mode matches blue on dark color theme.
Content aside
-
6
Likes
- 3 mths agoLast active
- 75Replies
- 1547Views
-
13
Following