├── images ├── Pill1.png └── Pill2.png ├── Covalence ├── covalence.png └── covalence.json ├── Geeko Dark ├── Geeko Dark.png └── Geeko Dark.json ├── ThomCat ├── ThomCat-Black.png └── ThomCat-Black.json ├── Monokai Pro ├── Monokai-Pro.png └── Monokai-Pro.json ├── Nord ├── Nord Dark │ ├── Nord Dark.png │ └── Nord Dark.json └── Nord Light │ ├── Nord Light.png │ └── Nord Light.json ├── Luxury └── Luxury Dark │ ├── Luxury Dark.png │ └── Luxury Dark.json ├── Gruvbox ├── Gruvbox Dark │ ├── Gruvbox Dark.png │ └── Gruvbox Dark.json └── Gruvbox Light │ ├── Gruvbox Light.png │ └── Gruvbox Light.json ├── Catppuccin ├── Frappe │ ├── Catppuccin-Frappe-Theme.png │ └── Catppuccin-Frappe-Theme.json ├── Latte │ ├── Catppuccin-Latte-Theme.png │ └── Catppuccin-Latte-Theme.json ├── Mocha │ ├── Catppuccin-Mocha-Theme.png │ └── Catppuccin-Mocha-Theme.json └── Macchiato │ ├── Catppuccin-Macchiato-Theme.png │ └── Catppuccin-Macchiato-Theme.json ├── Discord ├── Discord-Black │ ├── Discord-Black-Theme.png │ └── Discord-Black-Theme.json └── Discord-Dark │ ├── Discord-Dark-Theme.png │ └── Discord-Dark-Theme.json ├── Dracula ├── Flat │ ├── screenshot 20-06-16 03-05-42.png │ └── DraculaFlat.json └── Non-flat │ ├── screenshot 20-06-19 14-09-11.png │ └── Dracula.json ├── Everforest Dark Hard ├── everforest-dark-hard.png └── everforest-dark-hard.json ├── Selenized ├── Selenized Black │ ├── Selenized Black.png │ └── Selenized Black.json ├── Selenized Dark │ ├── Selenized Dark.png │ └── Selenized Dark.json └── Selenized Light │ ├── Selenized Light.png │ └── Selenized Light.json ├── Solarized ├── Solarized Dark │ ├── Solarized Dark.png │ └── Solarized Dark.json └── Solarized Light │ ├── Solarized Light.png │ └── Solarized Light.json ├── Night Owl └── Night Owl Dark │ ├── Night-Owl-Dark-Theme.png │ └── Night-Owl-Dark-Theme.json ├── LICENSE └── README.md /images/Pill1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronraimist/element-themes/HEAD/images/Pill1.png -------------------------------------------------------------------------------- /images/Pill2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronraimist/element-themes/HEAD/images/Pill2.png -------------------------------------------------------------------------------- /Covalence/covalence.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronraimist/element-themes/HEAD/Covalence/covalence.png -------------------------------------------------------------------------------- /Geeko Dark/Geeko Dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronraimist/element-themes/HEAD/Geeko Dark/Geeko Dark.png -------------------------------------------------------------------------------- /ThomCat/ThomCat-Black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronraimist/element-themes/HEAD/ThomCat/ThomCat-Black.png -------------------------------------------------------------------------------- /Monokai Pro/Monokai-Pro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronraimist/element-themes/HEAD/Monokai Pro/Monokai-Pro.png -------------------------------------------------------------------------------- /Nord/Nord Dark/Nord Dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronraimist/element-themes/HEAD/Nord/Nord Dark/Nord Dark.png -------------------------------------------------------------------------------- /Nord/Nord Light/Nord Light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronraimist/element-themes/HEAD/Nord/Nord Light/Nord Light.png -------------------------------------------------------------------------------- /Luxury/Luxury Dark/Luxury Dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronraimist/element-themes/HEAD/Luxury/Luxury Dark/Luxury Dark.png -------------------------------------------------------------------------------- /Gruvbox/Gruvbox Dark/Gruvbox Dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronraimist/element-themes/HEAD/Gruvbox/Gruvbox Dark/Gruvbox Dark.png -------------------------------------------------------------------------------- /Gruvbox/Gruvbox Light/Gruvbox Light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronraimist/element-themes/HEAD/Gruvbox/Gruvbox Light/Gruvbox Light.png -------------------------------------------------------------------------------- /Catppuccin/Frappe/Catppuccin-Frappe-Theme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronraimist/element-themes/HEAD/Catppuccin/Frappe/Catppuccin-Frappe-Theme.png -------------------------------------------------------------------------------- /Catppuccin/Latte/Catppuccin-Latte-Theme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronraimist/element-themes/HEAD/Catppuccin/Latte/Catppuccin-Latte-Theme.png -------------------------------------------------------------------------------- /Catppuccin/Mocha/Catppuccin-Mocha-Theme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronraimist/element-themes/HEAD/Catppuccin/Mocha/Catppuccin-Mocha-Theme.png -------------------------------------------------------------------------------- /Discord/Discord-Black/Discord-Black-Theme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronraimist/element-themes/HEAD/Discord/Discord-Black/Discord-Black-Theme.png -------------------------------------------------------------------------------- /Discord/Discord-Dark/Discord-Dark-Theme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronraimist/element-themes/HEAD/Discord/Discord-Dark/Discord-Dark-Theme.png -------------------------------------------------------------------------------- /Dracula/Flat/screenshot 20-06-16 03-05-42.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronraimist/element-themes/HEAD/Dracula/Flat/screenshot 20-06-16 03-05-42.png -------------------------------------------------------------------------------- /Everforest Dark Hard/everforest-dark-hard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronraimist/element-themes/HEAD/Everforest Dark Hard/everforest-dark-hard.png -------------------------------------------------------------------------------- /Selenized/Selenized Black/Selenized Black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronraimist/element-themes/HEAD/Selenized/Selenized Black/Selenized Black.png -------------------------------------------------------------------------------- /Selenized/Selenized Dark/Selenized Dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronraimist/element-themes/HEAD/Selenized/Selenized Dark/Selenized Dark.png -------------------------------------------------------------------------------- /Selenized/Selenized Light/Selenized Light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronraimist/element-themes/HEAD/Selenized/Selenized Light/Selenized Light.png -------------------------------------------------------------------------------- /Solarized/Solarized Dark/Solarized Dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronraimist/element-themes/HEAD/Solarized/Solarized Dark/Solarized Dark.png -------------------------------------------------------------------------------- /Solarized/Solarized Light/Solarized Light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronraimist/element-themes/HEAD/Solarized/Solarized Light/Solarized Light.png -------------------------------------------------------------------------------- /Dracula/Non-flat/screenshot 20-06-19 14-09-11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronraimist/element-themes/HEAD/Dracula/Non-flat/screenshot 20-06-19 14-09-11.png -------------------------------------------------------------------------------- /Night Owl/Night Owl Dark/Night-Owl-Dark-Theme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronraimist/element-themes/HEAD/Night Owl/Night Owl Dark/Night-Owl-Dark-Theme.png -------------------------------------------------------------------------------- /Catppuccin/Macchiato/Catppuccin-Macchiato-Theme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aaronraimist/element-themes/HEAD/Catppuccin/Macchiato/Catppuccin-Macchiato-Theme.png -------------------------------------------------------------------------------- /Everforest Dark Hard/everforest-dark-hard.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Everforest dark hard", 3 | "is_dark": true, 4 | "colors": { 5 | "accent-color": "#a7c080", 6 | "primary-color": "#a7c080", 7 | "warning-color": "#e67e80", 8 | "sidebar-color": "#323d43", 9 | "roomlist-background-color": "#2f383e", 10 | "roomlist-text-color": "#d3c6aa", 11 | "roomlist-text-secondary-color": "#d3c6aa", 12 | "roomlist-highlights-color": "#4b565c", 13 | "roomlist-separator-color": "#4b565c", 14 | "timeline-background-color": "#2b3339", 15 | "timeline-text-color": "#d3c6aa", 16 | "secondary-content": "#d3c6aa", 17 | "tertiary-content": "#d3c6aa", 18 | "timeline-text-secondary-color": "#a7c080", 19 | "timeline-highlights-color": "#4b565c", 20 | "reaction-row-button-selected-bg-color": "#4b565c" 21 | } 22 | } 23 | 24 | -------------------------------------------------------------------------------- /Solarized/Solarized Dark/Solarized Dark.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Solarized Dark", 3 | "is_dark": true, 4 | "colors": { 5 | "accent-color": "#b58900", 6 | "primary-color": "#268bd2", 7 | "warning-color": "#dc322f", 8 | "sidebar-color": "#002b36", 9 | "roomlist-background-color": "#073642", 10 | "roomlist-text-color": "#839496", 11 | "roomlist-text-secondary-color": "#93a1a1", 12 | "roomlist-highlights-color": "#586e75", 13 | "timeline-background-color": "#002b36", 14 | "timeline-text-color": "#839496", 15 | "secondary-content": "#839496", 16 | "tertiary-content": "#839496", 17 | "timeline-text-secondary-color": "#586e75", 18 | "timeline-highlights-color": "#073642", 19 | "reaction-row-button-selected-bg-color": "#268bd2" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /Solarized/Solarized Light/Solarized Light.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Solarized Light", 3 | "is_dark": false, 4 | "colors": { 5 | "accent-color": "#b58900", 6 | "primary-color": "#268bd2", 7 | "warning-color": "#dc322f", 8 | "sidebar-color": "#fdf6e3", 9 | "roomlist-background-color": "#eee8d5", 10 | "roomlist-text-color": "#657b83", 11 | "roomlist-text-secondary-color": "#586e75", 12 | "roomlist-highlights-color": "#93a1a1", 13 | "timeline-background-color": "#fdf6e3", 14 | "timeline-text-color": "#657b83", 15 | "secondary-content": "#657b83", 16 | "tertiary-content": "#657b83", 17 | "timeline-text-secondary-color": "#93a1a1", 18 | "timeline-highlights-color": "#eee8d5", 19 | "reaction-row-button-selected-bg-color": "#268bd2" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /ThomCat/ThomCat-Black.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ThomCat black theme", 3 | "is_dark": true, 4 | "colors": { 5 | "accent-color": "#cc7b19", 6 | "primary-color": "#9F8652", 7 | "warning-color": "#f9c003", 8 | "sidebar-color": "#000000", 9 | "roomlist-background-color": "#191919", 10 | "roomlist-text-color": "#cc7b19", 11 | "roomlist-text-secondary-color": "#e5e5e5", 12 | "roomlist-highlights-color": "#323232", 13 | "roomlist-separator-color": "#4c4c4c", 14 | "timeline-background-color": "#000000", 15 | "timeline-text-color": "#e5e5e5", 16 | "secondary-content": "#e5e5e5", 17 | "tertiary-content": "#e5e5e5", 18 | "timeline-text-secondary-color": "#b2b2b2", 19 | "timeline-highlights-color": "#212121", 20 | "reaction-row-button-selected-bg-color": "#cc7b19" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /Geeko Dark/Geeko Dark.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Geeko dark theme", 3 | "is_dark": true, 4 | "colors": { 5 | "accent-color": "#73ba25", 6 | "primary-color": "#35b9ab", 7 | "warning-color": "#bf616a", 8 | 9 | "sidebar-color": "#2a2a2a", 10 | "roomlist-background-color": "#4a4a4a", 11 | "roomlist-text-color": "#ffffff", 12 | "roomlist-text-secondary-color": "#dddddd", 13 | "roomlist-highlights-color": "#2a2a2a", 14 | "roomlist-separator-color": "#3a3a3a", 15 | 16 | "timeline-background-color": "#3a3a3a", 17 | "timeline-text-color": "#eeeeee", 18 | "secondary-content": "#eeeeee", 19 | "tertiary-content": "#eeeeee", 20 | "timeline-text-secondary-color": "#6da741", 21 | "timeline-highlights-color": "#bf616a", 22 | "reaction-row-button-selected-bg-color": "#bf616a" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /Luxury/Luxury Dark/Luxury Dark.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Luxury Dark theme", 3 | "is_dark": true, 4 | "colors": { 5 | "accent-color": "#D9BC00", 6 | "primary-color": "#FFDD00", 7 | "warning-color": "#FBC403", 8 | 9 | "sidebar-color": "#020F1B", 10 | "roomlist-background-color": "#011223", 11 | "roomlist-highlights-color": "#1E354A", 12 | "roomlist-separator-color": "#05192D", 13 | "roomlist-text-color": "#FFEC70", 14 | "roomlist-text-secondary-color": "#FFF3A4", 15 | 16 | "timeline-background-color": "#05192D", 17 | "timeline-highlights-color": "#011223", 18 | "timeline-text-color": "#FFF3A4", 19 | "secondary-content": "#FFF3A4", 20 | "tertiary-content": "#FFF3A4", 21 | "timeline-text-secondary-color": "#A79000", 22 | "reaction-row-button-selected-bg-color": "#FFEC70" 23 | } 24 | } -------------------------------------------------------------------------------- /Selenized/Selenized Dark/Selenized Dark.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Selenized dark theme", 3 | "is_dark": true, 4 | "colors": { 5 | "accent-color": "#41c7b9", 6 | "primary-color": "#4695f7", 7 | "warning-color": "#fa5750", 8 | 9 | "sidebar-color": "#103c48", 10 | "roomlist-background-color": "#184956", 11 | "roomlist-text-color": "#dbb32d", 12 | "roomlist-text-secondary-color": "#FFFFFF", 13 | "roomlist-highlights-color": "#2d5b69", 14 | "roomlist-separator-color": "#2d5b69", 15 | 16 | "timeline-background-color": "#2d5b69", 17 | "timeline-text-color": "#FFFFFF", 18 | "secondary-content": "#FFFFFF", 19 | "tertiary-content": "#FFFFFF", 20 | "timeline-text-secondary-color": "#72898f", 21 | "timeline-highlights-color": "#184956", 22 | "reaction-row-button-selected-bg-color": "#4695f7" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /Selenized/Selenized Black/Selenized Black.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Selenized black theme", 3 | "is_dark": true, 4 | "colors": { 5 | "accent-color": "#70b433", 6 | "primary-color": "#4695f7", 7 | "warning-color": "#ed4a46", 8 | 9 | "sidebar-color": "#181818", 10 | "roomlist-background-color": "#252525", 11 | "roomlist-text-color": "#ffffff", 12 | "roomlist-text-secondary-color": "#b9b9b9", 13 | "roomlist-highlights-color": "#3b3b3b", 14 | "roomlist-separator-color": "#121212", 15 | 16 | "timeline-background-color": "#181818", 17 | "timeline-text-color": "#FFFFFF", 18 | "secondary-content": "#FFFFFF", 19 | "tertiary-content": "#FFFFFF", 20 | "timeline-text-secondary-color": "#777777", 21 | "timeline-highlights-color": "#252525", 22 | "reaction-row-button-selected-bg-color": "#4695f7" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /Selenized/Selenized Light/Selenized Light.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Selenized light theme", 3 | "is_dark": false, 4 | "colors": { 5 | "accent-color": "#ad8900", 6 | "primary-color": "#009c8f", 7 | "warning-color": "#d2212d", 8 | 9 | "sidebar-color": "#d5cdb6", 10 | "roomlist-background-color": "#ece3cc", 11 | "roomlist-text-color": "#c25d1e", 12 | "roomlist-text-secondary-color": "#000000", 13 | "roomlist-highlights-color": "#fbf3db", 14 | "roomlist-separator-color": "#fbf3db", 15 | 16 | "timeline-background-color": "#fbf3db", 17 | "timeline-text-color": "#000000", 18 | "secondary-content": "#000000", 19 | "tertiary-content": "#000000", 20 | "timeline-text-secondary-color": "#777777", 21 | "timeline-highlights-color": "#ece3cc", 22 | "reaction-row-button-selected-bg-color": "#4695f7" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /Dracula/Non-flat/Dracula.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Dracula", 3 | "is_dark": true, 4 | "colors": { 5 | "accent-color": "#bd93f9", 6 | "primary-color": "#bd93f9", 7 | "warning-color": "#bd93f9", 8 | "sidebar-color": "#1e1f29", 9 | "roomlist-background-color": "#1e1f29", 10 | "roomlist-text-color": "#eeeeee", 11 | "roomlist-text-secondary-color": "#eeeeee", 12 | "roomlist-highlights-color": "#00000030", 13 | "roomlist-separator-color": "#4d4d4d90", 14 | "timeline-background-color": "#282A36", 15 | "timeline-text-color": "#eeeeee", 16 | "secondary-content": "#eeeeee", 17 | "tertiary-content": "#eeeeee", 18 | "timeline-text-secondary-color": "#dddddd", 19 | "timeline-highlights-color": "#00000030", 20 | "reaction-row-button-selected-bg-color": "#b9bbbe" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /Dracula/Flat/DraculaFlat.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Dracula Flat", 3 | "is_dark": true, 4 | "colors": { 5 | "accent-color": "#bd93f9", 6 | "primary-color": "#bd93f9", 7 | "warning-color": "#bd93f9", 8 | "sidebar-color": "#1e1f29", 9 | "roomlist-background-color": "#1e1f29", 10 | "roomlist-text-color": "#eeeeee", 11 | "roomlist-text-secondary-color": "#eeeeee", 12 | "roomlist-highlights-color": "#00000030", 13 | "roomlist-separator-color": "#00000000", 14 | "timeline-background-color": "#1e1f29", 15 | "timeline-text-color": "#eeeeee", 16 | "secondary-content": "#eeeeee", 17 | "tertiary-content": "#eeeeee", 18 | "timeline-text-secondary-color": "#dddddd", 19 | "timeline-highlights-color": "#00000030", 20 | "reaction-row-button-selected-bg-color": "#b9bbbe" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /Covalence/covalence.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Covalence", 3 | "is_dark": true, 4 | "colors": { 5 | "accent-color": "#25863c", 6 | "primary-color": "#4695f7", 7 | "warning-color": "#ed4a46", 8 | "sidebar-color": "#161b22", 9 | "roomlist-background-color": "#0d1117", 10 | "roomlist-text-color": "#c9d1d9", 11 | "roomlist-text-secondary-color": "#b9b9b9", 12 | "roomlist-highlights-color": "#161b22", 13 | "roomlist-separator-color": "#21262d", 14 | "timeline-background-color": "#0d1117", 15 | "timeline-text-color": "#c9d1d9", 16 | "secondary-content": "#c9d1d9", 17 | "tertiary-content": "#c9d1d9", 18 | "timeline-text-secondary-color": "#8b949e", 19 | "timeline-highlights-color": "#252525", 20 | "reaction-row-button-selected-bg-color": "#132338", 21 | "username-colors": [ 22 | "#f85149", 23 | "#d29922", 24 | "#42b958", 25 | "#58a6fc", 26 | "#a271f3", 27 | "#f9524a", 28 | "#43ba59", 29 | "#a372f4" 30 | ] 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /Discord/Discord-Black/Discord-Black-Theme.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Discord Black", 3 | "is_dark": true, 4 | "colors": { 5 | "accent-color": "#747ff4", 6 | "accent": "#747ff4", 7 | "primary-color": "#00aff4", 8 | "warning-color": "#faa81ad9", 9 | "alert": "#faa81ad9", 10 | 11 | "sidebar-color": "#000000", 12 | "roomlist-background-color": "#191919", 13 | "roomlist-text-color": "#dcddde", 14 | "roomlist-text-secondary-color": "#8e9297", 15 | "roomlist-highlights-color": "#4f545c52", 16 | "roomlist-separator-color": "#40444b", 17 | 18 | "timeline-background-color": "#000000", 19 | "timeline-text-color": "#dcddde", 20 | "secondary-content": "#dcddde", 21 | "tertiary-content": "#dcddde", 22 | "timeline-text-secondary-color": "#b9bbbe", 23 | "timeline-highlights-color": "#04040512", 24 | 25 | "reaction-row-button-selected-bg-color": "#4752c4", 26 | "menu-selected-color": "#4752c4", 27 | "focus-bg-color": "#4752c4", 28 | "room-highlight-color": "#4752c4", 29 | "other-user-pill-bg-color": "#4752c4", 30 | "togglesw-off-color": "#72767d" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /Night Owl/Night Owl Dark/Night-Owl-Dark-Theme.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Night Owl", 3 | "is_dark": true, 4 | "colors": { 5 | "accent-color": "#122d42", 6 | "accent": "#d6deeb", 7 | "primary-color": "#122d42", 8 | "warning-color": "#b39554", 9 | "alert": "#b39554", 10 | 11 | "sidebar-color": "#011627", 12 | "roomlist-background-color": "#011627", 13 | "roomlist-text-color": "#d6deeb", 14 | "roomlist-text-secondary-color": "#5f7e97", 15 | "roomlist-highlights-color": "#1085bb5d", 16 | "roomlist-separator-color": "#5f7e97", 17 | 18 | "timeline-background-color": "#011627", 19 | "timeline-text-color": "#5f7e97", 20 | "secondary-content": "#5f7e97", 21 | "tertiary-content": "#5f7e97", 22 | "timeline-text-secondary-color": "#d6deeb", 23 | "timeline-highlights-color": "#5F7E9779", 24 | 25 | "reaction-row-button-selected-bg-color": "#7e57c25a", 26 | "menu-selected-color": "#234d708c", 27 | "focus-bg-color": "#234d708c", 28 | "room-highlight-color": "#234d708c", 29 | "other-user-pill-bg-color": "#234d708c", 30 | "togglesw-off-color": "#010b14" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /Gruvbox/Gruvbox Light/Gruvbox Light.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Gruvbox Light", 3 | "is_dark": false, 4 | "colors": { 5 | "accent-color": "#cc241d", 6 | "primary-color": "#af3a03", 7 | "warning-color": "#9d0006", 8 | "sidebar-color": "#fbf1c7", 9 | "roomlist-background-color": "#f9f5d7", 10 | "roomlist-text-color": "#7c6f64", 11 | "roomlist-text-secondary-color": "#504945", 12 | "roomlist-highlights-color": "#ebdbb2", 13 | "roomlist-separator-color": "#d5c4a1", 14 | "timeline-background-color": "#fbf1c7", 15 | "timeline-text-color": "#3c3836", 16 | "secondary-content": "#928374", 17 | "tertiary-content": "#928374", 18 | "quinary-content": "#d5c4a1", 19 | "timeline-text-secondary-color": "#7c6f64", 20 | "timeline-highlights-color": "#00000030", 21 | "reaction-row-button-selected-bg-color": "#689d6a", 22 | "menu-selected-color": "#d5c4a1", 23 | "icon-button-color": "#928374", 24 | "accent": "#689d6a", 25 | "alert": "#cc241d", 26 | "system": "#fbf1c7", 27 | "username-colors": [ 28 | "#cc241d", 29 | "#98971a", 30 | "#d79921", 31 | "#458588", 32 | "#b16286", 33 | "#689d6a", 34 | "#a89984", 35 | "#d65d0e" 36 | ], 37 | "avatar-background-colors": ["#458588", "#b16286", "#689d6a"] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /Monokai Pro/Monokai-Pro.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Monokai Pro", 3 | "is_dark": true, 4 | "colors": { 5 | "accent-color": "#fff1f3", 6 | "primary-color": "#f38d70", 7 | "warning-color": "#fd6883", 8 | "sidebar-color": "#2d2a2e", 9 | "roomlist-background-color": "#221f22", 10 | "roomlist-text-color": "#fff1ff", 11 | "roomlist-text-secondary-color": "#f9cc6c", 12 | "roomlist-highlights-color": "#3b394a", 13 | "roomlist-separator-color": "#2D2a2e", 14 | "timeline-background-color": "#2D2a2e", 15 | "timeline-text-color": "#fff1ff", 16 | "secondary-content": "#fff1f3", 17 | "tertiary-content": "#fff1f3", 18 | "quinary-content": "#221f22", 19 | "timeline-text-secondary-color": "#fff1ff", 20 | "timeline-highlights-color": "#00000030", 21 | "reaction-row-button-selected-bg-color": "#adda78", 22 | "menu-selected-color": "#f9cc6c", 23 | "icon-button-color": "#f9cc6c", 24 | "accent": "#fd6883", 25 | "alert": "#fd6883", 26 | "username-colors": [ 27 | "#cc241d", 28 | "#689d6a", 29 | "#f9cc6c", 30 | "#b16286", 31 | "#85dacc", 32 | "#adda78", 33 | "#a89984", 34 | "#f38d70" 35 | ], 36 | "avatar-background-colors": ["#458588", "#b16286", "#adda78"] 37 | } 38 | } -------------------------------------------------------------------------------- /Gruvbox/Gruvbox Dark/Gruvbox Dark.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Gruvbox Dark", 3 | "is_dark": true, 4 | "colors": { 5 | "accent-color": "#bd93f9", 6 | "primary-color": "#fe8019", 7 | "warning-color": "#fb4934", 8 | "sidebar-color": "#282828", 9 | "roomlist-background-color": "#1d2021", 10 | "roomlist-text-color": "#a89984", 11 | "roomlist-text-secondary-color": "#00ff00", 12 | "roomlist-highlights-color": "#00000030", 13 | "roomlist-separator-color": "#4d4d4d90", 14 | "timeline-background-color": "#282828", 15 | "timeline-text-color": "#ebdbb2", 16 | "secondary-content": "#928374", 17 | "tertiary-content": "#928374", 18 | "quinary-content": "#504945", 19 | "timeline-text-secondary-color": "#a89984", 20 | "timeline-highlights-color": "#00000030", 21 | "reaction-row-button-selected-bg-color": "#689d6a", 22 | "menu-selected-color": "#504945", 23 | "icon-button-color": "#928374", 24 | "accent": "#689d6a", 25 | "alert": "#cc241d", 26 | "username-colors": [ 27 | "#cc241d", 28 | "#98971a", 29 | "#d79921", 30 | "#458588", 31 | "#b16286", 32 | "#689d6a", 33 | "#a89984", 34 | "#d65d0e" 35 | ], 36 | "avatar-background-colors": ["#458588", "#b16286", "#689d6a"] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | This is free and unencumbered software released into the public domain. 2 | 3 | Anyone is free to copy, modify, publish, use, compile, sell, or 4 | distribute this software, either in source code form or as a compiled 5 | binary, for any purpose, commercial or non-commercial, and by any 6 | means. 7 | 8 | In jurisdictions that recognize copyright laws, the author or authors 9 | of this software dedicate any and all copyright interest in the 10 | software to the public domain. We make this dedication for the benefit 11 | of the public at large and to the detriment of our heirs and 12 | successors. We intend this dedication to be an overt act of 13 | relinquishment in perpetuity of all present and future rights to this 14 | software under copyright law. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 19 | IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR 20 | OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, 21 | ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 22 | OTHER DEALINGS IN THE SOFTWARE. 23 | 24 | For more information, please refer to 25 | -------------------------------------------------------------------------------- /Catppuccin/Latte/Catppuccin-Latte-Theme.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Catppuccin Latte", 3 | "is_dark": false, 4 | "colors": { 5 | "accent-color": "#7287fd", 6 | "primary-color": "#7287fd", 7 | "warning-color": "#d20f39", 8 | "alert": "#df8e1d", 9 | "sidebar-color": "#dce0e8", 10 | "roomlist-background-color": "#e6e9ef", 11 | "roomlist-text-color": "#4c4f69", 12 | "roomlist-text-secondary-color": "#4c4f69", 13 | "roomlist-highlights-color": "#bcc0cc", 14 | "roomlist-separator-color": "#8c8fa1", 15 | "timeline-background-color": "#eff1f5", 16 | "timeline-text-color": "#4c4f69", 17 | "secondary-content": "#4c4f69", 18 | "tertiary-content": "#4c4f69", 19 | "timeline-text-secondary-color": "#6c6f85", 20 | "timeline-highlights-color": "#bcc0cc", 21 | "reaction-row-button-selected-bg-color": "#bcc0cc", 22 | "menu-selected-color": "#bcc0cc", 23 | "focus-bg-color": "#acb0be", 24 | "room-highlight-color": "#04a5e5", 25 | "togglesw-off-color": "#7c7f93", 26 | "other-user-pill-bg-color": "#04a5e5", 27 | "username-colors": [ 28 | "#8839ef", 29 | "#e64553", 30 | "#fe640b", 31 | "#40a02b", 32 | "#179299", 33 | "#04a5e5", 34 | "#209fb5", 35 | "#7287fd" 36 | ], 37 | "avatar-background-colors": [ 38 | "#1e66f5", 39 | "#8839ef", 40 | "#40a02b" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /Catppuccin/Mocha/Catppuccin-Mocha-Theme.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Catppuccin Mocha", 3 | "is_dark": true, 4 | "colors": { 5 | "accent-color": "#b4befe", 6 | "primary-color": "#b4befe", 7 | "warning-color": "#f38ba8", 8 | "alert": "#e5c890", 9 | "sidebar-color": "#11111b", 10 | "roomlist-background-color": "#181825", 11 | "roomlist-text-color": "#cdd6f4", 12 | "roomlist-text-secondary-color": "#313234", 13 | "roomlist-highlights-color": "#45475a", 14 | "roomlist-separator-color": "#7f849c", 15 | "timeline-background-color": "#1e1e2e", 16 | "timeline-text-color": "#cdd6f4", 17 | "secondary-content": "#cdd6f4", 18 | "tertiary-content": "#cdd6f4", 19 | "timeline-text-secondary-color": "#a6adc8", 20 | "timeline-highlights-color": "#181825", 21 | "reaction-row-button-selected-bg-color": "#585b70", 22 | "menu-selected-color": "#45475a", 23 | "focus-bg-color": "#585b70", 24 | "room-highlight-color": "#89dceb", 25 | "togglesw-off-color": "#9399b2", 26 | "other-user-pill-bg-color": "#89dceb", 27 | "username-colors": [ 28 | "#cba6f7", 29 | "#eba0ac", 30 | "#fab387", 31 | "#a6e3a1", 32 | "#94e2d5", 33 | "#89dceb", 34 | "#74c7ec", 35 | "#b4befe" 36 | ], 37 | "avatar-background-colors": [ 38 | "#89b4fa", 39 | "#cba6f7", 40 | "#a6e3a1" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /Catppuccin/Frappe/Catppuccin-Frappe-Theme.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Catppuccin Frappe", 3 | "is_dark": true, 4 | "colors": { 5 | "accent-color": "#babbf1", 6 | "primary-color": "#babbf1", 7 | "warning-color": "#e78284", 8 | "alert": "#faa81a", 9 | "sidebar-color": "#232634", 10 | "roomlist-background-color": "#292c3c", 11 | "roomlist-text-color": "#c6d0f5", 12 | "roomlist-text-secondary-color": "#303446", 13 | "roomlist-highlights-color": "#51576d", 14 | "roomlist-separator-color": "#838ba7", 15 | "timeline-background-color": "#303446", 16 | "timeline-text-color": "#c6d0f5", 17 | "secondary-content": "#c6d0f5", 18 | "tertiary-content": "#c6d0f5", 19 | "timeline-text-secondary-color": "#a5adce", 20 | "timeline-highlights-color": "#292c3c", 21 | "reaction-row-button-selected-bg-color": "#51576d", 22 | "menu-selected-color": "#51576d", 23 | "focus-bg-color": "#626880", 24 | "room-highlight-color": "#99d1db", 25 | "togglesw-off-color": "#949cbb", 26 | "other-user-pill-bg-color": "#99d1db", 27 | "username-colors": [ 28 | "#ca9ee6", 29 | "#ea999c", 30 | "#ef9f76", 31 | "#a6d189", 32 | "#81c8be", 33 | "#99d1db", 34 | "#85c1dc", 35 | "#babbf1" 36 | ], 37 | "avatar-background-colors": [ 38 | "#8caaee", 39 | "#ca9ee6", 40 | "#a6d189" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /Catppuccin/Macchiato/Catppuccin-Macchiato-Theme.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Catppuccin Macchiato", 3 | "is_dark": true, 4 | "colors": { 5 | "accent-color": "#b7bdf8", 6 | "primary-color": "#b7bdf8", 7 | "warning-color": "#ed8796", 8 | "alert": "#eed49f", 9 | "sidebar-color": "#181926", 10 | "roomlist-background-color": "#1e2030", 11 | "roomlist-text-color": "#cad3f5", 12 | "roomlist-text-secondary-color": "#24273a", 13 | "roomlist-highlights-color": "#494d64", 14 | "roomlist-separator-color": "#8087a2", 15 | "timeline-background-color": "#24273a", 16 | "timeline-text-color": "#cad3f5", 17 | "secondary-content": "#cad3f5", 18 | "tertiary-content": "#cad3f5", 19 | "timeline-text-secondary-color": "#a5adcb", 20 | "timeline-highlights-color": "#1e2030", 21 | "reaction-row-button-selected-bg-color": "#494d64", 22 | "menu-selected-color": "#494d64", 23 | "focus-bg-color": "#5b6078", 24 | "room-highlight-color": "#91d7e3", 25 | "togglesw-off-color": "#939ab7", 26 | "other-user-pill-bg-color": "#91d7e3", 27 | "username-colors": [ 28 | "#c6a0f6", 29 | "#ee99a0", 30 | "#f5a97f", 31 | "#a6da95", 32 | "#8bd5ca", 33 | "#91d7e3", 34 | "#7dc4e4", 35 | "#b7bdf8" 36 | ], 37 | "avatar-background-colors": [ 38 | "#8aadf4", 39 | "#c6a0f6", 40 | "#a6da95" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /Nord/Nord Dark/Nord Dark.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Nord dark theme", 3 | "is_dark": true, 4 | "colors": { 5 | "accent-color": "#a3be8c", 6 | "primary-color": "#88c0d0", 7 | "warning-color": "#bf616a", 8 | "sidebar-color": "#2e3440", 9 | "roomlist-background-color": "#3b4252", 10 | "roomlist-text-color": "#ebcb8b", 11 | "roomlist-text-secondary-color": "#e5e9f0", 12 | "roomlist-highlights-color": "#2e3440", 13 | "roomlist-separator-color": "#434c5e", 14 | "timeline-background-color": "#434c5e", 15 | "timeline-text-color": "#eceff4", 16 | "secondary-content": "#eceff4", 17 | "tertiary-content": "#eceff4", 18 | "timeline-text-secondary-color": "#81a1c1", 19 | "timeline-highlights-color": "#3b4252", 20 | "reaction-row-button-selected-bg-color": "#bf616a" 21 | }, 22 | "compound": { 23 | "--cpd-color-theme-bg": "#2e3440", 24 | "--cpd-color-bg-canvas-default": "#434c5e", 25 | "--cpd-color-bg-subtle-secondary": "#2e3440", 26 | "--cpd-color-bg-subtle-primary": "#3b4252", 27 | "--cpd-color-bg-action-primary-rest": "#88c0d0", 28 | "--cpd-color-bg-critical-primary": "#bf616a", 29 | "--cpd-color-bg-accent-rest": "#a3be8c", 30 | "--cpd-color-text-primary": "#eceff4", 31 | "--cpd-color-text-secondary": "#81a1c1", 32 | "--cpd-color-text-action-accent": "#88c0d0", 33 | "--cpd-color-text-critical-primary": "#bf616a", 34 | "--cpd-color-text-success-primary": "#a3be8c", 35 | "--cpd-color-icon-primary": "#eceff4", 36 | "--cpd-color-icon-secondary": "#81a1c1", 37 | "--cpd-color-icon-tertiary": "#e5e9f0", 38 | "--cpd-color-icon-accent-tertiary": "#a3be8c", 39 | "--cpd-color-border-interactive-primary": "#434c5e", 40 | "--cpd-color-border-critical-primary": "#bf616a", 41 | "--cpd-color-border-success-subtle": "#a3be8c" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /Nord/Nord Light/Nord Light.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Nord light theme", 3 | "is_dark": false, 4 | "colors": { 5 | "accent-color": "#a3be8c", 6 | "primary-color": "#5e81ac", 7 | "warning-color": "#bf616a", 8 | "sidebar-color": "#d8dee9", 9 | "roomlist-background-color": "#e5e9f0", 10 | "roomlist-text-color": "#d08770", 11 | "roomlist-text-secondary-color": "#3b4252", 12 | "roomlist-highlights-color": "#eceff4", 13 | "roomlist-separator-color": "#eceff4", 14 | "timeline-background-color": "#eceff4", 15 | "timeline-text-color": "#2e3440", 16 | "secondary-content": "#2e3440", 17 | "tertiary-content": "#2e3440", 18 | "timeline-text-secondary-color": "#3b4252", 19 | "timeline-highlights-color": "#e5e9f0", 20 | "reaction-row-button-selected-bg-color": "#bf616a" 21 | }, 22 | "compound": { 23 | "--cpd-color-theme-bg": "#d8dee9", 24 | "--cpd-color-bg-canvas-default": "#eceff4", 25 | "--cpd-color-bg-subtle-secondary": "#d8dee9", 26 | "--cpd-color-bg-subtle-primary": "#e5e9f0", 27 | "--cpd-color-bg-action-primary-rest": "#5e81ac", 28 | "--cpd-color-bg-critical-primary": "#bf616a", 29 | "--cpd-color-bg-accent-rest": "#a3be8c", 30 | "--cpd-color-text-primary": "#2e3440", 31 | "--cpd-color-text-secondary": "#3b4252", 32 | "--cpd-color-text-action-accent": "#5e81ac", 33 | "--cpd-color-text-critical-primary": "#bf616a", 34 | "--cpd-color-text-success-primary": "#a3be8c", 35 | "--cpd-color-icon-primary": "#2e3440", 36 | "--cpd-color-icon-secondary": "#3b4252", 37 | "--cpd-color-icon-tertiary": "#3b4252", 38 | "--cpd-color-icon-accent-tertiary": "#a3be8c", 39 | "--cpd-color-border-interactive-primary": "#eceff4", 40 | "--cpd-color-border-critical-primary": "#bf616a", 41 | "--cpd-color-border-success-subtle": "#a3be8c" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /Discord/Discord-Dark/Discord-Dark-Theme.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Discord Dark", 3 | "is_dark": true, 4 | "colors": { 5 | "accent-color": "#747ff4", 6 | "accent": "#747ff4", 7 | "primary-color": "#00aff4", 8 | "warning-color": "#faa81ad9", 9 | "alert": "#faa81ad9", 10 | 11 | "sidebar-color": "#202225", 12 | "roomlist-background-color": "#2f3136", 13 | "roomlist-text-color": "#dcddde", 14 | "roomlist-text-secondary-color": "#8e9297", 15 | "roomlist-highlights-color": "#4f545c52", 16 | "roomlist-separator-color": "#40444b", 17 | 18 | "timeline-background-color": "#36393f", 19 | "timeline-text-color": "#dcddde", 20 | "secondary-content": "#dcddde", 21 | "tertiary-content": "#dcddde", 22 | "timeline-text-secondary-color": "#b9bbbe", 23 | "timeline-highlights-color": "#04040512", 24 | 25 | "reaction-row-button-selected-bg-color": "#4752c4", 26 | "menu-selected-color": "#4752c4", 27 | "focus-bg-color": "#4752c4", 28 | "room-highlight-color": "#4752c4", 29 | "other-user-pill-bg-color": "#4752c4", 30 | "togglesw-off-color": "#72767d" 31 | }, 32 | "compound": { 33 | "--cpd-color-theme-bg": "#0019ff", 34 | "--cpd-color-bg-canvas-default": "#2f3136", 35 | "--cpd-color-bg-subtle-secondary": "#2f3136", 36 | "--cpd-color-bg-subtle-primary": "#4f545c52", 37 | "--cpd-color-bg-action-primary-rest": "#dcddde", 38 | "--cpd-color-bg-action-secondary-rest": "#2f3136", 39 | "--cpd-color-bg-critical-primary": "#fd3f3c", 40 | "--cpd-color-bg-critical-subtle": "#745862", 41 | "--cpd-color-bg-critical-hovered": "#fd3f3c", 42 | "--cpd-color-bg-accent-rest": "#4cb387", 43 | "--cpd-color-text-primary": "#dcddde", 44 | "--cpd-color-text-secondary": "#b9bbbe", 45 | "--cpd-color-text-action-accent": "#b9bbbe", 46 | "--cpd-color-text-critical-primary": "#fd3f3c", 47 | "--cpd-color-text-success-primary": "#4cb387", 48 | "--cpd-color-icon-primary": "#dcddde", 49 | "--cpd-color-icon-secondary": "#dcddde", 50 | "--cpd-color-icon-tertiary": "#a7a0a7", 51 | "--cpd-color-icon-accent-tertiary": "#4cb387", 52 | "--cpd-color-border-interactive-primary": "#5d6064", 53 | "--cpd-color-border-interactive-secondary": "#5d6064", 54 | "--cpd-color-border-critical-primary": "#fd3f3c", 55 | "--cpd-color-border-success-subtle": "#4cb387" 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Element Themes 2 | 3 | A place to share themes for [Element Web/Desktop](https://github.com/vector-im/element-web). Themes are currently a beta or "Labs" feature, so you won't be able to use them with every instance of Element. [Read on](#How-to-use-themes) to learn how to use them. 4 | 5 | To get help or discuss themes, join us in [#element-themes:raim.ist](https://matrix.to/#/#element-themes:raim.ist) 6 | 7 | 8 | ## How to use themes 9 | 10 | There are several different ways to install these themes. 11 | 12 | 13 | ### Use an existing instance of Element which has Labs enabled 14 | 15 | If you are using an instances of Element which has Labs features available then you can use these themes. Go to the Labs tab in Settings and turn on "Support adding custom themes". To add a theme, find one below that you would like to try. Then copy the URL to the JSON file that makes up the theme. Go to the Apperance tab in Settings and paste the URL into the "Custom theme URL" field and click "Add theme". 16 | 17 | One example of an instance that has Labs enabled is https://develop.element.io however be aware this is a bleeding edge version of Element and you may run into bugs. Most stable instances of Element like https://app.element.io do not have Labs features enabled. 18 | 19 | 20 | ### Self host Element or use Element Desktop: 21 | 22 | If you are self hosting your own instance of Element or you are using the Desktop app, you can use these themes by editing your `config.json` file. Put the themes you want inside of the `setting_defaults` section like this: 23 | 24 | ```json 25 | { 26 | "setting_defaults": { 27 | "custom_themes": [ 28 | { 29 | "name": "Example theme", 30 | "colors": { 31 | "primary-color": "#9F8652" 32 | } 33 | }, 34 | { 35 | "name": "Another theme", 36 | "colors": { 37 | "primary-color": "#526A9E" 38 | } 39 | } 40 | ] 41 | }, 42 | "show_labs_settings": true 43 | } 44 | ``` 45 | 46 | Once you do that, you will need to enable "Support adding custom themes" (`feature_custom_themes`) in the Labs section of Settings so that these themes appear in the Appearance section of Settings. 47 | 48 | To use a custom `config.json` file with Element Desktop, see https://github.com/vector-im/element-desktop#user-specified-configjson 49 | 50 | 51 | ### If you use the matrix-docker-ansible-deploy project 52 | 53 | You can enable all of these themes just by setting `matrix_client_element_themes_enabled: true` in your `vars.yml` file. See https://github.com/spantaleev/matrix-docker-ansible-deploy/blob/master/docs/configuring-playbook-client-element.md#themes for more details. 54 | 55 | 56 | ### Use my Element Web instance 57 | 58 | Alternatively you can use [my Element Web instance](https://riot.raim.ist) which has all of these themes preinstalled so there is no configuration required. 59 | 60 | 61 | # Themes 62 | 63 | ## [ThomCat Black](https://raw.githubusercontent.com/aaronraimist/element-themes/master/ThomCat/ThomCat-Black.json) 64 | 65 | Made by `@me:thomcat.rocks` 66 | 67 | ![ThomCat Black Screenshot](ThomCat/ThomCat-Black.png) 68 | 69 | 70 | ## [Discord Dark Theme](https://raw.githubusercontent.com/aaronraimist/element-themes/master/Discord/Discord-Dark/Discord-Dark-Theme.json) 71 | 72 | Made by [`@dylhack:minds.com`](https://github.com/dylhack) and [`@Oha-you`](https://github.com/Oha-you) 73 | 74 | ![Discord Dark Theme Screenshot](Discord/Discord-Dark/Discord-Dark-Theme.png) 75 | 76 | 77 | ## [Discord Black Theme](https://raw.githubusercontent.com/aaronraimist/element-themes/master/Discord/Discord-Black/Discord-Black-Theme.json) 78 | 79 | Made by [`@dylhack:minds.com`](https://github.com/dylhack), [`@Oha-you`](https://github.com/Oha-you) and [`@zhunynho`](https://github.com/zhunynho) 80 | 81 | ![Discord Dark Theme Screenshot](Discord/Discord-Black/Discord-Black-Theme.png) 82 | 83 | 84 | ## [Luxury Dark Theme](https://raw.githubusercontent.com/aaronraimist/element-themes/master/Luxury/Luxury%20Dark/Luxury%20Dark.json) 85 | 86 | Made by [`@dylhack:minds.com`](https://github.com/dylhack) 87 | 88 | ![Luxury Dark Theme Screenshot](./Luxury/Luxury%20Dark/Luxury%20Dark.png) 89 | 90 | 91 | ## [Night Owl Dark Theme](https://raw.githubusercontent.com/aaronraimist/element-themes/master/Night%20Owl/Night%20Owl%20Dark/Night-Owl-Dark-Theme.json) 92 | 93 | Made by [`@foxy:teapot.ovh`](https://github.com/foxyseta) 94 | 95 | ![Night Owl Dark Theme Screenshot](Night%20Owl/Night%20Owl%20Dark/Night-Owl-Dark-Theme.png) 96 | 97 | 98 | ## [Nord Dark Theme](https://raw.githubusercontent.com/aaronraimist/element-themes/master/Nord/Nord%20Dark/Nord%20Dark.json) 99 | 100 | Made by [`@dylhack:minds.com`](https://github.com/dylhack) 101 | 102 | ![Nord Dark Theme Screenshot](Nord/Nord%20Dark/Nord%20Dark.png) 103 | 104 | 105 | ## [Nord Light Theme](https://raw.githubusercontent.com/aaronraimist/element-themes/master/Nord/Nord%20Light/Nord%20Light.json) 106 | 107 | Made by [`@dylhack:minds.com`](https://github.com/dylhack) 108 | 109 | ![Nord Light Theme Screenshot](Nord/Nord%20Light/Nord%20Light.png) 110 | 111 | 112 | ## [Selenized Light Theme](https://raw.githubusercontent.com/aaronraimist/element-themes/master/Selenized/Selenized%20Light/Selenized%20Light.json) 113 | 114 | Made by [`@dylhack:minds.com`](https://github.com/dylhack) 115 | 116 | ![Selenized Light Theme Screenshot](Selenized/Selenized%20Light/Selenized%20Light.png) 117 | 118 | 119 | ## [Selenized Dark Theme](https://raw.githubusercontent.com/aaronraimist/element-themes/master/Selenized/Selenized%20Dark/Selenized%20Dark.json) 120 | 121 | Made by [`@dylhack:minds.com`](https://github.com/dylhack) 122 | 123 | ![Selenized Dark Theme Screenshot](Selenized/Selenized%20Dark/Selenized%20Dark.png) 124 | 125 | 126 | ## [Selenized Black Theme](https://raw.githubusercontent.com/aaronraimist/element-themes/master/Selenized/Selenized%20Black/Selenized%20Black.json) 127 | 128 | Made by [`@dylhack:minds.com`](https://github.com/dylhack) and `@david:vovo.id.au` 129 | 130 | ![Selenized Black Theme Screenshot](Selenized/Selenized%20Black/Selenized%20Black.png) 131 | 132 | 133 | ## [Solarized Dark Theme](https://raw.githubusercontent.com/aaronraimist/element-themes/master/Solarized/Solarized%20Dark/Solarized%20Dark.json) 134 | 135 | Made by `@jasonic5:matrix.org` 136 | 137 | ![Solarized Dark Theme Screenshot](Solarized/Solarized%20Dark/Solarized%20Dark.png) 138 | 139 | 140 | ## [Solarized Light Theme](https://raw.githubusercontent.com/aaronraimist/element-themes/master/Solarized/Solarized%20Light/Solarized%20Light.json) 141 | 142 | Made by [`Marius`](https://github.com/marius) 143 | 144 | ![Solarized Light Theme Screenshot](Solarized/Solarized%20Light/Solarized%20Light.png) 145 | 146 | 147 | ## [Geeko Dark Theme](https://raw.githubusercontent.com/aaronraimist/element-themes/master/Geeko%20Dark/Geeko%20Dark.json) 148 | 149 | Made by `@swedneck:feneas.org` 150 | 151 | ![Geeko Dark Theme Screenshot](Geeko%20Dark/Geeko%20Dark.png) 152 | 153 | ## [Dracula Dark Theme](https://raw.githubusercontent.com/aaronraimist/element-themes/master/Dracula/Non-flat/Dracula.json) 154 | 155 | Made by `@jakobr_107:utwente.io` 156 | 157 | ![Dracula Dark Theme Screenshot](Dracula/Non-flat/screenshot%20%2020-06-19%2014-09-11.png) 158 | 159 | ## [Dracula Flat Dark Theme](https://raw.githubusercontent.com/aaronraimist/element-themes/master/Dracula/Flat/DraculaFlat.json) 160 | 161 | Made by `@jo:catgirl.party` 162 | 163 | ![Dracula Flat Dark Theme Screenshot](Dracula/Flat/screenshot%2020-06-16%2003-05-42.png) 164 | 165 | ## [Everforest Dark Hard Theme](https://raw.githubusercontent.com/aaronraimist/element-themes/master/Everforest%20Dark%20Hard/everforest-dark-hard.json) 166 | 167 | Made by `@maksim:wherelinux.xyz` 168 | 169 | ![Everforest Dark Hard Theme Screenshot](Everforest%20Dark%20Hard/everforest-dark-hard.png) 170 | 171 | ## [Wal Theme](https://github.com/acxz/element-wal) 172 | 173 | A theme that autogenerates colors based on your wallpaper. 174 | Made by `@acxz:matrix.org` 175 | 176 | ![Wal Theme Screenshot](https://user-images.githubusercontent.com/17132214/162074643-a5dbca97-b6c3-4cf6-90c6-b1a6d244c72e.png) 177 | 178 | ## [Gruvbox Dark Theme](https://raw.githubusercontent.com/aaronraimist/element-themes/master/Gruvbox/Gruvbox%20Dark/Gruvbox%20Dark.json) 179 | 180 | Made by [Jeroen van Meerendonk](https://github.com/jeroenwtf) 181 | 182 | ![Gruvbox Theme Screenshot](Gruvbox/Gruvbox%20Dark/Gruvbox%20Dark.png) 183 | 184 | ## [Gruvbox Light Theme](https://raw.githubusercontent.com/aaronraimist/element-themes/master/Gruvbox/Gruvbox%20Light/Gruvbox%20Light.json) 185 | 186 | Made by `@joel:thebeckmeyers.xyz` 187 | 188 | ![Gruvbox Light Theme Screenshot](Gruvbox/Gruvbox%20Light/Gruvbox%20Light.png) 189 | 190 | ## [Covalence Dark Theme](Covalence/covalence.json?raw=1) 191 | 192 | Made by `@mnesia:matrix.org` 193 | 194 | ![Covalence Dark Theme Screenshot](https://user-images.githubusercontent.com/123417798/218235744-149e276f-9bc9-4446-9b5c-52e60bcff7bd.png) 195 | 196 | ## [Monokai Pro](https://raw.githubusercontent.com/aaronraimist/element-themes/master/Monokai%20Pro/Monokai-Pro.json) 197 | 198 | Made by `@ordo:mushrooms.dev` 199 | 200 | ![Monokai Pro Theme Screenshot](Monokai%20Pro/Monokai-Pro.png) 201 | 202 | ## [Catppuccin Latte](Catppuccin/Latte/Catppuccin-Latte-Theme.json?raw=1) 203 | 204 | Made by [@ghostx31](https://github.com/ghostx31) / Ported by [@jordandrako](https://github.com/jordandrako) 205 | 206 | ![Catppuccin-Latte-Theme](https://user-images.githubusercontent.com/7110658/223290983-8e65b614-8440-4d6d-a760-89efc4295ab9.png) 207 | 208 | ## [Catppuccin Frappe](Catppuccin/Frappe/Catppuccin-Frappe-Theme.json?raw=1) 209 | 210 | Made by [@ghostx31](https://github.com/ghostx31) / Ported by [@jordandrako](https://github.com/jordandrako) 211 | 212 | ![Catppuccin-Frappe-Theme](https://user-images.githubusercontent.com/7110658/223290293-a09c1af7-63fd-42ff-895c-bcdc2f67dcec.png) 213 | 214 | ## [Catppuccin Macchiato](Catppuccin/Macchiato/Catppuccin-Macchiato-Theme.json?raw=1) 215 | 216 | Made by [@ghostx31](https://github.com/ghostx31) / Ported by [@jordandrako](https://github.com/jordandrako) 217 | 218 | ![Catppuccin-Macchiato-Theme](https://user-images.githubusercontent.com/7110658/223291065-57b1d22c-a080-4ffd-bded-24ebaef2e65f.png) 219 | 220 | ## [Catppuccin Mocha](Catppuccin/Mocha/Catppuccin-Mocha-Theme.json?raw=1) 221 | 222 | Made by [@ghostx31](https://github.com/ghostx31) / Ported by [@jordandrako](https://github.com/jordandrako) 223 | 224 | ![Catppuccin-Mocha-Theme](https://user-images.githubusercontent.com/7110658/223291136-bbb47642-8bb9-4200-b635-1705a5405018.png) 225 | 226 | # Advanced 227 | 228 | The themes in this repository use Element's relatively basic theming system which can only change a limited number of colors. Element's [theming documentation](https://github.com/vector-im/element-web/blob/master/docs/theming.md) has more information on how these work. For more advanced themes where you want to customize things like fonts, button shapes, or all of the colors you'll need to use CSS which isn't supported by Element's theming system. To use CSS based themes you could use a browser extension like Stylus. https://github.com/dannycolin/riot-compact is an example of a more advanced theme. 229 | 230 | 231 | ## Workarounds 232 | 233 | Element's theme implementation is fairly limited so custom themes might introduce some odd elements. For example, when using ThomCat Black, the selected reaction 'pill' is outlined in green since Element doesn't give us a variable to control the color that is used there. 234 | 235 | ![pill_before](images/Pill1.png) 236 | 237 | To fix this, we have to edit the custom theme CSS file directly, in this case `theme-dark-custom.css`. `cssbeautify-cli` is not necessary if your `sed`-fu is better than the author's is. 238 | 239 | ``` 240 | cssbeautify-cli -f theme-dark-custom.css > /tmp/theme-dark-custom-sed.css 241 | sed '/.mx_ReactionsRowButton.mx_ReactionsRowButton_selected/!b;n;c\ \ \ \ background-color:var(--accent-color);' /tmp/theme-dark-custom-sed.css > /tmp/theme-dark-custom.css 242 | sudo -u cp /tmp/theme-dark-custom.css //bundles// 243 | ``` 244 | The results: 245 | 246 | ![pill_after](images/Pill2.png) 247 | 248 | 249 | ## build.py 250 | There is a [build.py](./build.py) python file which takes all the themes and 251 | outputs it to a file as an array of JSON. Simply execute it in this directory. 252 | ](https://github.com/jordandrako/element-themes/edit/catppuccin/README.md) 253 | --------------------------------------------------------------------------------