💄 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
.announcement {
  background-color: hotpink;
  /* other styles... */
}
​
html.todesktop .announcement {
  display: none;
}
<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
.back-button, .forward-button {
  display: none;
}
​
html.todesktop .back-button,
html.todesktop .forward-button {
  display: block;
}
<nav>
  <a href="/">Home</a>
  <a class="back-button" onclick="window.history.back()">←</a>
  <a class="foward-button" onclick="window.history.forward()">→</a>
</nav>
​
​

App Options - Previous

🚀 App Protocols and Deeplinks

Next - Customizing your app

👩‍💻 Add Custom Javascript to your Desktop App

Last updated 3 months ago