Light and Dark

Labels
AJAX(112) App Studio(8) 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(9) OAuth Scopes(1) OAuth2(13) Offline(20) Offline Apps(4) Offline Sync(5) Oracle(11) PKCE(2) Postgre SQL(1) PostgreSQL(2) PWA(2) QR codes(2) Rapid Application Development(5) Reading Pane(2) Release Notes(184) Reports(48) REST(29) RESTful(29) RESTful Workshop(15) RFID tags(1) SaaS(7) Security(81) 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)
Archive
Blog
Wednesday, December 27, 2017PrintSubscribe
Light and Dark

Long dark winter nights are calling for a different kind of GUI. Here comes the “Dark” theme.

New 'Dark' theme in an app build with Touch UI and Code On Time app generator.

Place the following in ~/touch-settings.json to lock-in the Dark theme with the Bitter Sweet accent.  This configuration will also disable “Settings” option in the GUI.

{
  "ui": {
    "theme": {
      "name": "Dark",
      "accent": "BitterSweet"
    },
    "transitions": { "style": "slide" }
  },
  "settings": { "enabled": true }
}

This is the “Light” version of the same app. It works best if you use the device in the bright light.

The 'Light' theme in an app build with Touch UI and Code On Time app generator.

Light and Dark theme are provided to give developers more options to express themselves and to allow upcoming native apps to have day and night time versions of the GUI, while still enabling rich customization with accents.

Accents do look more dramatic with the “Dark” theme. Try building your own theme accent now!

Dark theme with Construct accent in the app created with Code On Time.

Dark theme with Construct accent in the app created with Code On Time.

Dark theme with Construct accent in the app created with Code On Time. The context menu is open.

Dark theme with Construct accent in the app created with Code On Time. The context menu is open.

Dark theme with Construct accent in the app created with Code On Time. The sidebar is hidden and the tab bar is displays icons for frequently used app pages.

Dark theme with Construct accent in the app created with Code On Time. The sidebar is hidden and the tab bar is displays icons for frequently used app pages.

Dark theme with Aquarium accent in the app created with Code On Time.

Dark theme with Aquarium accent in the app created with Code On Time.  The form is open and context menu of the form is also visible.

Dark theme with Aquarium accent in the app created with Code On Time.  The form is open and context menu of the form is also visible.

Dark theme with Aquarium accent in the app created with Code On Time.  The form view is open and the "Data View" field is visible in the form.

Dark theme with Aquarium accent in the app created with Code On Time.  The form view is open and the Data View field is visible in the form.

Dark theme with Verdant accent in the app created with Code On Time.  The sidebar is expanded.

Dark theme with Verdant accent in the app created with Code On Time.  The sidebar is expanded.

Dark theme with Modern Rose accent in the app created with Code On Time.  The app is displayed in a small form factor.

Dark theme with Modern Rose accent in the app created with Code On Time.  The app is displayed in a small form factor. 

Dark theme with Modern Rose accent in the app created with Code On Time.  The navigation menu is open.

Dark theme with Modern Rose accent in the app created with Code On Time.  The navigation menu is open.

If Settings option is enabled, then users can access the themes and accents at runtime.

Settings panel of app built with Touch UI and Code On Time.

Theme and accent selection panel of app built with Touch UI and Code On Time.