• Articles
  • API reference
  • Previous Versions
Show / Hide Table of Contents
  • Introduction
  • How to
    • Implement recipe management
    • Connect to a influx database
    • Invoke C# from PLC
    • How to access TwinController
    • How to write documentation blocks
    • How to make Inxton compiler ignore unknown syntax
    • Cyclic, Synchronous and Batched access
    • How to generate UI
    • How to include TcOpen in your project 🔗
    • Video how tos 🔗
  • Core
    • Introduction
    • Compiler
      • Intro to compiler
      • Added Properties
      • Attributes
      • Documentation Block
      • Fake Comments
      • Ignoring Parts Of Code
      • Twin Controller
      • Twin Objects
      • Twins
    • Connector
      • About connector
      • Primitive Twins
  • Essentials
    • Introduction
    • Rendering engine
      • Generating user interface
      • How it works
      • Presentation types
    • Controls
      • Controls
    • Styling your app
      • Styling your application
      • Color system
      • How to apply styles
      • Override default colors
      • Buttons
    • Conmponents convetions 🔗
  • TcOpen 🔗
    • Messaging, Logging, sequences 🔗

Color system

Inxton is inspired by color system by Material design

Color Default color Wpf SolidColorBrush
PrimaryColor #C4D93F Primary
SecondaryColor #5F6371 Secondary
BackgroundColor #FFFFFF Background
SurfaceColor #F1F1F1 Surface
ErrorColor #FF4B27 Error
AccentColor #FF4B27 Accent
AlertColor #CA2F14 Alert
WarningColor #FF4B27 Warning
SignalOffColor #5F6371 SignalOff
SignalOnColor #C4D93F SingalOn
IntermediateColor #TODO Intermediate

For every Color there is an OnColor - Used mainly for text color.

Color Default color Wpf SolidColorBrush
OnPrimaryColor #FFFFFF OnPrimary
OnSecondaryColor #FFFFFF OnSecondary
OnBackgroundColor #000000 OnBackground
OnSurfaceColor #000000 OnSurface
OnErrorColor #FFFFFF OnError
OnAccentColor #FFFFFF OnAccent
OnAlertColor #FFFF00 OnAlert
OnWarningColor #FFFFFF OnWarning
OnSignalOffColor #FFFFFF OnSignalOff
OnSignalOnColor #FFFFFF OnSingalOn
OnIntermediateColor #FFFFFF OnIntermediate

Create responsive applicatons

Thanks to WPF your app can work on any screen!

buttons

<WrapPanel>
    <StackPanel
        Margin="10"
        Orientation="Horizontal"
        Style="{DynamicResource Card}">
        <StackPanel>
            <Label FontWeight="Bold">Control voltage</Label>
            <Label>Card A2 Signal 4</Label>
        </StackPanel>
        <Ellipse
            Width="50"
            Height="50"
            Margin="50,5,5,0"
            Fill="{DynamicResource SignalOn}" />
    </StackPanel>

    <StackPanel
        Margin="10"
        Orientation="Horizontal"
        Style="{DynamicResource Card}">
        <StackPanel>
            <Label FontWeight="Bold">Pressure OK</Label>
            <Label>Card A2 Signal 5</Label>
        </StackPanel>
        <Ellipse
            Width="50"
            Height="50"
            Margin="50,5,5,0"
            Fill="{DynamicResource SignalOn}" />
    </StackPanel>

    <StackPanel
        Margin="10"
        Orientation="Horizontal"
        Style="{DynamicResource Card}">
        <StackPanel>
            <Label FontWeight="Bold">Safety OK</Label>
            <Label>Card A2 Signal 6</Label>
        </StackPanel>
        <Ellipse
            Width="50"
            Height="50"
            Margin="50,5,5,0"
            Fill="{DynamicResource SignalOff}" />
    </StackPanel>

</WrapPanel>
  • Improve this Doc
In This Article
Back to top

Generated by DocFX | Developed with ❤ at MTS - putting the heart into manufacturing.