User Color Schemes

Create your own color schemes to personalize Noctalia with your favorite colors.

Creating a Color Scheme

1. Create the Scheme Directory

Create a folder for your scheme in ~/.config/noctalia/colorschemes/:

~/.config/noctalia/colorschemes/MyScheme/

2. Create the Scheme File

Create a JSON file with the same name as your folder:

~/.config/noctalia/colorschemes/MyScheme/MyScheme.json

{
    "dark": {
        "mPrimary": "#a6e22e",
        "mOnPrimary": "#272822",
        "mSecondary": "#66d9ef",
        "mOnSecondary": "#272822",
        "mTertiary": "#f92672",
        "mOnTertiary": "#272822",
        "mError": "#f92672",
        "mOnError": "#272822",
        "mSurface": "#272822",
        "mOnSurface": "#f8f8f2",
        "mHover": "#3a3a32",
        "mOnHover": "#f8f8f2",
        "mSurfaceVariant": "#3e3d32",
        "mOnSurfaceVariant": "#a6e22e",
        "mOutline": "#75715e",
        "mShadow": "#272822",
        "terminal": {
            "background": "#272822",
            "foreground": "#f8f8f2",
            "cursor": "#f8f8f2",
            "cursorText": "#272822",
            "selectionBackground": "#f8f8f2",
            "selectionForeground": "#272822",
            "normal": {
                "black": "#272822",
                "red": "#f92672",
                "green": "#a6e22e",
                "yellow": "#f4bf75",
                "blue": "#66d9ef",
                "magenta": "#ae81ff",
                "cyan": "#a1efe4",
                "white": "#f8f8f2"
            },
            "bright": {
                "black": "#75715e",
                "red": "#f92672",
                "green": "#a6e22e",
                "yellow": "#f4bf75",
                "blue": "#66d9ef",
                "magenta": "#ae81ff",
                "cyan": "#a1efe4",
                "white": "#f9f8f5"
            }
        }
    },
    "light": {
        "mPrimary": "#a6e22e",
        "mOnPrimary": "#f8f8f2",
        "mSecondary": "#66d9ef",
        "mOnSecondary": "#f8f8f2",
        "mTertiary": "#f92672",
        "mOnTertiary": "#f8f8f2",
        "mError": "#f92672",
        "mOnError": "#f8f8f2",
        "mSurface": "#f8f8f2",
        "mOnSurface": "#272822",
        "mHover": "#e6e1dc",
        "mOnHover": "#272822",
        "mSurfaceVariant": "#e6e1dc",
        "mOnSurfaceVariant": "#272822",
        "mOutline": "#a6e22e",
        "mShadow": "#d8d8d8",
        "terminal": {
            "background": "#f8f8f2",
            "foreground": "#272822",
            "cursor": "#272822",
            "cursorText": "#f8f8f2",
            "selectionBackground": "#272822",
            "selectionForeground": "#f8f8f2",
            "normal": {
                "black": "#f8f8f2",
                "red": "#f92672",
                "green": "#a6e22e",
                "yellow": "#f4bf75",
                "blue": "#66d9ef",
                "magenta": "#ae81ff",
                "cyan": "#a1efe4",
                "white": "#272822"
            },
            "bright": {
                "black": "#d8d8d2",
                "red": "#f92672",
                "green": "#a6e22e",
                "yellow": "#f4bf75",
                "blue": "#66d9ef",
                "magenta": "#ae81ff",
                "cyan": "#a1efe4",
                "white": "#1e1e19"
            }
        }
    }
}

3. Select Your Scheme

Restart Noctalia to load the new scheme
Open Settings → Color Scheme
Select your scheme from the list

Color Properties

Each scheme needs both dark and light variants with these colors:

Property	Description
`mPrimary`	Primary accent (buttons, links, highlights)
`mOnPrimary`	Text/icons on primary surfaces
`mSecondary`	Secondary accent color
`mOnSecondary`	Text/icons on secondary surfaces
`mTertiary`	Tertiary accent color
`mOnTertiary`	Text/icons on tertiary surfaces
`mError`	Error/warning color
`mOnError`	Text/icons on error surfaces
`mSurface`	Main background color
`mOnSurface`	Primary text color
`mHover`	Hover state background
`mOnHover`	Text on hover surfaces
`mSurfaceVariant`	Secondary background (cards, panels)
`mOnSurfaceVariant`	Text on surface variants
`mOutline`	Borders and dividers
`mShadow`	Shadow color

Terminal Colors

The terminal section defines colors for terminal emulators (Foot, Ghostty, Kitty, Alacritty, Wezterm):

Property	Description
`background`	Terminal background
`foreground`	Default text color
`cursor`	Cursor color
`cursorText`	Text under cursor
`selectionBackground`	Selection highlight
`selectionForeground`	Selected text color
`normal`	Normal colors
`bright`	Bright variants of the normal colors

Tips

Color Selection

Start simple - Pick 2-3 core colors that define your scheme
Ensure contrast - Text should be readable on all backgrounds
Test both modes - Dark and light variants should both work well

Adapting Existing Themes

Popular themes like Dracula, Nord, or Catppuccin can be adapted:

Find the theme’s color palette
Map colors to Noctalia’s properties
Adjust for good contrast

Tools

Coolors.co - Color palette generator
WebAIM Contrast Checker - Verify accessibility

Want to share your color scheme with the community?

Submit it to the noctalia-colorschemes repository!

Troubleshooting

Issue	Solution
Scheme not appearing	Check folder/file naming match exactly
Colors not applying	Validate JSON syntax
Poor contrast	Use contrast checker tools
Terminal colors wrong	Verify all `normal` and `bright` colors are defined