Skip to content

Add CSS theme engine#444

Merged
veselink1 merged 2 commits intomainfrom
theme-engine
Mar 7, 2026
Merged

Add CSS theme engine#444
veselink1 merged 2 commits intomainfrom
theme-engine

Conversation

@veselink1
Copy link
Copy Markdown
Collaborator

@veselink1 veselink1 commented Feb 22, 2026

Status

  • Allows theming using .css syntax without using a WebView
  • Applies CSS to an abstract DOM
  • Translates the computed CSS styles to WPF resources
  • Reads theme data from themes/custom.css
  • Hot-reloads when .css file changes
  • Supports key FancyWM overlay elements
  • Supports key CSS properties (color, border-width etc)
  • Allows users to change theme name (other than custom.css) - will be done separately

@veselink1 veselink1 marked this pull request as draft February 22, 2026 16:30
@veselink1
Copy link
Copy Markdown
Collaborator Author

image

@veselink1 veselink1 self-assigned this Feb 28, 2026
@veselink1
Copy link
Copy Markdown
Collaborator Author

/* FancyWM\themes\custom.css */
panel-bar-handle,
panel-bar-button {
    color: white;
    background-color: rgba(0, 0, 0, 0.3);
}

panel-bar {
    border-color: white;
    border-width: 1px;
    border-radius: 4px;
    background-image: linear-gradient(30deg,
            rgba(44, 83, 133, 0.3) 30%,
            rgba(32, 48, 152, 0.6) 30%,
            rgba(44, 83, 133, 0.3) 60%,
            rgba(32, 48, 152, 0.6) 60%);
}
Screenshot 2026-03-07 084842
/* FancyWM\themes\custom.css */
panel-bar-handle,
panel-bar-button {
    color: white;
    background-color: rgba(255, 255, 255, 0.3);
}

panel-bar-handle {
    background-color: transparent;
}

panel-bar {
    border-color: white;
    border-width: 1px;
    border-radius: 12px;
    filter: drop-shadow(0px 0px 8px white);
    background-image: linear-gradient(30deg,
            red 0%, blue 20%, green 40%, green 60%, orange 60%);
}
Screenshot 2026-03-07 084916

Styles a virtual DOM using CSS and applies supported styles to the
overlay.

1. Reads themes\custom.css using AngleSharp.CSS
2. Styles a virtual DOM template
3. Extracts styles using custom markup extension
4. Converts supported properties to WPF equivalents
5. Renders the result to the screeen
@veselink1 veselink1 changed the title WIP theme engine Add CSS theme engine Mar 7, 2026
@veselink1 veselink1 marked this pull request as ready for review March 7, 2026 09:32
@veselink1 veselink1 merged commit e03b96a into main Mar 7, 2026
3 of 6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant