├── config.rasi ├── tokyonight.rasi ├── tokyonight_big1.rasi ├── tokyonight_big2.rasi └── README.md /config.rasi: -------------------------------------------------------------------------------- 1 | configuration{ 2 | modi: ["drun", "window", "run"]; 3 | icon-theme: "Papirus-Dark"; 4 | show-icons: true; 5 | terminal: "alacritty"; 6 | drun-display-format: "{icon} {name}"; 7 | location: 0; 8 | disable-history: false; 9 | sidebar-mode: false; 10 | display-drun: " "; 11 | display-run: " "; 12 | display-window: " "; 13 | 14 | //adding vim keybindings 15 | kb-row-up: "Up,Control+k"; 16 | kb-row-left: "Left,Control+h"; 17 | kb-row-right: "Right,Control+l"; 18 | kb-row-down: "Down,Control+j"; 19 | 20 | kb-accept-entry: "Control+z,Control+y,Return,KP_Enter"; 21 | 22 | //fixing up 23 | kb-remove-to-eol: ""; 24 | kb-move-char-back: "Control+b"; 25 | kb-remove-char-back: "BackSpace"; 26 | kb-move-char-forward: "Control+f"; 27 | kb-mode-complete: "Control+o"; 28 | } 29 | @theme "/usr/share/rofi/themes/tokyonight.rasi" 30 | -------------------------------------------------------------------------------- /tokyonight.rasi: -------------------------------------------------------------------------------- 1 | /* 2 | * Tokyonight colorscheme for rofi 3 | * User: w8ste 4 | */ 5 | 6 | 7 | // define colors etc. 8 | * { 9 | bg: #24283b; 10 | hv: #9274ca; 11 | primary: #C5C8C6; 12 | ug: #0B2447; 13 | font: "Monospace 11"; 14 | background-color: @bg; 15 | //dark: @bg; 16 | border: 0px; 17 | kl: #7aa2f7; 18 | black: #000000; 19 | 20 | transparent: rgba(46,52,64,0); 21 | } 22 | 23 | // defines different aspects of the window 24 | window { 25 | width: 700; 26 | /*since line wont work with height, i comment it out 27 | if you rather control the size via height 28 | just comment it out */ 29 | //height: 500; 30 | 31 | orientation: horizontal; 32 | location: center; 33 | anchor: center; 34 | transparency: "screenshot"; 35 | border-color: @primary; 36 | border: 3px; 37 | border-radius: 6px; 38 | spacing: 0; 39 | children: [ mainbox ]; 40 | } 41 | 42 | mainbox { 43 | spacing: 0; 44 | children: [ inputbar, message, listview ]; 45 | } 46 | 47 | inputbar { 48 | color: @kl; 49 | padding: 11px; 50 | border: 0 0 2px 0; 51 | border-color: @primary; 52 | } 53 | 54 | message { 55 | padding: 0; 56 | } 57 | 58 | textbox { 59 | color: @kl; 60 | padding: 10px; 61 | } 62 | 63 | entry, prompt, case-indicator { 64 | text-font: inherit; 65 | text-color: inherit; 66 | } 67 | 68 | entry { 69 | cursor: pointer; 70 | } 71 | 72 | prompt { 73 | margin: 0px 5px 0px 0px; 74 | } 75 | 76 | listview { 77 | layout: vertical; 78 | //spacing: 5px; 79 | padding: 8px; 80 | lines: 12; 81 | columns: 1; 82 | dynamic: false; 83 | } 84 | 85 | element { 86 | padding: 2px; 87 | vertical-align: 1; 88 | color: @kl; 89 | font: inherit; 90 | } 91 | 92 | element-text { 93 | background-color: inherit; 94 | text-color: inherit; 95 | } 96 | 97 | element selected.normal { 98 | color: @black; 99 | background-color: @hv; 100 | } 101 | 102 | element normal active { 103 | background-color: @hv; 104 | color: @black; 105 | } 106 | 107 | element-text, element-icon { 108 | background-color: inherit; 109 | text-color: inherit; 110 | } 111 | 112 | element normal urgent { 113 | background-color: @primary; 114 | } 115 | 116 | element selected active { 117 | background: @hv; 118 | foreground: @bg; 119 | } 120 | 121 | button { 122 | padding: 6px; 123 | color: @primary; 124 | horizonatal-align: 0.5; 125 | 126 | border: 2px 0px 2px 2px; 127 | border-radius: 4px 0px 0px 4px; 128 | border-color: @primary; 129 | } 130 | 131 | button selected normal { 132 | border: 2px 0px 2px 2px; 133 | border-color: @primary; 134 | } 135 | 136 | scrollbar { 137 | enabled: true; 138 | } 139 | -------------------------------------------------------------------------------- /tokyonight_big1.rasi: -------------------------------------------------------------------------------- 1 | /* 2 | * Tokyonight colorscheme (big icons) for rofi 3 | * User: w8ste 4 | */ 5 | 6 | 7 | // define colors etc. 8 | * { 9 | bg: #24283b; 10 | hv: #9274ca; 11 | primary: #C5C8C6; 12 | ug: #0B2447; 13 | font: "Monospace 11"; 14 | background-color: @bg; 15 | //dark: @bg; 16 | border: 0px; 17 | kl: #7aa2f7; 18 | black: #000000; 19 | 20 | transparent: rgba(46,52,64,0); 21 | } 22 | 23 | // defines different aspects of the window 24 | window { 25 | width: 700; 26 | /*since line wont work with height, i comment it out 27 | if you rather control the size via height 28 | just comment it out */ 29 | //height: 500; 30 | 31 | orientation: horizontal; 32 | location: center; 33 | anchor: center; 34 | transparency: "screenshot"; 35 | border-color: @transparent; 36 | border: 0px; 37 | border-radius: 6px; 38 | spacing: 0; 39 | children: [ mainbox ]; 40 | } 41 | 42 | mainbox { 43 | spacing: 0; 44 | children: [ inputbar, message, listview ]; 45 | } 46 | 47 | inputbar { 48 | color: @kl; 49 | padding: 11px; 50 | border: 3px 3px 2px 3px; 51 | border-color: @primary; 52 | border-radius: 6px 6px 0px 0px; 53 | } 54 | 55 | message { 56 | padding: 0; 57 | border-color: @primary; 58 | border: 0px 1px 1px 1px; 59 | } 60 | 61 | entry, prompt, case-indicator { 62 | text-font: inherit; 63 | text-color: inherit; 64 | } 65 | 66 | entry { 67 | cursor: pointer; 68 | } 69 | 70 | prompt { 71 | margin: 0px 5px 0px 0px; 72 | } 73 | 74 | listview { 75 | layout: vertical; 76 | //spacing: 5px; 77 | padding: 8px; 78 | lines: 7; 79 | columns: 1; 80 | border: 0px 3px 3px 3px; 81 | border-radius: 0px 0px 6px 6px; 82 | border-color: @primary; 83 | dynamic: false; 84 | } 85 | 86 | element { 87 | padding: 2px; 88 | vertical-align: 1; 89 | color: @kl; 90 | font: inherit; 91 | } 92 | 93 | element-text { 94 | background-color: inherit; 95 | text-color: inherit; 96 | vertical-align: 0.5; 97 | } 98 | 99 | element selected.normal { 100 | color: @black; 101 | background-color: @hv; 102 | } 103 | 104 | element normal active { 105 | background-color: @hv; 106 | color: @black; 107 | } 108 | 109 | element-icon { 110 | background-color: inherit; 111 | text-color: inherit; 112 | size: 2.5em; 113 | } 114 | 115 | element normal urgent { 116 | background-color: @primary; 117 | } 118 | 119 | element selected active { 120 | background: @hv; 121 | foreground: @bg; 122 | } 123 | 124 | button { 125 | padding: 6px; 126 | color: @primary; 127 | horizonatal-align: 0.5; 128 | 129 | border: 2px 0px 2px 2px; 130 | border-radius: 4px 0px 0px 4px; 131 | border-color: @primary; 132 | } 133 | 134 | button selected normal { 135 | border: 2px 0px 2px 2px; 136 | border-color: @primary; 137 | } 138 | -------------------------------------------------------------------------------- /tokyonight_big2.rasi: -------------------------------------------------------------------------------- 1 | /* 2 | * Tokyonight colorscheme (big icons) for rofi 3 | * User: w8ste 4 | */ 5 | 6 | 7 | // define colors etc. 8 | * { 9 | bg: #24283b; 10 | hv: #9274ca; 11 | primary: #C5C8C6; 12 | ug: #0B2447; 13 | font: "Monospace 11"; 14 | background-color: @bg; 15 | //dark: @bg; 16 | border: 0px; 17 | kl: #7aa2f7; 18 | black: #000000; 19 | 20 | transparent: rgba(46,52,64,0); 21 | } 22 | 23 | // defines different aspects of the window 24 | window { 25 | width: 700; 26 | /*since line wont work with height, i comment it out 27 | if you rather control the size via height 28 | just comment it out */ 29 | //height: 500; 30 | 31 | orientation: horizontal; 32 | location: center; 33 | anchor: center; 34 | transparency: "screenshot"; 35 | border-color: @transparent; 36 | border: 0px; 37 | border-radius: 6px; 38 | spacing: 0; 39 | children: [ mainbox ]; 40 | } 41 | 42 | mainbox { 43 | spacing: 0; 44 | children: [ inputbar, message, listview ]; 45 | } 46 | 47 | inputbar { 48 | color: @kl; 49 | padding: 11px; 50 | border: 3px 3px 2px 3px; 51 | border-color: @primary; 52 | border-radius: 6px 6px 0px 0px; 53 | } 54 | 55 | message { 56 | padding: 0; 57 | border-color: @primary; 58 | border: 0px 1px 1px 1px; 59 | } 60 | 61 | entry, prompt, case-indicator { 62 | text-font: inherit; 63 | text-color: inherit; 64 | } 65 | 66 | entry { 67 | cursor: pointer; 68 | } 69 | 70 | prompt { 71 | margin: 0px 5px 0px 0px; 72 | } 73 | 74 | listview { 75 | layout: vertical; 76 | //spacing: 5px; 77 | padding: 8px; 78 | lines: 7; 79 | columns: 2; 80 | border: 0px 3px 3px 3px; 81 | border-radius: 0px 0px 6px 6px; 82 | border-color: @primary; 83 | dynamic: false; 84 | } 85 | 86 | element { 87 | padding: 2px; 88 | vertical-align: 1; 89 | color: @kl; 90 | font: inherit; 91 | } 92 | 93 | element-text { 94 | background-color: inherit; 95 | text-color: inherit; 96 | vertical-align: 0.5; 97 | } 98 | 99 | element selected.normal { 100 | color: @black; 101 | background-color: @hv; 102 | } 103 | 104 | element normal active { 105 | background-color: @hv; 106 | color: @black; 107 | } 108 | 109 | element-icon { 110 | background-color: inherit; 111 | text-color: inherit; 112 | size: 2.5em; 113 | } 114 | 115 | element normal urgent { 116 | background-color: @primary; 117 | } 118 | 119 | element selected active { 120 | background: @hv; 121 | foreground: @bg; 122 | } 123 | 124 | button { 125 | padding: 6px; 126 | color: @primary; 127 | horizonatal-align: 0.5; 128 | 129 | border: 2px 0px 2px 2px; 130 | border-radius: 4px 0px 0px 4px; 131 | border-color: @primary; 132 | } 133 | 134 | button selected normal { 135 | border: 2px 0px 2px 2px; 136 | border-color: @primary; 137 | } 138 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Tokyonight-rofi-theme 2 | 3 | ``` 4 | Hey there, this is my Tokyonight rofi theme. Changes are to be expected :) 5 | Consider leaving a star, so you will not miss any ⭐ 6 | ``` 7 | ### Versions 8 | 9 | Default Version (normal icons and more text): 10 | ![Alt text](https://github.com/w8ste/screenshots/blob/main/rofi_full_2.png) 11 | 12 | Big icons version 1 (bigger icons, one column): 13 | ![Alt text](https://github.com/w8ste/screenshots/blob/main/rofi_big_icons_sinsingle.png) 14 | 15 | Big icons version 2 (bigger icons, two columns): 16 | ![Alt text](https://github.com/w8ste/screenshots/blob/main/rofi_big_icons.png) 17 | 18 | ### Prerequisites 19 | 20 | My rofi setup requires you to have some kind of [Nerdfont](https://www.nerdfonts.com/) and [rofi](https://github.com/davatorium/rofi) installed. In case 21 | you would like my setup without having to install a nerdfont, just comment out lines 10-12 in my [config.rasi](https://github.com/w8ste/Tokyonight-rofi-theme/blob/main/config.rasi). 22 | 23 | ### Installation 24 | 25 | Run the following commands: 26 | 27 | ``` 28 | mv ~/.config/rofi ~/.config/rofi.bak 29 | git clone git@github.com:w8ste/Tokyonight-rofi-theme.git ~/.config/rofi 30 | sudo mv ~/.config/rofi/tokyonight.rasi /usr/share/rofi/themes 31 | sudo mv ~/.config/rofi/tokyonight_big1.rasi /usr/share/rofi/themes 32 | sudo mv ~/.config/rofi/tokyonight_big2.rasi /usr/share/rofi/themes 33 | rm ~/.config/rofi/README.md 34 | ``` 35 | 36 | Afterwards you can select the version, that you want via the rofi-theme-selector. In case you do not want all 37 | of the versions: only `mv` the ones that you want into `/usr/share/rofi/themes` and `rm ~/.config/rofi/"version"`the other ones. 38 | It may be possible that you need to reaload your .config files (e.g. $mod + shift + r for i3), even though 39 | this never occured when i was testing. 40 | 41 | ![Alt text](https://github.com/w8ste/screenshots/blob/main/rofi_full.png) 42 | 43 | ### Alternative installation 44 | In case you prefer to install just the theme without my configuration of rofi, you run the following commands: 45 | ``` 46 | git clone git@github.com:w8ste/Tokyonight-rofi-theme.git ~/tokyonight 47 | sudo mv ~/tokyonight/tokyonight.rasi /usr/share/rofi/themes 48 | sudo mv ~/.config/rofi/tokyonight_big1.rasi /usr/share/rofi/themes 49 | sudo mv ~/.config/rofi/tokyonight_big2.rasi /usr/share/rofi/themes 50 | rm -rf ~/tokyonight 51 | ``` 52 | 53 | ### Appendix 54 | - This theme was inspired by the [tokyonight](https://github.com/folke/tokyonight.nvim) colorscheme for nvim by folke. 55 | - If you like this rofi-theme please, consider becoming a stargazer :) 56 | - Check out my [dotfiles](https://github.com/w8ste/dotfiles) 57 | - and my [rofi-powermenu](https://github.com/w8ste/Rofi-Powermenu/tree/main) 58 | 59 | ### Contributing 60 | - In case you have something to add to this colorscheme feel free to fork it and if you want to create a pull request. If i believe your changes improved 61 | the project i will merge them 62 | 63 | ![Alt text](https://github.com/w8ste/screenshots/blob/main/window_rofi.png) 64 | 65 | ### Reddit 66 | This theme has been posted on reddit [here](https://www.reddit.com/r/unixporn/comments/15ybsjc/rofi_created_my_own_first_rofitheme_how_did_i_do/) and 67 | [here](https://www.reddit.com/r/unixporn/comments/15z3ob3/rofi_since_you_all_gave_my_feedback_how_do_you/). A big thanks to the unixporn community for their feedback, which 68 | helped me improve this theme :) 69 | --------------------------------------------------------------------------------