[JIRA] (JENKINS-61480) Dark Theme

[tasi.gabi97@gmail.com (JIRA)]

Gábor Tasnádi started work on JENKINS-61480

Change By: Gábor Tasnádi Status: Open In Progress Add Comment

This message was sent by Atlassian Jira (v7.13.12#713012-sha1:6e07c38)

[tasi.gabi97@gmail.com (JIRA)]

Gábor Tasnádi created an issue

Jenkins / JENKINS-61480 Dark Theme Issue Type: New Feature Assignee: Gábor Tasnádi Attachments: chrome_Dn1yvh9t3A.png Components: core Created: 2020-03-14 16:08 Labels: user-experience Priority: Minor Reporter: Gábor Tasnádi A checkbox that provides a global Dark Theme configuration.

Add Comment

[tasi.gabi97@gmail.com (JIRA)]

Gábor Tasnádi commented on JENKINS-61480

Re: Dark Theme Hello guys! Could you give me advice in connection with the implementation?

Add Comment

[o.v.nenashev@gmail.com (JIRA)]

Oleg Nenashev updated an issue

Jenkins / JENKINS-61480 Dark Theme

Change By: Oleg Nenashev Labels: user-experience ux

Add Comment

[o.v.nenashev@gmail.com (JIRA)]

Oleg Nenashev commented on JENKINS-61480

Re: Dark Theme A simple way to do so is to create a new theme for https://plugins.jenkins.io/simple-theme-plugin/ so that others can enable it. But it would work for all users of a Jenkins instance at once. Right now Jenkins does not support user-selected themes, but technically it could be added.   CC Félix Queiruga Balado Jeremy Hartley, might be a topic for UX SIG

Add Comment

[fqueiruga@cloudbees.com (JIRA)]

Félix Queiruga Balado edited a comment on JENKINS-61480

Re: Dark Theme I think this is worth discussing at the next SIG meetings, as it can be a rather interesting project. It also would "double" our CSS and design work. [~tasigabi97] please feel free to come to the next SIG meeting, 16/03/2020 4PM UTC. More info here: [https://jenkins.io/sigs/ux/]

Add Comment

[fqueiruga@cloudbees.com (JIRA)]

Félix Queiruga Balado commented on JENKINS-61480

Re: Dark Theme I think this is worth discussing at the next SIG meetings, as it can be a rather interesting project. It also would "double" our CSS and design work. Gábor Tasnádi please feel free to come to the next SIG meeting, 16/03/2020 4PM UTC.

Add Comment

[tasigabi97 (JIRA)]

Gábor Tasnádi updated an issue

Jenkins / JENKINS-61480 Dark Theme

Change By: Gábor Tasnádi Attachment: dark.png

Add Comment

[tasigabi97 (JIRA)]

[tasigabi97 (JIRA)]

Gábor Tasnádi commented on JENKINS-61480

Re: Dark Theme So I'm working it and thought it would be nice for it to be compatible with whoever wants his plugin to be compatible with it. I made a regex that can find css colors in a file and replace it with another color like this: How I imagined it would get all css files that being rendered on a page, search it in the static resources, make a copy with substituted colors and re-link them in the header. But now I got kinda stuck on how could it get all css links on a currently rendered page, first thought was I should get the StaplerResponse and crawl it from the html response, but it doesn't have a body. Any suggestions guys? Oleg Nenashev,  Félix Queiruga Balado By the way, the current design looks like this

Add Comment

[tasigabi97 (JIRA)]

Gábor Tasnádi updated an issue

Jenkins / JENKINS-61480 Dark Theme

Change By: Gábor Tasnádi Comment:

So I'm working it and thought it would be nice for it to be compatible with whoever wants his plugin to be compatible with it. I made a regex that can find css colors in a file and replace it with another color like this:

!dark.png|width=604,height=450! How I imagined it would get all css files that being rendered on a page, search it in the static resources, make a copy with substituted colors and re-link them in the header. But now I got kinda stuck on how could it get all css links on a currently rendered page, first thought was I should get the StaplerResponse and crawl it from the html response, but it doesn't have a body. Any suggestions guys? [~oleg_nenashev],  [~fqueiruga]

By the way, the current design looks like this

!dark.png|width=981,height=484!

Add Comment

[tasigabi97 (JIRA)]

Gábor Tasnádi updated an issue

Jenkins / JENKINS-61480 Dark Theme

Change By: Gábor Tasnádi Attachment: regex.png

Add Comment

[tasigabi97 (JIRA)]

Gábor Tasnádi commented on JENKINS-61480

Re: Dark Theme So I'm working it and thought it would be nice for it to be compatible with whoever wants his plugin to be compatible with it. I made a regex that can find css colors in a file and replace it with another color like this:

How I imagined it would get all css files that being rendered on a page, search it in the static resources, make a copy with substituted colors and re-link them in the header. But now I got kinda stuck on how could it get all css links on a currently rendered page, first thought was I should get the StaplerResponse and crawl it from the html response, but it doesn't have a body. Any suggestions guys? Oleg Nenashev,  Félix Queiruga Balado

By the way, the current design looks like this

Add Comment

[tasigabi97 (JIRA)]

Gábor Tasnádi updated an issue

Jenkins / JENKINS-61480 Dark Theme

Change By: Gábor Tasnádi Attachment: dark.png

Add Comment

[tasigabi97 (JIRA)]

Gábor Tasnádi edited a comment on JENKINS-61480

Re: Dark Theme So I'm working on it and thought it would be nice for it to be compatible with whoever wants his plugin to be compatible with it. I made a regex that can find css colors in a file and replace it with another color like this:   !regex.png|width=685,height=539! How I imagined it would get all css files that being rendered on a page, search it in the static resources, make a copy with substituted colors and re-link them in the header. But now I got kinda stuck on how could it get all css links on a currently rendered page, first thought was I should get the StaplerResponse and crawl it from the html response, but it doesn't have a body. Any suggestions guys? [~oleg_nenashev],  [~fqueiruga]

By the way, the current design looks like this

!dark.png|width=981,height=484!

Add Comment

[tasigabi97 (JIRA)]

Gábor Tasnádi updated an issue

Jenkins / JENKINS-61480 Dark Theme

Change By: Gábor Tasnádi Attachment: regex.png

Add Comment

[tasigabi97 (JIRA)]

Gábor Tasnádi edited a comment on JENKINS-61480

Re: Dark Theme

So I'm working on it and thought it would be nice for it to be compatible with whoever wants his plugin to be compatible with it. I made a regex that can find css colors in a file and replace it with another color like this:

!regex.png|width= 685 488 ,height= 539 413,thumbnail !

How I imagined it would get all css files that being rendered on a page, search it in the static resources, make a copy with substituted colors and re-link them in the header. But now I got kinda stuck on how could it get all css links on a currently rendered page, first thought was I should get the StaplerResponse and crawl it from the html response, but it doesn't have a body. Any suggestions guys? [~oleg_nenashev],  [~fqueiruga] By the way, the current design looks like this !dark.png|width=981,height=484!

Add Comment

[tasigabi97 (JIRA)]

Gábor Tasnádi updated an issue

Jenkins / JENKINS-61480 Dark Theme Change By: Gábor Tasnádi Attachment: regex.png

Add Comment

[tasigabi97 (JIRA)]

Gábor Tasnádi edited a comment on JENKINS-61480

Re: Dark Theme

So I'm working on it and thought it would be nice for it to be compatible with whoever wants his plugin to be compatible with it. I made a regex that can find css colors in a file and replace it with another color like this:

!regex.png| width=488,height=413, thumbnail!

How I imagined it would get all css files that being rendered on a page, search it in the static resources, make a copy with substituted colors and re-link them in the header. But now I got kinda stuck on how could it get all css links on a currently rendered page, first thought was I should get the StaplerResponse and crawl it from the html response, but it doesn't have a body. Any suggestions guys? [~oleg_nenashev],  [~fqueiruga] By the way, the current design looks like this !dark.png|width=981,height=484!

Add Comment

[o.v.nenashev@gmail.com (JIRA)]

Oleg Nenashev commented on JENKINS-61480

Re: Dark Theme It might be easier to just poll all CSS files from GitHub: https://github.com/search?q=org%3Ajenkinsci+extension%3Acss&type=Code

Add Comment

[fqueiruga@cloudbees.com (JIRA)]

Félix Queiruga Balado commented on JENKINS-61480

Re: Dark Theme TBH I don't think scanning and substituting existing files will scale well, and it may not be ressilient to changes. I agree with Oleg Nenashev that a better alternative would be to use a custom theme using the simple-theme-plugin. You can take inspiration on the material or neo2 themes. In the medium/long term I would like to have the UI themable using CSS variables, but we lack infrastructure at the moment for that.

Add Comment

[o.v.nenashev@gmail.com (JIRA)]

Oleg Nenashev commented on JENKINS-61480

Re: Dark Theme https://github.com/jenkinsci/uithemes-plugin can partially help also, but it is not as flexible as Simple Theme plugin (CC Mark Waite)

Add Comment

[tasigabi97 (JIRA)]

Gábor Tasnádi commented on JENKINS-61480

Re: Dark Theme I mean, regex is really fast and it only needs to be done when a new plugin is added or existing plugin was updated. The problem isn't necessarily how I get the css files, because I can just search them in the static resources folders. It is how can I tell which css is currently being rendered on a page. Because if I render all the substituted css at all the time I can cause conflicts or overrides. I dont really understand how the page rendering works in Stapler. From what I've seen it takes the bound classes then serializes them to xml, but where the actual html rendering is? I made the plugin based on how simple-theme works. The main class extends PageDecorator so it gets called on every page, my header.jelly contains all the css. It also has a location-based automatic turn-on when the sun goes down. Of course the manual way for plugin style support would be to add additional stylesheets on the plugin config page. But it would be nice if I could just get the css currently being rendered on a page and search for the /*D@RK: #ffffff */ tag or something similar, so if people want to add dark mode support on their plugin they can do that. But anyway, thank you for replying, I'll check out ui-theme.

Add Comment

[fqueiruga@cloudbees.com (JIRA)]

Félix Queiruga Balado commented on JENKINS-61480

Re: Dark Theme AFAIK ui-theme is unmaintained, only simple-theme is active. I'm not really sure what your goal with modifying all css files is, is it at runtime? still looks really intense and brittle (changes on the main css would always break the dark mode)

Add Comment

[tasigabi97 (JIRA)]

Gábor Tasnádi commented on JENKINS-61480

Re: Dark Theme That's exactly what I want to avoid. My goal with it would be to be more persistent. You would just need to add a css comment on the line that would look different on the dark theme, so in 1 css file you could define the support for the dark-mode plugin. For example you have in the main css: body {  background-color: #ffffff; /* D@RK: #000000 */ } If in a new Jenkins version you decided to rename the css tag to like '#body', but you still have that comment, the program can still substitute it when dark mode is on.This way you only have 1 css file but it has a dark mode and a normal mode. It wouldn't be at runtime though. Only at startup, plugin upgrading, installing or removing. It would cache the substituted css in a folder, and render it if a view needs it.

Add Comment

[fqueiruga@cloudbees.com (JIRA)]

Félix Queiruga Balado commented on JENKINS-61480

Re: Dark Theme I don't know how well would that play on normal UI development. I think it would be a bit of an annoyance to need to always remember the dark mode. My ideal solution would be to use CSS variables that a dark theme could override. Example: // Jenkins core stylesheet :root { --body-background: #fefefe; } body { background-color: var(--body-background); } // On the dark theme stylesheet :root { --body-background: #000; } I think it's the only way to make it so that the changes will scale. It still has coupling problems, as the CSS variables would then become an API that plugin stylesheets could use. It also needs some deep refactors and changes to happen, but no lesser than having to add a dark comment to all styleshets.

Add Comment

[fqueiruga@cloudbees.com (JIRA)]

Félix Queiruga Balado commented on JENKINS-61480

Re: Dark Theme Gábor Tasnádi The neo2 theme for simple-theme-plugin has a dark mode option: https://github.com/TobiX/jenkins-neo2-theme/tree/master/less Maybe you'll find it interesting.

Add Comment

[alex@thinkmassive.org (JIRA)]

Alex Miller commented on JENKINS-61480

Re: Dark Theme Félix Queiruga Balado it looks like the neo2 maintainer removed dark mode the day after you posted that, saying it looked bad and was unmaintainable: https://github.com/TobiX/jenkins-neo2-theme/commit/fc74c10f27d66e25c65f436a3ac7ad68dc652caa I look forward to the day when jenkins can match the rest of my dashboards in dark mode, will be glad to test prerelease work when it's available.

Add Comment