Rofi Tips & Themes

A place to share tips, guides, application configurations and scripts about all elements of ArchLabs

Moderator: Founder

Rofi Tips & Themes

PostPosted by natemaia » Sun Jun 11, 2017 8:37 pm

Hello All
We've got alot of info regarding rofi because it has alot of functionality but its all up to you what & how you want it presented.
Here we will make the default rofi setup into a rofi theme so we dont lose anything in the future, I know it seems long :o but its really simple ;) This is all done on AL 4.1

Firstly a few screens to show you what is possible
Image Image Image Image Image

So to get started there is two ways to theme rofi one is to use entirely ~/.Xresources and the other is to use the themes in /usr/share/rofi/themes/
I prefer the themes as using Xresources is "depreciated" and rofi devs want to move to themes instead so follow along, nothing will be broken in the process.
If you would prefer to stay using .Xresources dont worry about this post but futer ones will have a Xresources file you can paste, in this case it will be up to you to make different Xresource-theme files if you want to keep old ones backed up (small part of why moving to themes is better).

Open ~/.Xresources in your favorite text editor and remove everything to do with rofi (it's all below don't worry).

Make a file named archlabs-rofi & copy this
Code: Select all
! ------------------------------------------------------------------------------
! ROFI standard archlabs theme
! ------------------------------------------------------------------------------

rofi.font:              SFNS Display 13
rofi.location:          0
rofi.fullscreen:        true
rofi.padding:           150
rofi.hide-scrollbar:    true
rofi.line-margin:       5
rofi.yoffset:           00
rofi.xoffset:           0
!rofi.width:            1920
rofi.lines:             18

! ------------------------------------------------------------------------------
! ROFI standard archlabs colors
! ------------------------------------------------------------------------------

rofi.color-enabled:     true
rofi.color-window:      argb:B3000000, argb:B3000000, argb:E6ffffff
rofi.color-normal:      argb:00000000, argb:969896B3, argb:00000000, argb:00000000, argb:FFFFFFFF
rofi.color-urgent:      argb:00282a2e, argb:FFcc6666, argb:00282a2e, argb:ffcc6666, argb:e61d1f21
rofi.color-active:      argb:00282a2e, argb:FF81a2be, argb:00282a2e, argb:ff81a2be, argb:e61d1f21
rofi.separator-style:   solid

Now you have a backup that can also be split into a theme, so lets do that. Open a terminal & run
Code: Select all
sudo nano /usr/share/rofi/themes/ArchLabs.theme
Copy this into it
Code: Select all
! ------------------------------------------------------------------------------
! ROFI  color theme
! ------------------------------------------------------------------------------

rofi.color-enabled:     true
rofi.color-window:      argb:B3000000, argb:B3000000, argb:E6ffffff
rofi.color-normal:      argb:00000000, argb:969896B3, argb:00000000, argb:00000000, argb:FFFFFFFF
rofi.color-urgent:      argb:00282a2e, argb:FFcc6666, argb:00282a2e, argb:ffcc6666, argb:e61d1f21
rofi.color-active:      argb:00282a2e, argb:FF81a2be, argb:00282a2e, argb:ff81a2be, argb:e61d1f21
rofi.separator-style:   solid
Ctrl=o to save Ctrl=x to exit. You just made a rofi theme 8-)

What you are left with is the location, padding, scrollbar, & a couple other settings to deal with.
They are entirely up to you and will work with any color theme, you may also set many of these via the command to launch rofi (like we have in archlabs keybinds)

Agian open ~/.Xresources and paste in
Code: Select all
! ------------------------------------------------------------------------------
! ROFI standard archlabs theme
! ------------------------------------------------------------------------------

rofi.font:              SFNS Display 13
rofi.location:          0
rofi.fullscreen:        true
rofi.padding:           150
rofi.hide-scrollbar:    true
rofi.line-margin:       5
rofi.yoffset:           00
rofi.xoffset:           0
!rofi.width:            1920
rofi.lines:             18

Open a terminal and run (reset Xresources to save having to reboot)
Code: Select all
xrdb -load ~/.Xresources

