Theming Glances UI - Githubissues

nicolargo commented 2 years ago

Discussed in https://github.com/nicolargo/glances/discussions/2046

^{Originally posted by **Madelena** May 6, 2022} I'm wondering if there is a way to attach CSS files to the Glances Web UI, in order to theme it? It would be nice to be able to customize the fonts and colors somehow.

nicolargo commented 1 year ago

@fr4nc0is Any idea / remark on this request ?

fr4nc0is commented 1 year ago

Hi @nicolargo ,

Customization could be implemented w/ :

[ ] Moving the codebase to bootstrap@5.3.0 w/ support for CSS variables and color modes
[ ] Use the configuration file to override color modes and CSS variables by generating custom CSS in the <head /> section of index.html.tpl file

example

// glances.conf
[theme:light]
--bs-body-bg=#fff
--bs-body-color=#212529

[theme:dark]
--bs-body-bg=#212529
--bs-body-color=#adb5bd

[theme:my-custom]
color-scheme=dark
--bs-blue=#0d6efd
--bs-indigo=#6610f2
--bs-purple=#6f42c1
--bs-pink=#d63384
--bs-red=#dc3545
--bs-orange=#fd7e14
--bs-yellow=#ffc107
--bs-green=#198754
--bs-teal=#20c997
--bs-cyan=#0dcaf0
--bs-black=#000
--bs-white=#fff
--bs-gray=#6c757d

will output

<!DOCTYPE html>
<html>
<head>
<style>
[data-bs-theme="light"] {
  --bs-body-bg: #fff;
  --bs-body-color: #212529;
}
[data-bs-theme="dark"] {
  --bs-body-bg: #212529;
  --bs-body-color: #adb5bd;
}
[data-bs-theme="my-custom"] {
  color-scheme: dark;
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
}
</style>
....
</head>

What do you think about this implementation?

nicolargo commented 1 year ago

Looks great. But as we want to split the WebUI from the Glances "Core") (see https://github.com/nicolargo/glances/issues/2114), i think it will be better to have the [theme:*] section in a dedicated configuration file (glances-webui.conf) for example...

What do you think ?

nicolargo commented 7 months ago

@fr4nc0is : Like that ? https://makina-corpus.com/front-end/utiliser-bootstrap-avec-sass

github-actions[bot] commented 1 month ago

This issue is stale because it has been open for 3 months with no activity.

nicolargo commented 6 days ago

Should also be configurable for the Curses UI.

nicolargo / glances

Theming Glances UI #2048

Discussed in https://github.com/nicolargo/glances/discussions/2046