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
1
.announcement {
2
  background-color: hotpink;
3
  /* other styles... */
4
}
5
​
6
html.todesktop .announcement {
7
  display: none;
8
}
Copied!
1
<body>
2
  <div class="announcement">
3
    You should download our desktop app!
4
  </div>
5
  <!-- rest of your app -->
6
</body>
Copied!
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
1
.back-button, .forward-button {
2
  display: none;
3
}
4
​
5
html.todesktop .back-button,
6
html.todesktop .forward-button {
7
  display: block;
8
}
Copied!
1
<nav>
2
  <a href="/">Home</a>
3
  <a class="back-button" onclick="window.history.back()">←</a>
4
  <a class="foward-button" onclick="window.history.forward()">→</a>
5
</nav>
Copied!
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.
1
html.todesktop-platform-darwin .header {
2
  margin-top: 10px;
3
}
Copied!
​

App Options - Previous

App Protocols and Deeplinks

Next - Customizing your app

Add Custom Javascript to your Desktop App

Last modified 2yr ago

Copy link

Contents

Platform-specific CSS