Added by Mod : OR use the alias merge. (type alias in terminal to know all aliases)
Then pick the ArchLabs theme we made (there are others as well) by running
Code: Select all
rofi-theme-selector

That's it For the Default theme there wont be much change as we just set up themes (unless you picked a different one)
I will be posting more themes in this thread and I hope other do as well.

They will be much easy to do now that we have setup our themes properly :D :geek:
However I will still post a full .Xresources theme for those wishing to go that route and avoid all of this (theme selector is too good to go back)

I highly reccomend checking out these links, where you will find much more info about rofi.
Window position:https://github.com/DaveDavenport/rofi/wiki/WindowPositionGithub page:https://davedavenport.github.io/rofi/Theme Generator:https://davedavenport.github.io/rofi/p11-Generator.html
User avatar
natemaia
ArchLabs Guru
ArchLabs Guru
 
Posts: 75
Joined: Thu Mar 16, 2017 10:14 pm
Location: Canada - British Columbia
Running Release: 5.0

Re: Rofi Tips & Themes

PostPosted by erikdubois » Sun Jun 11, 2017 9:36 pm

moved it to this category
Living to learn, learning to live.
Linux fits well in my life's motto.
More info on http://erikdubois.be
Archlabs support articles are on https://goo.gl/AaYI0b
Archlabs support youtube channel is on https://goo.gl/Lovquv
User avatar
erikdubois
Site Admin
Site Admin
 
Posts: 333
Joined: Sun Mar 05, 2017 5:42 am
Location: Belgium

Re: Rofi Tips & Themes

PostPosted by natemaia » Mon Jun 12, 2017 7:17 am

My mistake, thank you for moving
User avatar
natemaia
ArchLabs Guru
ArchLabs Guru
 
Posts: 75
Joined: Thu Mar 16, 2017 10:14 pm
Location: Canada - British Columbia
Running Release: 5.0

Re: Rofi Tips & Themes

PostPosted by natemaia » Mon Jun 12, 2017 8:25 am

Hello Again
Now we can get into really changing rofi and how we want it to look

My first theme is a take on the ever popular arc theme but with transparency

Copy over everything rofi related in ~/.Xresources
Code: Select all
! ------------------------------------------------------------------------------
! ROFI  Options
! ------------------------------------------------------------------------------
rofi.location:          0
rofi.fullscreen:       false
rofi.padding:           50
rofi.hide-scrollbar:    true
rofi.line-margin:       5
rofi.yoffset:           0
rofi.xoffset:           0
rofi.width:            700
rofi.lines:             6

Then open a terminal and run
Code: Select all
sudo nano /usr/share/rofi/themes/Arc-Alternative.theme
Copy into it
Code: Select all
! ------------------------------------------------------------------------------
! ROFI Color theme
! User: Nathaniel Maia
! Copyright: Nathaniel Maia
! ------------------------------------------------------------------------------
! Use extended color scheme
rofi.color-enabled: true
! Color scheme window
rofi.color-window: argb:edffffff, argb:edffffff, argb:82000000
! Color scheme for normal row
rofi.color-normal: argb:0ffffff, argb:ee4e4e4e, argb:0ffffff, argb:70268bd2, #4e4e4e
! Color scheme for active row
rofi.color-active: argb:0ffffff, argb:e7268bd2, argb:0ffffff, argb:70268bd2, #4e4e4e
! Color scheme for urgent row
rofi.color-urgent: argb:0ffffff, argb:eedc322f, argb:0ffffff, argb:70dc322f, #4e4e4e
! Separator style (none, dash, solid)
rofi.separator-style:                solid

Now we can reload Xresources with
Code: Select all
xrdb -load ~/.Xresources
Change to the theme we made by running
Code: Select all
rofi-theme-selector

Lastly we need to change our rofi keybind execute command, navigate to ~/.config/openbox.rc.xml
Code: Select all
    <keybind key="C-space">
      <action name="Execute">
        <command>rofi -modi drun,run,window -location 2 -yoffset -2 -bw 2 -show drun -font "Noto Sans 13"</command>
      </action>
    </keybind>
Or change the execute in obkey to
Code: Select all
rofi -location 2 -yoffset -2 -bw 2 -show drun -font "Noto Sans 13"

