Merge pull request #1206 from prymitive/update-docs

fix(docs): update docs to mention dark mode

README.md

@@ -5,11 +5,6 @@ Alert dashboard for
 
 ---
 
-Release notes can be found on
-[GitHub Release Page](https://github.com/prymitive/karma/releases).
-
----
-
 Alertmanager `0.16.x` is **NOT** supported by karma due to changes
 in the API, see [this issue](https://github.com/prymitive/karma/issues/115)
 for details.
@@ -19,8 +14,13 @@ alertmanager `>=0.17.0` is supported.
 
 ---
 
+## Feature overview
+
 Alertmanager UI is useful for browsing alerts and managing silences, but it's
 lacking as a dashboard tool - karma aims to fill this gap.
+
+### Alert aggregation and deduplication
+
 Starting with the `0.7.0` release it can aggregate alerts from multiple
 Alertmanager instances, running either in HA mode or separate. Unique alerts are
 displayed by filtering duplicates. Each alert is tagged with the names of all
@@ -30,6 +30,8 @@ is configured with multiple Alertmanager instances.
 
 ![Screenshot](/docs/img/screenshot.png)
 
+### Alert visualization
+
 Alerts are displayed grouped preserving
 [group_by](https://prometheus.io/docs/alerting/configuration/#route)
 configuration option in Alertmanager. If a group contains multiple alerts only
@@ -48,27 +50,49 @@ screen space, the silence will also be moved to the footer.
 
 ![Deduplicated silence](/docs/img/footerSilence.png)
 
+### Silence management
+
 Silence modal allows to create new silences and manage all silences already
 present in Alertmanager.
 
 ![Silence browser](/docs/img/silenceBrowser.png)
 
+### Alert overview
+
 Clicking on the alert counter in the top left corner will open the overview
 modal, which allows to quickly get an overview of the top label values for
 all current alerts.
 
 ![Overview](/docs/img/overview.png)
 
+### Alert acknowledgement
+
 Starting with `v0.50` karma can create short lived silences to acknowledge
 alerts with a single button click. To create silences that will resolve itself
 only after all alerts are resolved you can use
 [kthxbye](https://github.com/prymitive/kthxbye).
 See [configuration docs](/docs/CONFIGURATION.md#alert-acknowledgement) for
-details. Example:
+details.
 
-![Acknowledgement demo](/docs/img/ack.gif)
+### Dark mode
 
-[Online demo](https://karma-demo.herokuapp.com/)
+Starting with `v0.51` release karma includes both light and dark themes.
+By default it will follow browser preference using
+[prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)
+media queries.
+
+![Dark mode](/docs/img/dark.png)
+
+## Demo
+
+[Online demo](https://karma-demo.herokuapp.com/) is running latest master branch
+or PR branch version. It might include features that are experimental and not
+yet ready to be included.
+
+## Release notes
+
+Release notes can be found on
+[GitHub Release Page](https://github.com/prymitive/karma/releases).
 
 To get notifications about new karma releases go to
 [GitHub karma page](https://github.com/prymitive/karma), click `Watch` and

ui/src/Components/MainModal/Configuration/__snapshots__/ThemeConfiguration.test.js.snap

@@ -7,7 +7,7 @@ exports[`<ThemeConfiguration /> matches snapshot with default values 1`] = `
     <div class=\\"react-select__control css-r5n82u-control\\">
       <div class=\\"react-select__value-container react-select__value-container--has-value css-ct477o\\">
         <div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
-          Automatic theme, follow browser preferences
+          Automatic theme, follow browser preference
         </div>
         <div class=\\"css-b8ldur-Input\\">
           <div class=\\"react-select__input\\"

ui/src/Components/MainModal/Configuration/__snapshots__/index.test.js.snap

@@ -155,7 +155,7 @@ exports[`<Configuration /> matches snapshot 1`] = `
             <div class=\\"react-select__control css-r5n82u-control\\">
               <div class=\\"react-select__value-container react-select__value-container--has-value css-ct477o\\">
                 <div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
-                  Automatic theme, follow browser preferences
+                  Automatic theme, follow browser preference
                 </div>
                 <div class=\\"css-b8ldur-Input\\">
                   <div class=\\"react-select__input\\"

ui/src/Components/MainModal/__snapshots__/MainModalContent.test.js.snap

@@ -174,7 +174,7 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
                 <div class=\\"react-select__control css-r5n82u-control\\">
                   <div class=\\"react-select__value-container react-select__value-container--has-value css-ct477o\\">
                     <div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
-                      Automatic theme, follow browser preferences
+                      Automatic theme, follow browser preference
                     </div>
                     <div class=\\"css-b8ldur-Input\\">
                       <div class=\\"react-select__input\\"

ui/src/Stores/Settings.js

@@ -113,7 +113,7 @@ class FilterBarConfig {
 class ThemeConfig {
   options = Object.freeze({
     auto: {
-      label: "Automatic theme, follow browser preferences",
+      label: "Automatic theme, follow browser preference",
       value: "auto"
     },
     light: { label: "Light theme", value: "light" },