Coder Social home page Coder Social logo

Better theme config about superfile HOT 16 CLOSED

lescx avatar lescx commented on July 20, 2024
Better theme config

from superfile.

Comments (16)

AnshumanNeon avatar AnshumanNeon commented on July 20, 2024 1

i absolutely love the toml file but i don't think that a json file is any bad. It just needs better naming conventions.

from superfile.

AnshumanNeon avatar AnshumanNeon commented on July 20, 2024 1

i also prefer it. I just wanted to say that json doesn't feel that bad. But yeah, toml is nice. I will look forward to it. You can call me to translate the themes

from superfile.

AnshumanNeon avatar AnshumanNeon commented on July 20, 2024 1

i like this

from superfile.

yorukot avatar yorukot commented on July 20, 2024

Thank you for bringing this up
I have never designed a theme. I may redesign the theme file in a few days.May i ask for your suggestion?

from superfile.

lescx avatar lescx commented on July 20, 2024

Sure thing. A few suggestions:

A short design lecture

A common design pattern is to separate UI elements like menus from the main editor/work UI element. In the case of a file manager, the editor would be your file selection(s).

There is also a design decision to be made about whether or not to use a border. IDEs often allow the use of two different themes based on this concept - bordered and borderless themes.

Menu items and borders have two properties that need separation in design:

  1. Active/Inactive(/Last) item. These often have different text or border colours. Design implies function. For example, for the Processes window in the superfile for a light theme:

Normal text in processes: primary (middle)
Border (active): secondary color (brightest)
Processes: tertiary color (darkest)

  1. Visual coherence. For a side menu, these are handled by a background colour different from the editor or a separation by a border colour != the text colour.

An example of this using my Tmux status bar:

image

On the left is our "menu". The keyboard shortcuts (1, 2, 3) are the same because they serve all the same purpose. The text marks the current active or inactive window. In tmux you can also implement a "last window" state but I don't use that feature.

Although it is cleaner and perhaps more aesthetically pleasing to use the same background colour for the rest of the terminal, it is good to have a separation in context.

Notes

I am against supporting legacy standards until the world freezes over (4 bit, 8 bit colours).
Still, it might be a consideration to support 256 colors for terminals that do not support true color. terminfo should handle this… terminfo is broken. Helix and Neovim check if the terminal supports true color. Also, there is the $COLORTERM variable used by some applications (Helix uses it to force 24 bit colors if the terminal doesn't tell it correctly but supports it anyway).


I'm at university right now. I will come back in a few hours and come up with a mock-up for the theming with a JSON.

from superfile.

yorukot avatar yorukot commented on July 20, 2024

Oh my god

I really appreciate you typing up such a long list to introduce knowledge about the theme!!

from superfile.

lescx avatar lescx commented on July 20, 2024

It is common to write config files for in Go written applications in toml. This would be my first take on how to properly define a theme architecture.

[theme.your-theme]

# Text Colors
text_primary = "" # Default text color
text_secondary = "" # Often less colorful version of primary; e.g. non-active border
text_tertiary = "" # Accent text color for special stuff, e.g. `Processes`, `Clipboard` text

# Background
background = "" 

# Borders
border = ""        
border_active = ""  

# Special Colors
hint = ""
info = ""
warning = ""
error = ""
accent = ""  # E.g. default folder color

# Gradient
# The gradient could also be used for the Super Files" in the top left corner after opening `spf`
# or for loading animations when there is a blocking wait going on.
gradient_color_1 = ""
gradient_color_2 = ""

# Cursor
cursor = ""
selection = ""
selection_active = ""

Also, a few things I noticed:

image

Documents should be the same color as the other entries in the directory selection but bold.

image

The icon next to /home/luca/.config/superfile should be the same as the folder icon in the file browser. No need to specify a new color for this icon.

image

Clipboard and Browser 1/4 should be the same tertiary color, no matter if one of them is the active tab or not.

from superfile.

yorukot avatar yorukot commented on July 20, 2024

i will update this!

from superfile.

yorukot avatar yorukot commented on July 20, 2024

I think the bottom and sidebar border_active need to be separated separately

selection = ""
selection_active = ""

what is this different

from superfile.

lescx avatar lescx commented on July 20, 2024

I think a TOML file is easier to use for a config file which gets edited by an end user. A lot of popular applications use TOML (or plain old key = value which is easy to parse). I don't see that for JSON.

from superfile.

AnshumanNeon avatar AnshumanNeon commented on July 20, 2024

yes it is easy. but json isn't hard too. We can change to toml anytime. I would require a bit of changing packages and code in the src code. But it will be a piece of cake on the user customization side of things

from superfile.

yorukot avatar yorukot commented on July 20, 2024

So I think I'm going to change all the config files to toml, which I think is better.

from superfile.

AnshumanNeon avatar AnshumanNeon commented on July 20, 2024

all themes are translated now.

from superfile.

yorukot avatar yorukot commented on July 20, 2024

Thank you so much!

I'm still trying to redesign the new theme configuration.

from superfile.

yorukot avatar yorukot commented on July 20, 2024
# Border
file_panel_border = "#868686"
sidebar_border = "#868686"
footer_border = "#868686"
modal_border = "#868686"

# Border Active
file_panel_border_active = "#FFF1C5"
sidebar_border_active = "#D79921"
footer_border_active = "#D79921"
modal_border_active = "#868686"

# Background (bg)

full_screen_bg = "#282828"
file_panel_bg = "#282828"
sidebar_bg = "#282828"
footer_bg = "#282828"
modal_bg = "#282828"

# Foreground (fg)

full_screen_fg = "#EBDBB2"
file_panel_fg = "#EBDBB2"
sidebar_fg = "#EBDBB2"
footer_fg = "#EBDBB2"
modal_fg = "#EBDBB2"

# Special Color

cursor = "#8EC07C"
correct = "#8ec07c"
error = "#FF6969"
hint = "#468588"
cancel = "#838383"
warn = "#FF0000"
gradient_color = ["#689d6a", "#fb4934"]

# File Panel Special Items

file_panel_top_directory_icon = "#8EC07C"
file_panel_top_path = "#458588"
file_panel_item_selected_fg = "#D3869B"
file_panel_item_selected_bg = ""

# Sidebar Special Items

sidebar_title = "#CC241D"
sidebar_item_selected_fg = "#E8751A"
sidebar_item_selected_bg = "#282828"

# Modal Special Items

modal_cancel_fg = "#EBDBB2"
modal_cancel_bg = "#6D6D6D"
modal_confirm_fg = "#EBDBB2"
modal_confirm_bg = "#FF4D00"

What do you guys think about this

from superfile.

yorukot avatar yorukot commented on July 20, 2024

#66

from superfile.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.