This will give you a similar launcher to KDE being top centered and white, you cant try out any rofi launch options in a terminal

Some others I reccomend trying out in the terminal to see which you like best

Similar to Guake drop down terminal
Code: Select all
rofi -modi combi,window -show combi -combi-modi drun,run -location 2 -width 100 -font "Noto Sans 13"

Centered window closer to synapse, gnome do, etc
Code: Select all
rofi -modi combi,window -show combi -combi-modi drun,run -font "Noto Sans 13"

dmenu replacement
Code: Select all
rofi -modi combi,window -show combi -combi-modi drun,run -lines 1 -location 2 -width 100 -padding 0  -font "Noto Sans 13"

With all of the commands above you can use Shift+Arrow keys to switch between window switcher, run, and drun (desktop run >> not case sensitive and parses .desktop files instead)

Those who just want to use .Xresources this should work (you still need the rofi execute commands from above)
Code: Select all
! ------------------------------------------------------------------------------
! ROFI  archlabs theme
! ------------------------------------------------------------------------------
rofi.location:          0
rofi.fullscreen:       false
rofi.padding:           50
rofi.hide-scrollbar:    true
rofi.line-margin:       5
rofi.yoffset:           0
rofi.xoffset:           0
rofi.width:            700
rofi.lines:             6
! ------------------------------------------------------------------------------
! ROFI Color theme
! ------------------------------------------------------------------------------
rofi.color-enabled: true
rofi.color-window: argb:edffffff, argb:edffffff, argb:82000000
rofi.color-normal: argb:0ffffff, argb:ee4e4e4e, argb:0ffffff, argb:70268bd2, #4e4e4e
rofi.color-active: argb:0ffffff, argb:e7268bd2, argb:0ffffff, argb:70268bd2, #4e4e4e
rofi.color-urgent: argb:0ffffff, argb:eedc322f, argb:0ffffff, argb:70dc322f, #4e4e4e
rofi.separator-style:                solid
User avatar
natemaia
ArchLabs Guru
ArchLabs Guru
 
Posts: 75
Joined: Thu Mar 16, 2017 10:14 pm
Location: Canada - British Columbia
Running Release: 5.0

Re: Rofi Tips & Themes

PostPosted by natemaia » Mon Jun 12, 2017 9:46 am

Try this out in a terminal
Code: Select all
/usr/bin/dmenu_run | rofi -dmenu
User avatar
natemaia
ArchLabs Guru
ArchLabs Guru
 
Posts: 75
Joined: Thu Mar 16, 2017 10:14 pm
Location: Canada - British Columbia
Running Release: 5.0

Re: Rofi Tips & Themes

PostPosted by DPisGROSS » Mon Jun 12, 2017 3:21 pm

Image


Code: Select all
! ------------------------------------------------------------------------------
! ROFI  color theme
! ------------------------------------------------------------------------------

rofi.color-enabled: true
rofi.color-window: #181521, #c16772, #9568a1
rofi.color-normal: #181521, #ffeefc, #251F2B, #c16772, #ffeefc
rofi.color-active: #141021, #c05c47, #312842, #c05c47, #ffeefc
rofi.color-urgent: #141021, #e4b226, #312842, #e4b226, #ffeefc
rofi.separator-style:   solid
rofi.width: 800
rofi.padding: 50
rofi.font: Monaco 12
rofi.bw: 2


you can also add the .theme file to /usr/share/rofi/themes/

https://github.com/crysterbater/.rofith ... vapr.theme
DPisGROSS
Moderator
Moderator
 
Posts: 11
Joined: Sat Feb 18, 2017 7:11 pm

Re: Rofi Tips & Themes

PostPosted by DPisGROSS » Mon Jun 12, 2017 3:26 pm

Image



Code: Select all
! ------------------------------------------------------------------------------
! ROFI  color theme
! ------------------------------------------------------------------------------

