1 commit

Author	SHA1	Message	Date
Łukasz Mierzwa	850dbda5c3	Add a dark theme (#8604) ... * Upgrade bootstrap and reactstrap to the latest version Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com> * Add SASS support node-sass is needed for cra to handle SCSS files instead of pure CSS. Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com> * Add a dark theme This adds a dark theme and UI controls to switch between themes. Dark theme will require some CSS changes that will follow in future commits. Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com> * Add a margin to Prometheus brand There is no space between 'Prometheus' brand text and the toggle button when using mobile device. This adds a margin to the button that's only rendered on mobile Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com> * Add a dark theme for CollapsibleAlertPanel Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com> * Add a dark theme for RulesContent Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com> * Add a dark theme for Config Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com> * Use bootstrap classes for margins We can override margins via bootstrap css classes instead of loading custom css module. Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com> * Add a dark theme for QueryStatsView Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com> * Add a dark theme for MetricsExplorer Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com> * Add a dark theme for 'Clear time' button This button had some custom css based on light bootstrap theme so it needs to be adjusted for dark theme. This change re-uses bootstrap styles used for input components instead of copying color values Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com> * Add dark theme for Graph panel input This makes the whole input group look consistent in dark mode as the old styles were made to blend it with the default bootstrap theme. Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com> * Add a dark theme for CME expression input This change splits current CME theme into 3: 1 - base theme used for both light and dark mode 2 - light mode specific theme that overrides base 3 - dark mode specific theme that overrides base To make it all work we also need to move theme to dynamic config, so when theme value in ThemeContext changes CME input will apply a new theme. Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com> * Add a dark theme for /graph page tabs Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com> * Fix metrics explorer modal scroll bootstrap-dark breaks scrolling on the metrics modal, so we need an extra rule to fix that. Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com> * Move App.css rules to themes/_shared.scss This completes splitting styles into light and dark theme. It also fixes some small issues with themes as now all styles from App.css are applied correctly. Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com> * Move html{} styles to a dedicated file html block is root document so styles for it cannot be nested under theme classes. Move it out and add a bit of documentation to explain what which file does. Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com> * Fix reboot styles overriding other FontAwesome classes Both bootstrap themes we use import reboot classes (https://getbootstrap.com/docs/4.6/content/reboot/) which has the side effect of overriding other classes. We need reboot to be applied as defaults for the browser, so it needs to be moved out of theme class selectors. But because reboot requires scss variables we need to feed it something, for that we use the default light theme, so it gets imported there and browser will use style of the default theme to reset default (unthemed) styles. Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com> * Move codicon font to app.scss This needs to be applied globally, not per theme. Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>	2021-04-15 18:14:07 +02:00