[THEMING] Do-it-yourself theme with Xposed module XBlast Tools

Search This thread

dannejanne

Senior Member
Mar 23, 2011
2,430
856
Norrköping, Sweden
If you are on stock ROM like me, we have no theming engine that makes life sweet for us. Instead we are stuck with Googles vision for the most part. Except if you are willing to root your phone and install some modifications.

I have found that the XBlast module for Xposed framework is pretty powerful on its own and I have created myself a little theme with it and thought I could share my findings if anyone else wants to do it. The things you need I will list below but I won't write how to install it. And I'm just going to write down how I did to make it look like in my screenshots. You are of course free to experiment with your own look.

What you need:

-Xposed Installer
-XBlast Tools
-Unicon (optional)

OK so let's start by opening the XBlast Tools app. Let's start with setting the background for the system. Download the attached file from the bottom of this thread.

-In XBlast Tools, go to "visual tweaks -> Holo Theme ->Dark Theme". Enable it and chose the background you downloaded from here.
-Do the same for "Light Theme" too. Some apps will use it.

Now back out of "Light Theme" and stay on the "Holo Theme" page. Now we will set some text and other colors to match the light background you've just chosen.

-Set Primary Text Color to #ff797979
-Set Secondary Text Color to #ff545454
-Set Divider Line Color to #1d000000
-Set Pop-up & Dialog Color to #ffe8e8e8

It's important to not set the primary text color too dark, because it won't be visible on the Settings app header next to the icon where the background will remain dark. So we have to keep certain balance so its visible on both darker and lighter backgrounds. This also changes the text on the dialogs & popups so we had to also brighten those backgrounds otherwise the text is hard to see as both text and background will be dark. Also some menu text in the Gallery app for instance is affected by this also.

The secondary text color is used in the titles for the different settings categories. But also removes some of the Holo Blue texts seen in titles in dialogs for example. It also affects the frontpage of Tapatalk I've noticed. So you'll notice if you set this color way off.

Now in the XBlast Tools app again:

-In Visual Tweaks, go and change the Settings Icon Color, which naturally affects the icons on the settings page. I made them white myself. They could be black also but I wanted them white so they match the white icons that are still in the dialog windows that I can not change. So for the sake of consistency I wanted it this way. This is also why the dialog background color isn't set to all white. The icons would not be visible.

Now for the notification panel. I've tried to make it somewhat original. I have not really seen this look anywhere else before and it feels a tad bit different from the standard. There is no clear "edge" when pulling it down since we are dealing with gradients and it gives a nice little touch. Go to Notification Panel in XBlast Tools.

-Put the master switch ON.
-Set Notification Title Text Color to #ffffffff
-Set Notification Content Text Color to #ffffffff
-Set Notification Background Color to #00000000 (fully transparent)
-Set Notification Pressed Color to #10ffffff

