aaronraimist/element-themes

How to apply the theme in element desktop?

Closed this issue · 7 comments

iambeingtracked commented

I've created ~/.config/Element/config.json file, pasted the Nord dark theme into there, but i still can't select it in the client. What should i do?

aaronraimist commented

Show the contents of your config.json file

iambeingtracked commented 
{
    "name": "Nord dark theme",
    "is_dark": true,
    "colors": {
        "accent-color": "#a3be8c",
        "primary-color": "#88c0d0",
        "warning-color": "#bf616a",

        "sidebar-color": "#2e3440",
        "roomlist-background-color": "#3b4252",
        "roomlist-text-color": "#ebcb8b",
        "roomlist-text-secondary-color": "#e5e9f0",
        "roomlist-highlights-color": "#2e3440",
        "roomlist-separator-color": "#434c5e",

        "timeline-background-color": "#434c5e",
        "timeline-text-color": "#eceff4",
        "secondary-content": "#eceff4",
        "tertiary-content": "#eceff4",
        "timeline-text-secondary-color": "#81a1c1",
        "timeline-highlights-color": "#3b4252",
        "reaction-row-button-selected-bg-color": "#bf616a"
    }
}
aaronraimist commented

You haven't put the theme in the right place. https://github.com/aaronraimist/element-themes#self-host-element-or-use-element-desktop is the minimum possible config.json file with themes enabled. Your theme needs to be inside

    "settingDefaults": {
        "custom_themes": [
iambeingtracked commented

thank you, now it works

quantenzitrone commented

Have I done anything wrong here?

{
	"settingDefaults":
	{
		"custom_themes":
		[
			{
				"colors":
				{
					"roomlist-background-color":"#000000",
					"sidebar-color":"#000000",
					"timeline-background-color":"#000000"
				},
				"is_dark":true,
				"name":"Amoled"
			}
		],
		"default_theme":"custom-Amoled"
	}
}

It works in Schildichat-Desktop, but not in Element-Desktop.

aaronraimist commented

@quantenzitrone looks fine to me. I don't know much about Schildichat but I would guess it hasn't done much custom work on theming. So if it works in one, it should work in the other. Make sure you are putting the config.json in the correct location. https://github.com/vector-im/element-desktop#user-specified-configjson

CRTified commented

I'm also trying to configure element-desktop and I'm only able to set the themes via /devtools so far (reverse process from the uninstall procedure in #55).

My config.json looks like this:

{
    "show_labs_settings": true,
    "features": {
	"feature_pinning": true,
	"feature_custom_themes": true
    },
    "default_theme": "custom-stylix",
    "settingDefaults": {
	"default_theme": "custom-stylix",
        "custom_themes": [
	    {
		"name": "stylix",
		"is_dark": true,
		"fonts": {
		    "general": "NotoSans Nerd Font",
		    "monospace": "Fira Code Nerd Font"
		},
		"colors": {
		    "accent-color": "#414b24",
		    "accent": "#414b24",
		    "primary-color": "#5bfae6",
		    "warning-color": "#909752",
		    "alert": "#909752",
		    "sidebar-color": "#131e15",
		    "roomlist-background-color": "#414b24",
		    "roomlist-text-color": "#5bfae6",
		    "roomlist-text-secondary-color": "#b9faed",
		    "roomlist-highlights-color": "#8c6324",
		    "roomlist-separator-color": "#36a281",
		    "timeline-background-color": "#131e15",
		    "timeline-text-color": "#b9faed",
		    "timeline-text-secondary-color": "#5bfae6",
		    "timeline-highlights-color": "#8c6324",
		    "username-colors": ["#4ba085", "#909752", "#d3831d",
					"#cf7d20", "#2ea284", "#36a281",
					"#d07c28", "#c6852a"],
		    "avatar-background-colors": ["#4ba085", "#2ea284",
						 "#36a281"],
		    "reaction-row-button-selected-bg-color": "#8c6324",
		    "menu-selected-color": "#8c6324",
		    "focus-bg-color": "#414b24",
		    "room-highlight-color": "#8c6324",
		    "other-user-pill-bg-color": "#414b24",
		    "icon-button-color": "#414b24",
		    "togglesw-off-color": "#414b24",
		    "secondary-content": "#b9faed",
		    "tertiary-content": "#b9faed"
		}
	    }
        ]
    }
}

The json is valid according to jq. I know that the config.json gets read as the configured features and show_labs_settings get applied (and I actually have a default_server_config in there as well, which works fine).

I also tried setting_default instead of settingDefaults as documented upstream in element-web (assuming that it uses the same config format).

The custom theme neither appears in the list nor is it applied with any of the selectable themes (or “Use system theme”).

Any pointers here would be really helpful, I really don't know what might be wrong here.

Similar to @quantenzitrone, the config.json works just fine for schildichat-desktop (although I'm using Element. Just tried that one to test it). default_theme had no effect there, though.