Skip to content
  • Łukasz Mierzwa's avatar
    Add a dark theme (#8604) · 850dbda5
    Łukasz Mierzwa authored
    
    
    * Upgrade bootstrap and reactstrap to the latest version
    
    Signed-off-by: default avatarŁ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: default avatarŁ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: default avatarŁ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: default avatarŁukasz Mierzwa <l.mierzwa@gmail.com>
    
    * Add a dark theme for CollapsibleAlertPanel
    
    Signed-off-by: default avatarŁukasz Mierzwa <l.mierzwa@gmail.com>
    
    * Add a dark theme for RulesContent
    
    Signed-off-by: default avatarŁukasz Mierzwa <l.mierzwa@gmail.com>
    
    * Add a dark theme for Config
    
    Signed-off-by: default avatarŁ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: default avatarŁukasz Mierzwa <l.mierzwa@gmail.com>
    
    * Add a dark theme for QueryStatsView
    
    Signed-off-by: default avatarŁukasz Mierzwa <l.mierzwa@gmail.com>
    
    * Add a dark theme for MetricsExplorer
    
    Signed-off-by: default avatarŁ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: default avatarŁ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: default avatarŁ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: default avatarŁukasz Mierzwa <l.mierzwa@gmail.com>
    
    * Add a dark theme for /graph page tabs
    
    Signed-off-by: default avatarŁ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: default avatarŁ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: default avatarŁ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: default avatarŁ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: default avatarŁukasz Mierzwa <l.mierzwa@gmail.com>
    
    * Move codicon font to app.scss
    
    This needs to be applied globally, not per theme.
    
    Signed-off-by: default avatarŁukasz Mierzwa <l.mierzwa@gmail.com>
    850dbda5