Theme list | superfile

[giscus[bot]]

Theme list | superfile

List themes currently owned by superfile

https://superfile.netlify.app/list/theme-list/

[xplosionmind]

Hey @yorukot, thank you so much for creating superfile, I absolutely love it!

I use my terminal both with the light and the dark theme. Is there any “dynamic” theme that supports both? I would like superfile to be light when my terminal theme is light, and to be dark when my terminal theme is dark.

Even better, I think the ability to specify a light theme and a dark theme preference would be super useful!

[yorukot]

Nope, you can't do that now. :/
But I do want to make a key to choose between themes!

[Kemboiray]

Can I change the color of the folder icon?

[lazysegtree]

@Kemboiray
Not supported yet.
@yorukot I think we can add a folder icon color variable in theme.toml and allow users to customize that. For now its like this

src/config/icon/icon.go

var Folders = map[string]IconStyle{
	".atom":                 {Icon: "\ue764", Color: "#66595c"}, // Atom folder - Dark gray
	".aws":                  {Icon: "\ue7ad", Color: "#ff9900"}, // AWS folder - Orange
	".docker":               {Icon: "\ue7b0", Color: "#0db7ed"}, // Docker folder - Blue
	".gem":                  {Icon: "\ue21e", Color: "#e9573f"}, // Gem folder - Red
	".git":                  {Icon: "\ue5fb", Color: "#f14e32"}, // Git folder - Red
	".git-credential-cache": {Icon: "\ue5fb", Color: "#f14e32"}, // Git credential cache folder - Red
	".github":               {Icon: "\ue5fd", Color: "#000000"}, // GitHub folder - Black
	".npm":                  {Icon: "\ue5fa", Color: "#cb3837"}, // npm folder - Red
	".nvm":                  {Icon: "\ue718", Color: "#cb3837"}, // nvm folder - Red
	".rvm":                  {Icon: "\ue21e", Color: "#e9573f"}, // rvm folder - Red
	".Trash":                {Icon: "\uf1f8", Color: "#7f8c8d"}, // Trash folder - Light gray
	".vscode":               {Icon: "\ue70c", Color: "#007acc"}, // VSCode folder - Blue
	".vim":                  {Icon: "\ue62b", Color: "#019833"}, // Vim folder - Green
	"config":                {Icon: "\ue5fc", Color: "#ffb86c"}, // Config folder - Light orange
	"folder":                {Icon: "", Color: "NONE"},         // Generic folder - Dark yellowish
	"hidden":                {Icon: "\uf023", Color: "#75715e"}, // Hidden folder - Dark yellowish
	"node_modules":          {Icon: "\ue5fa", Color: "#cb3837"}, // Node modules folder - Red

	"superfile": {Icon: "󰚝", Color: "#FF6F00"},
}

We can replace color NONE with a variable coming from theme.toml file.

[yorukot]

Yes that's a good idea, i think we can do that

[lazysegtree]

#685

[Kemboiray]

I've never written Go but I hard coded the color in icon.go and rebuilt the program. I figure it won't be hard to make the setting configurable.

[highonskooma]

Just thought I would swing by and share a pywal custom template file I made. This allows superfile to have a theme that matches the wallpaper every time. I pair with a script that I use to select a random wallpaper, and most of my CLI apps have the same theme. Very handy if you use pywal and like a coordinated colorscheme across the system.

just place it into ~/.config/wal/templates

# Generated by pywal
# Superfile Theme

# ========= Border =========
file_panel_border = '{color8}'
sidebar_border = '{background}'
footer_border = '{color8}'

# ========= Border Active =========
file_panel_border_active = '{color4}'
sidebar_border_active = '{color1}'
footer_border_active = '{color2}'
modal_border_active = '{color7}'

# ========= Background (bg) =========
full_screen_bg = '{background}'
file_panel_bg = '{background}'
sidebar_bg = '{background}'
footer_bg = '{background}'
modal_bg = '{background}'

# ========= Foreground (fg) =========
full_screen_fg = '{foreground}'
file_panel_fg = '{foreground}'
sidebar_fg = '{foreground}'
footer_fg = '{foreground}'
modal_fg = '{foreground}'

# ========= Special Color =========
cursor = '{cursor}'
correct = '{color2}'
error = '{color1}'
hint = '{color4}'
cancel = '{color5}'
gradient_color = ['{color4}', "{{color6}}"]

# ========= File Panel Special Items =========
file_panel_top_directory_icon = '{color2}'
file_panel_top_path = '{color4}'
file_panel_item_selected_fg = '{color4}'
file_panel_item_selected_bg = '{background}'

# ========= Sidebar Special Items =========
sidebar_title = '{color4}'
sidebar_item_selected_fg = '{color4}'
sidebar_item_selected_bg = '{background}'
sidebar_divider = '{color7}'

# ========= Modal Special Items =========
modal_cancel_fg = "#383838"
modal_cancel_bg = '{color5}'
modal_confirm_fg = "#383838"
modal_confirm_bg = '{color6}'

Love the project!! Keep it up @yorukot

[highonskooma]

@Shykid002 to integrate this on superfile we would probably need to add wal as an optional dependency, and copy the .toml file gereated by wal to ~/.config/superfile/theme. The way I see it we could generate the wal template when superfile loads and copy it from ~/.cache/wal, but it's always better when this is triggered by wallpaper change instead of each boot of superfile, imho.

[Shykid002]

then how can we integrate it in superfile?

[highonskooma]

#186 (comment)

[n0tb0dy]

It's absolutely unclear how to make the themes work. The themes presented on the official website are simply not available. When you create your own theme, it doesn't work. Please organize the documentation!

[lazysegtree]

It's absolutely unclear how to make the themes work

Themes just work out of the box without you having to do anything.

[lazysegtree]

In case your terminal has some weird non-standard configurations, colors may not work.

[n0tb0dy]

Is it difficult to add to the documentation that these parameters should be included?

export COLORTERM=truecolor
export TERM=xterm-256color

When I added them to .bashrc, everything worked.

[lazysegtree]

"You need to have colors enabled in your terminal" is an obvious thing that doesn't needs to be in documentation.