šŸ’„ Add Custom CSS to your Desktop App

We add a todesktop class to the html element on each page of your app. You can use this to identify when your app is being run as a desktop app.

If you want to hide an element on your desktop app you could do something like this:

app.css
index.html
app.css
.announcement {
background-color: hotpink;
/* other styles... */
}
ā€‹
html.todesktop .announcement {
display: none;
}
index.html
<body>
<div class="announcement">
You should download our desktop app!
</div>
<!-- rest of your app -->
</body>

You can also do the opposite and only show an element in your desktop app.

A common use-case is to show browser controls (back, forward, refresh) in your desktop app's user interface. Here's an example of how you could achieve this:

app.css
index.html
app.css
.back-button, .forward-button {
display: none;
}
ā€‹
html.todesktop .back-button,
html.todesktop .forward-button {
display: block;
}
index.html
<nav>
<a href="/">Home</a>
<a class="back-button" onclick="window.history.back()">ā†</a>
<a class="foward-button" onclick="window.history.forward()">ā†’</a>
</nav>

Platform-specific CSS

You may wish to add styles that apply only on specific operating systems.

Class name

Platform (operating system) target

.todesktop-platform-win32

Windows

.todesktop-platform-darwin

macOs

.todesktop-platform-linux

Linux

In the styles below we add a margin that will only apply on the Mac operating system.

html.todesktop-platform-darwin .header {
margin-top: 10px;
}

ā€‹