rofi.color-enabled: true
rofi.color-window: #161b21, #0E1014, #dce1e4
rofi.color-normal: argb:0000000, #d8dee9, argb:0000000, #fceef0, #25ae9c
rofi.color-active: argb:0000000, #c8dad6, argb:0070708, #18141b, #74d9d7
rofi.color-urgent: argb:0000000, #f3ecea, argb:0000000, #18141b, #9c86fb
rofi.separator-style:  solid
rofi.bw:               5
rofi.lines:            8
rofi.padding:          50
rofi.width:            900


you can also add the .theme file to /usr/share/rofi/themes/

https://github.com/crysterbater/.rofith ... edux.theme



Image


Code: Select all
! ------------------------------------------------------------------------------
! ROFI  color theme
! ------------------------------------------------------------------------------

rofi.color-enabled: true
rofi.color-window: #181521, #c16772, #9568a1
rofi.color-normal: #181521, #ffeefc, #251F2B, #c16772, #ffeefc
rofi.color-active: #141021, #c05c47, #312842, #c05c47, #ffeefc
rofi.color-urgent: #141021, #e4b226, #312842, #e4b226, #ffeefc
rofi.separator-style:   solid
rofi.width: 800
rofi.padding: 50
rofi.font: Monaco 12
rofi.bw: 2


https://github.com/crysterbater/.rofith ... vapr.theme



Image

Code: Select all
! ------------------------------------------------------------------------------
! ROFI  color theme
! ----rofi.color-enabled: true
rofi.color-window: #252a2f, #1d1e24, #1f2836
rofi.color-normal: argb:0000000, #d8dee9, argb:0000000, #95d5b9, #383b44
rofi.color-active: argb:0000000, #c8dad6, argb:0000000, #52b9c1, #ffffff
rofi.color-urgent: argb:0000000, #f3ecea, argb:0000000, #e48686, #e3e0ff
rofi.separator-style:   solid--------------------------------------------------------------------------



https://github.com/crysterbater/.rofith ... /drk.theme

Image

Code: Select all
! ------------------------------------------------------------------------------
! ROFI  color theme
! ------------------------------------------------------------------------------

rofi.color-enabled: true
rofi.color-window: #1F1A24, #494C5F, #494C5F
rofi.color-normal: #1F1A24, #ffeefc, #251F2B, #F97560, #ffeefc
rofi.color-active: #141021, #c05c47, #312842, #c05c47, #ffeefc
rofi.color-urgent: #141021, #e4b226, #312842, #e4b226, #ffeefc
rofi.separator-style:   solid
rofi.width: 800
rofi.padding: 50
rofi.font: Hack Bold 12
rofi.bw: 2


https://github.com/crysterbater/.rofith ... ndot.theme


Image

Code: Select all
! ------------------------------------------------------------------------------
! ROFI  color theme
! ------------------------------------------------------------------------------

rofi.color-enabled: true
rofi.color-window: #16141C, #B39BBA, #B39BBA
rofi.color-normal: #16141C, #ffffff, #16141C, #86DC8E, #131313
rofi.color-active: #141021, #c05c47, #312842, #c05c47, #ffeefc
rofi.color-urgent: #141021, #e4b226, #312842, #e4b226, #ffeefc
rofi.separator-style:   solid
rofi.width: 800
rofi.padding: 50
rofi.font: Monaco 12
rofi.bw: 2


https://github.com/crysterbater/.rofith ... lime.theme
DPisGROSS
Moderator
Moderator
 
Posts: 11
Joined: Sat Feb 18, 2017 7:11 pm

Re: Rofi Tips & Themes

PostPosted by Dobbie03 » Mon Jun 12, 2017 5:34 pm

WOW! Amazing stuff. Thanks for sharing guys.
I like my Metal like my coffee.......black
User avatar
Dobbie03
Founder
Founder
 
Posts: 558
Joined: Sat Feb 18, 2017 2:51 pm
Location: New Zealand
Running Release: DobbieBang

Re: Rofi Tips & Themes

PostPosted by darknetmatrix » Mon Jun 12, 2017 6:36 pm

Indeed great stuff!
linux user # 527315
ArchLabs Betatester
I never lose. Either i win, or i learn.
User avatar
darknetmatrix
Moderator
Moderator
 
Posts: 165
Joined: Sat Feb 25, 2017 3:46 pm
Location: Belgium
Running Release: 5.x.x

