Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Customisable theming #1079

Closed
3 tasks done
tecosaur opened this issue Aug 6, 2022 · 2 comments · Fixed by #2003
Closed
3 tasks done

Customisable theming #1079

tecosaur opened this issue Aug 6, 2022 · 2 comments · Fixed by #2003
Labels
feature add new functionality ui frontend related

Comments

@tecosaur
Copy link

tecosaur commented Aug 6, 2022

Clear and concise description of the problem

It could be rather nice to be able to switch out the theme used by Woodpecker.

Suggested solution

It would be great if one could provide an alternative set of colours/styles (via a theme.css file) to be used.

Alternative

No response

Additional context

This issue has been spun off from #468 (comment)

Validations
@qwerty287 qwerty287 added feature add new functionality enhancement improve existing features server ui frontend related and removed pending:feature feature add new functionality labels Aug 6, 2022
@silverwind
Copy link
Contributor

All colors should be extracted to CSS variables on the :root node. This will make designing custom color themes a breeze.

@6543 6543 added feature add new functionality and removed enhancement improve existing features labels Sep 3, 2022
@6543 6543 mentioned this issue Sep 3, 2022
Closed
3 tasks
@6543 6543 removed the server label Oct 21, 2022
@mvdkleijn
Copy link
Contributor

I would also suggest that an index of sorts be made available for themes, similar to plugins.

@6543 6543 mentioned this issue Jul 15, 2023
Merged
xoxys added a commit that referenced this issue Aug 2, 2023
@xoxys @6543
Use consistent woodpecker color scheme (#2003)
dca01e6 
Fixes: #1079

What do you think about using a consistent `woodpecker` color scheme?
Right now, the `lime` color scheme from windicss is used that does not
really fit the primary color used for the documentation website. I have
used the primary color `#4CAF50` from the docs and created a color
palette with https://palettte.app/:

<details>
  <summary>JSON source</summary>

```Json
[
  {
    "paletteName": "New Palette",
    "swatches": [
      {
        "name": "New Swatch",
        "color": "166E30"
      },
      {
        "name": "New Swatch",
        "color": "248438"
      },
      {
        "name": "New Swatch",
        "color": "369943"
      },
      {
        "name": "New Swatch",
        "color": "4CAF50"
      },
      {
        "name": "New Swatch",
        "color": "68C464"
      },
      {
        "name": "New Swatch",
        "color": "8AD97F"
      }
    ]
  }
]
```

</details>


![image](https://github.com/woodpecker-ci/woodpecker/assets/3391958/a254f1e0-ce17-43a9-9e8b-72252296fd6f)

I have added this color scheme to the windicss config and replaced the
use of `lime` in the UI. While `woodpecker-300` would be the primary
color that is used for the docs, I currently use `woodpecke-400` as
primary color for the UI to fix some contrast issues.


![image](https://github.com/woodpecker-ci/woodpecker/assets/3391958/7bf751e1-f2a6-481c-bee7-a27d27cf8adb)

![image](https://github.com/woodpecker-ci/woodpecker/assets/3391958/e5673dc7-81c1-4fd4-bef9-14494bc5aa27)

What do you think? If you would like to stay with the current colors,
that's fine for me, I can just use the custom CSS feature in this case.

---------

Co-authored-by: 6543 <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
feature add new functionality ui frontend related
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Use consistent woodpecker color scheme xoxys/woodpecker
5 participants
@silverwind @mvdkleijn @tecosaur @6543 @qwerty287