glances Theming Glances UI (both TUI and WebUI)

This issue aims at enhance Glances to provide a theming feature for both TUI and WebUI

TUI

Related issue: https://github.com/nicolargo/glances/issues/2882

WEBUI - 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.

May 07 '22 06:05 nicolargo

@fr4nc0is Any idea / remark on this request ?

May 18 '23 17:05 nicolargo

Hi @nicolargo ,

Customization could be implemented w/ :

[ ] Moving the codebase to [email protected] 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?

Jun 08 '23 12:06 fr4nc0is

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 ?

Jun 10 '23 09:06 nicolargo

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

Dec 21 '23 09:12 nicolargo