Re: Rofi Tips & Themes

PostPosted by natemaia » Mon Jun 12, 2017 9:42 pm

@DPisGrOSS
You're a beast, definitely gonna grab a couple of these.
I'm not the only one who thinks rofi is awesome!

thanks for sharing :)
User avatar
natemaia
ArchLabs Guru
ArchLabs Guru
 
Posts: 75
Joined: Thu Mar 16, 2017 10:14 pm
Location: Canada - British Columbia
Running Release: 5.0

Re: Rofi Tips & Themes

PostPosted by natemaia » Mon Jun 12, 2017 9:54 pm

If you would like transparency in your themes you must use argb values like so argb:ddffffff for a 20% transparent white

argb is a weird one its just like hex but with two additional characters, the first two. so #ddffffff would be around 80% opaque #0ffffff would be fully transparent and #ffffffff fully opaque
User avatar
natemaia
ArchLabs Guru
ArchLabs Guru
 
Posts: 75
Joined: Thu Mar 16, 2017 10:14 pm
Location: Canada - British Columbia
Running Release: 5.0

Re: Rofi Tips & Themes

PostPosted by darknetmatrix » Mon Jun 12, 2017 10:45 pm

linux user # 527315
ArchLabs Betatester
I never lose. Either i win, or i learn.
User avatar
darknetmatrix
Moderator
Moderator
 
Posts: 165
Joined: Sat Feb 25, 2017 3:46 pm
Location: Belgium
Running Release: 5.x.x

Re: Rofi Tips & Themes

PostPosted by erikdubois » Mon Jun 12, 2017 11:42 pm

This was/is on our to-do list. Rofi was included quite sneeky and quickly on demand from Brett I believe.

Now it is time to theme it and make it part of the whole.

We will be needing all the arc theme colora colours.
    arc crimson
    arc
    arc evopop
    arc froly
    arc grey
    arc numix
    arc paper
    arc papirus
    arc polo
    arc smoke
    arc tacao
Living to learn, learning to live.
Linux fits well in my life's motto.
More info on http://erikdubois.be
Archlabs support articles are on https://goo.gl/AaYI0b
Archlabs support youtube channel is on https://goo.gl/Lovquv
User avatar
erikdubois
Site Admin
Site Admin
 
Posts: 333
Joined: Sun Mar 05, 2017 5:42 am
Location: Belgium

Re: Rofi Tips & Themes

PostPosted by hannahisabelle » Tue Jun 13, 2017 5:56 am

[quote="DPisGROSS"]Image

Need that wall paper xD
Loving ArchLabs
User avatar
hannahisabelle
 
Posts: 19
Joined: Wed Jun 07, 2017 5:01 pm
Running Release: 4.1

Re: Rofi Tips & Themes

PostPosted by natemaia » Tue Jun 13, 2017 12:22 pm

@darknetmatrix

I believe all of the themes there are included by default with rofi in /usr/share/rofi/themes/

You can get a full list of the available "official" themes here https://github.com/DaveDavenport/rofi/tree/master/themes
Can also find some really useful scripts here https://github.com/DaveDavenport/rofi/tree/master/script

Like a new theme selector and one to convert old themes to new syntax, put them in /usr/bin/ and make sure they're executable

Full install guide here https://github.com/DaveDavenport/rofi/blob/master/INSTALL.md
User avatar
natemaia
ArchLabs Guru
ArchLabs Guru
 
Posts: 75
Joined: Thu Mar 16, 2017 10:14 pm
Location: Canada - British Columbia
Running Release: 5.0

Re: Rofi Tips & Themes

PostPosted by DPisGROSS » Sun Jun 18, 2017 8:12 am

darknetmatrix wrote:Indeed great stuff!


Thanks bru!

hannahisabelle wrote:
DPisGROSS wrote:Image

Need that wall paper xD


Here's ze wall!

Image
DPisGROSS
Moderator
Moderator
 
Posts: 11
Joined: Sat Feb 18, 2017 7:11 pm


Return to Configs, Scripts, Tutorials and Tips

Who is online

Users browsing this forum: No registered users and 0 guests

cron