Apply Dark Theme to entire phone??

rmausser · 09/15/2010, 10:51 AM

So, according to the Palm Developer site, app developers can easily change their apps to a Dark theme with some simple CSS code.

The webOS Community | Palm Developer Center Blog

You can see this in Preware and Govnah and other apps that give this setting.

Would it be possible then, to turn on the Dark Theme for the entire WebOS?

Meaning that Contacts and Email and other apps used the dark theme as well

If this is possible, please tell me how.

I am using a darker theme as is, but it would be awesome to convert these elements to match, if all it took was some simple CSS coding.

bobbydigitalbg · 09/15/2010, 11:02 AM

Would be nice if we can choose Dark or Originial.

jsgraphicart · 11/23/2010, 12:14 PM

I just found this thread. I am looking for the same thing. Perhaps a patch? I love the dark theme.

sketch42 · 11/23/2010, 12:20 PM

i believe it has to be turned on in each app

jsgraphicart · 12:52 PM

I looked at the link in the first post. Is it as simple as adding the line "theme":"dark" to each appinfo.jsn file?

Edit: Just tried that. Didn't work even after luna restart. Hmm...

sketch42 · 11/23/2010, 12:56 PM

Quote:

Originally Posted by jsgraphicart

I looked at the link in the first post. Is it as simple as adding the line "theme":"dark" to each appinfo.jsn file?

Edit: Just tried that. Didn't work even after luna restart. Hmm...

uh... no!

Creating a Dark Themed App
Here is the sure-fire way to make your app palm-dark. This is a two-step process:
First, edit appinfo.json:

Code:

// File: appinfo.json
{
  ...,
  "theme":"dark",
  ...
}

When this is set the light CSS styles are not loaded, improving the load-time for your app. You can also set "theme" to "light" if you're not using the dark theme. Alternatively you can just remove the theme line altogether. It doesn't make a very noticeable difference in the load-times either way. appinfo.json - Palm Developer Center

Next, change index.html to set the body css class to "palm-dark". Feel free to add this line just above the </html> line if it there is not yet a body tag in this file. Like so:

Code:

<!-- File: index.html -->
<html>
  ...
  <body class="palm-dark"></body>
</html>

Alternatively, you can add this to a scene or stage assistant. This is handy if you want to give the user the option of which theme they would like to see.

Code:

$$('body')[0].addClassName('palm-dark');
    //or
this.controller.document.getElementsByTagName("body")[0].addClassName('palm-dark');

That's all there is to it. One quirk that I know of so far (there may be others) is that in order to get palm-page-header to show up dark you must set it to multi-line using:

Code:

<div class="palm-page-header multi-line">
  <div class="palm-page-header-wrapper">
    <div class="title left">
      My Dark App
    </div>
  </div>
</div>

Code Snippets - WebOS101

jsgraphicart · 11/23/2010, 01:06 PM

Awesome. Thanks Sketch.

09/15/2010, 10:51 AM	#1 (permalink)
rmausser Member Join Date: Sep 2009 Location: Canada Posts: 1,488 Likes Received: 311 Thanks: 64 Thanked 660 Times in 214 Posts	Apply Dark Theme to entire phone?? So, according to the Palm Developer site, app developers can easily change their apps to a Dark theme with some simple CSS code. The webOS Community \| Palm Developer Center Blog You can see this in Preware and Govnah and other apps that give this setting. Would it be possible then, to turn on the Dark Theme for the entire WebOS? Meaning that Contacts and Email and other apps used the dark theme as well If this is possible, please tell me how. I am using a darker theme as is, but it would be awesome to convert these elements to match, if all it took was some simple CSS coding.
	Liked by

09/15/2010, 11:02 AM	#2 (permalink)
bobbydigitalbg Member Join Date: Apr 2010 Posts: 24 Likes Received: 0 Thanks: 47 Thanked 1 Time in 1 Post	Would be nice if we can choose Dark or Originial.
	Liked by

11/23/2010, 12:14 PM	#3 (permalink)
jsgraphicart Member Join Date: May 2010 Location: NorCal Posts: 1,762 Likes Received: 79 Thanks: 51 Thanked 279 Times in 200 Posts	I just found this thread. I am looking for the same thing. Perhaps a patch? I love the dark theme.
	Liked by

11/23/2010, 12:20 PM	#4 (permalink)
sketch42 Member Join Date: Jan 2007 Location: in the dark recesses of the earth, awaiting "The Rise of the L@@T" Posts: 3,991 Likes Received: 184 Thanks: 2,996 Thanked 1,967 Times in 1,402 Posts	i believe it has to be turned on in each app __________________ NEWBIES Check These Threads First WebOS FAQ • Export Contacts • Backup-Restore Patches/Apps • follow me on twitter • or Catch me at LOOT ATTN: If You like my Patches or Themes please feel free to DONATE
	Liked by

11/23/2010, 12:27 PM	#5 (permalink)
jsgraphicart Member Join Date: May 2010 Location: NorCal Posts: 1,762 Likes Received: 79 Thanks: 51 Thanked 279 Times in 200 Posts	I looked at the link in the first post. Is it as simple as adding the line "theme":"dark" to each appinfo.jsn file? Edit: Just tried that. Didn't work even after luna restart. Hmm... Last edited by jsgraphicart; 11/23/2010 at 12:52 PM.
	Liked by

11/23/2010, 01:06 PM	#7 (permalink)
jsgraphicart Member Join Date: May 2010 Location: NorCal Posts: 1,762 Likes Received: 79 Thanks: 51 Thanked 279 Times in 200 Posts	Awesome. Thanks Sketch.
	Liked by Thanked By: sketch42

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode