6

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

null
    • Ninox developper
    • Jacques_TUR
    • 1 yr ago
    • Reported - view

    This is really brilliant!!!
    And your idea of putting the code in a table to be executed locally without needing Interent access is very good too. I'm going to take inspiration from it.
    It would be nice to also have a system that checks if an online update is available and loads it automatically if it is. I will think about it.

    Thank you very much for this less aggressive display mode for our eyes 馃檹

      • Sean
      • 1 yr ago
      • Reported - view

      Jacques TUR Thank you 馃檹.

      I have some apps that do check the version number and let me know that a new version is available, but they require confirmation from me to download the new version. I did do some very limited testing where I tried read a file to get a version number from GitHub using Ninox without success. I'm not saying it can't be done, I just didn't get it to work.

    • Mel_Charles
    • 1 yr ago
    • Reported - view

    Sean.... love ... Love .... LOVE THIS...

    Practical and useful and may I say "Superb bit of scripting"

    Such a great idea that I have nicked it and using it in my live DB already

    One tiny bit of a change I would like to make is that cos I am colour blind the "bluey ish" text colour is hard for me the see at the head. Could you tell me where I make the change in what fomula field to say yellow? 

      • Sean
      • 1 yr ago
      • Reported - view

      Mel Charles Thank you 馃檹 

      I will get that to you shortly. I did most of the testing with the Mac app and I noticed in your screenshot that there is still a lot of white where there should be gray. Did you change anything?

       

      Having a bite of breakfast and will get that rule to you afterwards.

      • Sean
      • 1 yr ago
      • Reported - view

      Mel Charles The rule you want to change is .TabsRow_view{color:yellow;}

      Here is an example screenshot from the 001_Iconset Database in the Webinar EN 2022 team...

      • Mel_Charles
      • 1 yr ago
      • Reported - view

      Sean Hi Sean

      Thanks for the further update. I actually quite like the white panel for the data area and effectively having all the edging go dark mode. Going yellow really helps people like me so very much appreciated.... 馃槉

    • Mel_Charles
    • 1 yr ago
    • Reported - view

    Also this comes into its own when I have 2 versions of the same DB open at same time and am testing code in the second version. with the colour change I  can instantly which one I have flicked into to.

    • Sean
    • 1 yr ago
    • Reported - view

    Just a couple of rules to add to change the horizontal and vertical scroll indicator color from nearly white to nearly black...

    .t-scroll-v-indicator{background-color:#141414;}
    .t-scroll-h-indicator{background-color:#141414;}
     

    Also, attached updated database file.

      • Alan_Cooke
      • 1 yr ago
      • Reported - view

      Sean Hi,  I have created this table in my DB exactly as the above example.  I have no errors showing up and have copied all the code, formulae etc into the table.  I have set the options, hidden, global etc exactly as the sample.  Essetinally I have duplicated in every aspect that I can see.  I do not have the Dark Mode Icon top right however.

      Any idea why this might be?
       

      • Alan_Cooke
      • 1 yr ago
      • Reported - view

      Alan Cooke Sorted!!

      • Rafael Sanchis
      • Rafael_Sanchis
      • 1 yr ago
      • Reported - view

      Alan Cooke Hi Alan Hiden where? I have the icon but don't work for me.

      Thankd

      • Alan_Cooke
      • 1 yr ago
      • Reported - view

      Rafael I had no icon top right.  That was because I missed the script in Options - trigger after open.  The table and all it's fields, formulas I simply created in my DB and copy and pasted code etc.

      • Sean
      • 1 yr ago
      • Reported - view

      Rafael Have you downloaded the DarkMode.ninox file? Could you let me know once you import it if it works by itself without trying to move it to other databases. Thanks

      • Rafael Sanchis
      • Rafael_Sanchis
      • 1 yr ago
      • Reported - view

      Sean Hi,  Yes I download the DarkMode.ninox and it work excelent, ( I work with Android  Galaxy Tablet S8+) but when try to move to another DB I saw the Icon but not do anything. I sent you a screenshot on Android Tablet

    • Cloud DevOps Fullstack Engineer
    • Martin_Mueller
    • 1 yr ago
    • Reported - view

    Sean thanks a lot. So much better 馃槏

    • Mel_Charles
    • 1 yr ago
    • Reported - view

    Sean.. there is a small minor glitch that i have found insofar as if you have quite a few table views then your monitor logo is ever so slightly positioned over the Ninox 4 square symbol that allows opening a full list of views that are available. Thus you can no longer click the Ninox option as it will not function

      • Ninox developper
      • Jacques_TUR
      • 1 yr ago
      • Reported - view

       Sean  I emailed you about this with a potential solution.  Did you receive it ?

      • Ninox developper
      • Jacques_TUR
      • 1 yr ago
      • Reported - view

      Mel Charles I had the same problem with my icons. To fix it, I just insert this line after the initialization of the icon:

      document.querySelector('.header-body').style.marginRight = document.querySelector('.header-admin-container').clientWidth + 'px';
      

      • Mel_Charles
      • 1 yr ago
      • Reported - view

      Jacques TUR PERFECT ! 馃榿

    • Sean
    • 1 yr ago
    • Reported - view

    Hi everyone, thank you for your feedback.

    Mel Charles, Jacques TUR I haven't created enough Views to see the 4 square symbol. When I saw it in Mel's screenshot yesterday, I wasn't sure what it was for 馃槄.

    Thank you Jacques for your solution. I will add it to further updates of the DarkMode database. 

      • Mel_Charles
      • 1 yr ago
      • Reported - view

      Sean ah ha - I must be the only person with dozens of views - I always had the feeling I was being a bit over the top - Thanks Sean 馃檪

    • Alan_Cooke
    • 1 yr ago
    • Reported - view

    I have noticed that TABS with colors do not work so well in Dark Mode.

      • Sean
      • 1 yr ago
      • Reported - view

      Alan Cooke Can you provide more information? Does the dark mode plugin override the Tab colors? Ninox colors or Ninext colors?

      • Sean
      • 1 yr ago
      • Reported - view

      Alan Cooke I think if you run my code before Jacques code in Trigger after open, his style changes will override my style changes. I think that鈥檚 what you want, right?

      • Alan_Cooke
      • 1 yr ago
      • Reported - view

      Sean I made sure of that.  I will send a screen shot or two to illustrate the TAB background colour issue.

      var code := http("GET", "https://raw.githubusercontent.com/JacquesTur/Ninext/main/loadModules.html").result;
      dialog("Ninext intialization", "<script>
      window.exConfigLoadModules = {
          completion: false,
          badges: true,
          evalJS: true,
          viewEvent: true,
          buttonEvent : true,
          fieldsInspector: true,
          nativeJS: true,
          tableView: true,
          autoCloseDialog: true
      };
      </script>" + code, ["close"]);
      openTable("HOME", "MAIN MENU");
      "---------------------";
      dialog("Dark Mode CSS Plugin", record('DM-Plugin',1).'DM-Code', ["close"])

      Screenshot Dark Mode.
      TAB colour does not change
      Field names are lost

Content aside

  • 6 Likes
  • 3 wk agoLast active
  • 75Replies
  • 1485Views
  • 13 Following