Style your app

An app without CSS is practically impossible. You'll likely want to style your app. The CLI automatically creates a style.css file in the src directory. CSS selectors in this file need to be prepended with the ID of the window to prevent it from applying to other components throughout ArcOS. For example:

 > div.body {
  padding: 15px;
}

What works:

• Importing stylesheets from external URLs using @import

• Styling your application as you would any other web development project

• CSS variables using :root # > div.body { ... }

What doesn't work:

• Importing other CSS files of your app using @import. If you have multiple stylesheets, import them using multiple <link> elements in your app's HTML. Importing them in CSS will prevent them from being resolved.

• Hot reloading of CSS files during development — your entire app restarts instead of reloading the CSS.

CSS variables

ArcOS has a lot of CSS variables built-in that you can use to style your elements, with the added benefit that they'll immediately fit in with the rest of ArcOS and that they'll adapt to the user's theme preference automatically.

Built-in CSS variables

Variable	Application	Type
--fg	Foreground text	Hex color
--win-bg	Window background	Hex color
--win-border-rad	Window border radius	Pixels
--win-border	The window border	Border
--win-border-light	A lighter window border	Border
--glass-bg	Background for glass windows	Hex color
--glass-alt-bg	Alternative background for glass windows	Hex color
--glass-ultralight	Light darkening color	Hex color
--glass-ultradark	Strong darkening color	Hex color
--darkened-overlay	Overlay backdrop	Hex color
--darkened-overlay-alt	Overaly backdrop	Hex color
--startmenu-bg	Background color of shell components	Hex color
--startmenu-applist-item-bg	Background color of start menu app list items (normal strate)	Hex color
--startmenu-applist-item-bg-hover	Background color of start menu app list items (hover strate)	Hex color
--startmenu-applist-item-bg-active	Background color of start menu app list items (active strate)	Hex color
--button-border-rad	Border radius for buttons, inputs and other common elements	Pixels
--button-bg	Background color for buttons, inputs and other common elements (normal state)	Hex color
--button-hover-bg	Background color for buttons, inputs and other common elements (hover state)	Hex color
--button-active-bg	Background color for buttons, inputs and other common elements (active state)	Hex color
--button-glass-bg	Background color for buttons, inputs and other common elements in glass windows (normal state)	Hex color
--button-glass-hover-bg	Background color for buttons, inputs and other common elements in glass windows (hover state)	Hex color
--button-glass-active-bg	Background color for buttons, inputs and other common elements in glass windows (active state)	Hex color
--secondary-box-shadow	Box shadow for elements inside apps if applicable	Box Shadow

User accent colors

An ArcOS user can pick what accent color they want applied to elements throughout ArcOS. If you want to apply an accent to a button or other element inside your app, you might want to use the color the user chose to make your app fit in. Here are the different variables you can choose from:

Variable	Application
--accent-transparent	Transparent variant of the accent
--accent-light	Light variant
--accent-lighter	Extra light variant
--accent-dark	Dark variant
--accent-darkest	Extra dark variant
--accent-light-transparent	Light transparent variant
--accent-light-invert	Inverted variant of the light accent color

Colored styles

ArcOS has several built-in colors that you can use to style your elements. For each of the below colors, you can use these variants, where X is the color you chose:

• --clr-X-bg

• --clr-X-fg

• --clr-X-bright-fg

The colors ArcOS has built-in go as follows:

• Red

• Green

• Yellow

• Orange

• Blue

• Aqua

• Magenta

• Purple

User fonts

ArcOS has a number of fonts that the user can choose from. This font is then used for all text in ArcOS, including your app. These fonts are all loaded as part of ArcOS' CSS, and is defined in the --user-font CSS variable. Here's a list of the fonts I've added to ArcOS:

Name	Author	Comments
Nunito Sans	Vernon Adams, Jacques Le Bailly, Manvel Shmavonyan, Alexei Vanyashin	Default system font
Reddit Sans	Stephen Hutchings, OrangeRed
Arsenal	Andrij Shevchenko
Nothing You Could Do	Kimberly Geswein
Overlock	Dario Manuel Muhafara
Sofia	LatinoType
Inter	Rasmus Andersson	Old ArcOS system font
Fira Sans	Carrois Apostrophe
Lora	Cyreal
Crimson Text	Sebastian Kosch
Cormorant	Christian Thalmann
Albert Sans	Andreas Rasmussen
Alegreya Sans	Juan Pablo del Peral, Huerta Tipográfica
Merienda	Eduardo Tunni
Changa	Eduardo Tunni
Kotta One	Ania Kruk