-Now go into the Notification Header menu. Enable it and set the color fully transparent here too (#00000000).

-Back out and go into Notification Panel Bg. Enable "Notification Background Color" and set it to fully transparent (#00000000).

-Back out again and check the Hide Handle Divider Line.


Now it's time to back out to the frontpage of the XBlast Tools app. Scroll almost to the very bottom and you will see a "Gradient Settings" menu. Dive into that one. Enable it on the main switch at the top and check the "Notification Bg Gradient Color".

-Set it to #f10080ae
-Make sure "Bottom to Top" is set in the "Gradient Orientation" menu at the bottom of that page.

Reboot your phone and enjoy the changes.

Optional: install the Unicon module and apply an icon pack with it. It does not only change it for the launcher but also systemwide. The icons will be affected in dialogs and other places too. Much more powerful.


Screenshots:

56w9.png
azrr.png
ne09.png
nf9d.png
6tz5.png
gjv4.png
rfq9.png
gnaz.png
 

Attachments

  • IMG_20140421_191133.jpg
    IMG_20140421_191133.jpg
    197.8 KB · Views: 669
Last edited:

jmo742

Senior Member
Sep 20, 2013
62
9
Mobile
Thanks for sharing this :good: However, I hate to be that guy, but I followed the instructions to the T and mine didn't come out exactly like the screenshots; my system UI is still dark and the pull down drawer is clear. I changed the gradient color to the light blue, but it didn't stick as seen in one of my screenshots. Can anyone please help me out?
 

Attachments

  • Screenshot_2014-04-22-01-13-03.jpg
    Screenshot_2014-04-22-01-13-03.jpg
    67.8 KB · Views: 453
  • Screenshot_2014-04-22-01-13-15.png
    Screenshot_2014-04-22-01-13-15.png
    137.6 KB · Views: 449

dannejanne

Senior Member
Mar 23, 2011
2,430
856
Norrköping, Sweden
Thanks for sharing this :good: However, I hate to be that guy, but I followed the instructions to the T and mine didn't come out exactly like the screenshots; my system UI is still dark and the pull down drawer is clear. I changed the gradient color to the light blue, but it didn't stick as seen in one of my screenshots. Can anyone please help me out?

Seems a bit odd. Have you tried applying both the Holo Dark & Holo Light background again? And also the gradient color? Otherwise it seems you have some other issue making them not stick for some reason. Their pages should look like this in XBlast.

ne5e3e6y.jpg


zyjera9u.jpg




Sent from my Nexus 5 with a little bit of help from Fleksy
 

jmo742

Senior Member
Sep 20, 2013
62
9
Mobile
Seems a bit odd. Have you tried applying both the Holo Dark & Holo Light background again? And also the gradient color? Otherwise it seems you have some other issue making them not stick for some reason. Their pages should look like this in XBlast.

ne5e3e6y.jpg


zyjera9u.jpg




Sent from my Nexus 5 with a little bit of help from Fleksy

OK. I have the system background now. I made the mistake of choosing the image with a file explorer app and instead used Gallery to do so. As for the gradient color, I haven't the slightest clue as to what I've done wrong. I repeated the steps but with no success. I provided screenshots in hopes of you possibly seeing what I did wrong.
 

Attachments

  • Screenshot_2014-04-22-10-28-26.jpg
    Screenshot_2014-04-22-10-28-26.jpg
    116.6 KB · Views: 233
  • Screenshot_2014-04-22-10-28-51.jpg
    Screenshot_2014-04-22-10-28-51.jpg
    105.4 KB · Views: 218
  • Screenshot_2014-04-22-10-28-59.jpg
    Screenshot_2014-04-22-10-28-59.jpg
    104.7 KB · Views: 211
  • Screenshot_2014-04-22-10-29-12.jpg
    Screenshot_2014-04-22-10-29-12.jpg
    115 KB · Views: 186
  • Screenshot_2014-04-22-10-29-31.jpg
    Screenshot_2014-04-22-10-29-31.jpg
    152.1 KB · Views: 190
  • Screenshot_2014-04-22-10-29-54.jpg
    Screenshot_2014-04-22-10-29-54.jpg
    128.3 KB · Views: 185
  • Screenshot_2014-04-22-10-30-08.jpg
    Screenshot_2014-04-22-10-30-08.jpg
    158.4 KB · Views: 184
  • Like
Reactions: dannejanne

dannejanne

Senior Member
Mar 23, 2011
2,430
856
Norrköping, Sweden
OK. I have the system background now. I made the mistake of choosing the image with a file explorer app and instead used Gallery to do so. As for the gradient color, I haven't the slightest clue as to what I've done wrong. I repeated the steps but with no success. I provided screenshots in hopes of you possibly seeing what I did wrong.

Ah. I think I made a mistake in the guide! On the "notification panel bg" page.

It's no image as I said. Check the color selector instead and set it to fully transparent. That should do it.

Will change the guide. Thanks.

Sent from my Nexus 5 with a little bit of help from Fleksy
 
  • Like
Reactions: jmo742

jmo742

Senior Member
Sep 20, 2013
62
9
Mobile
Ah. I think I made a mistake in the guide! On the "notification panel bg" page.

It's no image as I said. Check the color selector instead and set it to fully transparent. That should do it.

Will change the guide. Thanks.

Sent from my Nexus 5 with a little bit of help from Fleksy

Thanks! That did the trick :good:
 

Top Liked Posts

  • There are no posts matching your filters.
  • 6
    If you are on stock ROM like me, we have no theming engine that makes life sweet for us. Instead we are stuck with Googles vision for the most part. Except if you are willing to root your phone and install some modifications.

    I have found that the XBlast module for Xposed framework is pretty powerful on its own and I have created myself a little theme with it and thought I could share my findings if anyone else wants to do it. The things you need I will list below but I won't write how to install it. And I'm just going to write down how I did to make it look like in my screenshots. You are of course free to experiment with your own look.

    What you need:

    -Xposed Installer
    -XBlast Tools
    -Unicon (optional)

    OK so let's start by opening the XBlast Tools app. Let's start with setting the background for the system. Download the attached file from the bottom of this thread.

    -In XBlast Tools, go to "visual tweaks -> Holo Theme ->Dark Theme". Enable it and chose the background you downloaded from here.
    -Do the same for "Light Theme" too. Some apps will use it.

    Now back out of "Light Theme" and stay on the "Holo Theme" page. Now we will set some text and other colors to match the light background you've just chosen.

    -Set Primary Text Color to #ff797979
    -Set Secondary Text Color to #ff545454
    -Set Divider Line Color to #1d000000
    -Set Pop-up & Dialog Color to #ffe8e8e8

    It's important to not set the primary text color too dark, because it won't be visible on the Settings app header next to the icon where the background will remain dark. So we have to keep certain balance so its visible on both darker and lighter backgrounds. This also changes the text on the dialogs & popups so we had to also brighten those backgrounds otherwise the text is hard to see as both text and background will be dark. Also some menu text in the Gallery app for instance is affected by this also.

    The secondary text color is used in the titles for the different settings categories. But also removes some of the Holo Blue texts seen in titles in dialogs for example. It also affects the frontpage of Tapatalk I've noticed. So you'll notice if you set this color way off.

    Now in the XBlast Tools app again:

    -In Visual Tweaks, go and change the Settings Icon Color, which naturally affects the icons on the settings page. I made them white myself. They could be black also but I wanted them white so they match the white icons that are still in the dialog windows that I can not change. So for the sake of consistency I wanted it this way. This is also why the dialog background color isn't set to all white. The icons would not be visible.

    Now for the notification panel. I've tried to make it somewhat original. I have not really seen this look anywhere else before and it feels a tad bit different from the standard. There is no clear "edge" when pulling it down since we are dealing with gradients and it gives a nice little touch. Go to Notification Panel in XBlast Tools.

    -Put the master switch ON.
    -Set Notification Title Text Color to #ffffffff
    -Set Notification Content Text Color to #ffffffff
    -Set Notification Background Color to #00000000 (fully transparent)
    -Set Notification Pressed Color to #10ffffff

    -Now go into the Notification Header menu. Enable it and set the color fully transparent here too (#00000000).

    -Back out and go into Notification Panel Bg. Enable "Notification Background Color" and set it to fully transparent (#00000000).

    -Back out again and check the Hide Handle Divider Line.


    Now it's time to back out to the frontpage of the XBlast Tools app. Scroll almost to the very bottom and you will see a "Gradient Settings" menu. Dive into that one. Enable it on the main switch at the top and check the "Notification Bg Gradient Color".

    -Set it to #f10080ae
    -Make sure "Bottom to Top" is set in the "Gradient Orientation" menu at the bottom of that page.

    Reboot your phone and enjoy the changes.

    Optional: install the Unicon module and apply an icon pack with it. It does not only change it for the launcher but also systemwide. The icons will be affected in dialogs and other places too. Much more powerful.


    Screenshots:

    56w9.png
    azrr.png
    ne09.png
    nf9d.png
    6tz5.png
    gjv4.png
    rfq9.png
    gnaz.png
    1
    Seems a bit odd. Have you tried applying both the Holo Dark & Holo Light background again? And also the gradient color? Otherwise it seems you have some other issue making them not stick for some reason. Their pages should look like this in XBlast.

    ne5e3e6y.jpg


    zyjera9u.jpg




    Sent from my Nexus 5 with a little bit of help from Fleksy

    OK. I have the system background now. I made the mistake of choosing the image with a file explorer app and instead used Gallery to do so. As for the gradient color, I haven't the slightest clue as to what I've done wrong. I repeated the steps but with no success. I provided screenshots in hopes of you possibly seeing what I did wrong.
    1
    OK. I have the system background now. I made the mistake of choosing the image with a file explorer app and instead used Gallery to do so. As for the gradient color, I haven't the slightest clue as to what I've done wrong. I repeated the steps but with no success. I provided screenshots in hopes of you possibly seeing what I did wrong.

    Ah. I think I made a mistake in the guide! On the "notification panel bg" page.

    It's no image as I said. Check the color selector instead and set it to fully transparent. That should do it.

    Will change the guide. Thanks.

    Sent from my Nexus 5 with a little bit of help from Fleksy