Light or Dark? Automatic Theme Detection.

AJAX(112) App Studio(7) Apple(1) Application Builder(245) Application Factory(207) ASP.NET(95) ASP.NET 3.5(45) ASP.NET Code Generator(72) ASP.NET Membership(28) Azure(18) Barcode(2) Barcodes(3) BLOB(18) Business Rules(1) Business Rules/Logic(140) BYOD(13) Caching(2) Calendar(5) Charts(29) Cloud(14) Cloud On Time(2) Cloud On Time for Windows 7(2) Code Generator(54) Collaboration(11) command line(1) Conflict Detection(1) Content Management System(12) COT Tools for Excel(26) CRUD(1) Custom Actions(1) Data Aquarium Framework(122) Data Sheet(9) Data Sources(22) Database Lookups(50) Deployment(22) Designer(177) Device(1) DotNetNuke(12) EASE(20) Email(6) Features(101) Firebird(1) Form Builder(14) Globalization and Localization(6) How To(1) Hypermedia(2) Inline Editing(1) Installation(5) JavaScript(20) Kiosk(1) Low Code(3) Mac(1) Many-To-Many(4) Maps(6) Master/Detail(36) Microservices(4) Mobile(63) Mode Builder(3) Model Builder(3) MySQL(10) Native Apps(5) News(18) OAuth(8) OAuth Scopes(1) OAuth2(11) Offline(20) Offline Apps(4) Offline Sync(5) Oracle(10) PKCE(2) PostgreSQL(2) PWA(2) QR codes(2) Rapid Application Development(5) Reading Pane(2) Release Notes(179) Reports(48) REST(29) RESTful(29) RESTful Workshop(15) RFID tags(1) SaaS(7) Security(80) SharePoint(12) SPA(6) SQL Anywhere(3) SQL Server(26) SSO(1) Stored Procedure(4) Teamwork(15) Tips and Tricks(87) Tools for Excel(2) Touch UI(93) Transactions(5) Tutorials(183) Universal Windows Platform(3) User Interface(338) Video Tutorial(37) Web 2.0(100) Web App Generator(101) Web Application Generator(607) Web Form Builder(40) Web.Config(9) Workflow(28)
Thursday, March 4, 2021PrintSubscribe
Light or Dark? Automatic Theme Detection.

 If you had a pleasure of setting up a new device recently, then you might remember the challenge of choosing between the Light and Dark themes for the user interface. The modern operating systems also have an optional automatic transition between the two based on the time of the day.

Touch UI does have two major theme variations called Light and Dark with multiple accents that make possible bringing a splash of color to each theme. Your app will automatically detect the theme of the device and switch the theme for you.

Here is an example of iPad Mini with the online app in Dark theme.

The color accent of the app will not change when the switch of the theme occurs. If you have designed your own brand accent or prefer a particular standard accent, then your customization choice will remain in place. 

If you are a Windows user willing to experiment with the automatic theme detection, then search for Theme in the Start menu, load up your app in the browser and try switching the dark and light app modes in the Colors settings.

Choose the dark colors and observe the instant change from Light to Dark: The browsers will go “dark” and so is the app.

Flick the switch and bring the light back. The user interface of the operating system changes and so does the application built with Code On Time. The screen shot shows Chrome, Edge, and FireFox respond in exactly the same way.

Your application will also detect that the theme has changed when it loads up.

If you prefer to force the particular theme for the application, then disable the theme detection in ~/touch-settings.json like this:

The dark mode of the operating system will be ignored.

Our recommendation is to keep the theme detection in the enabled state. Light color on the dark display or the dark panels on the light background may cause an unintended distress to the end users of your app.

If you have designed your own “brand-name” accent, then make sure that it supports both themes of Touch UI or make the specific adjustments as we do in the configuration of the Vantage accent found at ~\app\css\themes\touch-accent.vantage.json:

Labels: Features, Touch UI