-
Notifications
You must be signed in to change notification settings - Fork 9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add a dark theme #8604
Add a dark theme #8604
Commits on Apr 15, 2021
-
Upgrade bootstrap and reactstrap to the latest version
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
Configuration menu - View commit details
-
Copy full SHA for 884245e - Browse repository at this point
Copy the full SHA 884245eView commit details -
node-sass is needed for cra to handle SCSS files instead of pure CSS. Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
Configuration menu - View commit details
-
Copy full SHA for 93bbffe - Browse repository at this point
Copy the full SHA 93bbffeView commit details -
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>
Configuration menu - View commit details
-
Copy full SHA for 99cd0d2 - Browse repository at this point
Copy the full SHA 99cd0d2View commit details -
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>
Configuration menu - View commit details
-
Copy full SHA for b76cb5e - Browse repository at this point
Copy the full SHA b76cb5eView commit details -
Add a dark theme for CollapsibleAlertPanel
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
Configuration menu - View commit details
-
Copy full SHA for 2b6ec2c - Browse repository at this point
Copy the full SHA 2b6ec2cView commit details -
Add a dark theme for RulesContent
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
Configuration menu - View commit details
-
Copy full SHA for 1835a70 - Browse repository at this point
Copy the full SHA 1835a70View commit details -
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
Configuration menu - View commit details
-
Copy full SHA for a2cb466 - Browse repository at this point
Copy the full SHA a2cb466View commit details -
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>
Configuration menu - View commit details
-
Copy full SHA for a33c6d4 - Browse repository at this point
Copy the full SHA a33c6d4View commit details -
Add a dark theme for QueryStatsView
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
Configuration menu - View commit details
-
Copy full SHA for 4e22eb1 - Browse repository at this point
Copy the full SHA 4e22eb1View commit details -
Add a dark theme for MetricsExplorer
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
Configuration menu - View commit details
-
Copy full SHA for 12cff37 - Browse repository at this point
Copy the full SHA 12cff37View commit details -
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>
Configuration menu - View commit details
-
Copy full SHA for 7f3e6e7 - Browse repository at this point
Copy the full SHA 7f3e6e7View commit details -
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>
Configuration menu - View commit details
-
Copy full SHA for 54535bb - Browse repository at this point
Copy the full SHA 54535bbView commit details -
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>
Configuration menu - View commit details
-
Copy full SHA for 110d818 - Browse repository at this point
Copy the full SHA 110d818View commit details -
Add a dark theme for /graph page tabs
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
Configuration menu - View commit details
-
Copy full SHA for 54b8cf0 - Browse repository at this point
Copy the full SHA 54b8cf0View commit details -
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>
Configuration menu - View commit details
-
Copy full SHA for 19b5330 - Browse repository at this point
Copy the full SHA 19b5330View commit details -
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>
Configuration menu - View commit details
-
Copy full SHA for 2dc3893 - Browse repository at this point
Copy the full SHA 2dc3893View commit details -
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>
Configuration menu - View commit details
-
Copy full SHA for be3cf97 - Browse repository at this point
Copy the full SHA be3cf97View commit details -
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>
Configuration menu - View commit details
-
Copy full SHA for 5324821 - Browse repository at this point
Copy the full SHA 5324821View commit details -
This needs to be applied globally, not per theme. Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
Configuration menu - View commit details
-
Copy full SHA for 11f290e - Browse repository at this point
Copy the full SHA 11f290eView commit details