missing files added, minor color tweaks

css/base.css

@@ -33,7 +33,7 @@
   --clr-background-off-white: light-dark(#fafafa, #282828); /* Common very light background */
   --clr-background-light-gray: light-dark(#f0f0f0, #0f0f0f); /* HR background, action button hover */
   --clr-background-extra-light-gray: light-dark(#eee, #222); /* Flat button faux bg, tabbar bg, chip bg */
-  --clr-background-blue-gray-50: light-dark(#edf0f2, hsl(203, 16%, 15%)); /* Contact hover, messages panel, send message panel */
+  --clr-background-blue-gray-50: light-dark(#edf0f2, #202c33); /* Contact hover, messages panel, send message panel */
   --clr-background-blue-gray-100: light-dark(#cfd8dc, #20272a); /* Contact selected, uploader bar */
   --clr-background-blue-gray-300: light-dark(#b0bec5, #354146); /* Topic/Info caption panel bg, some lettertiles */
   --clr-blue-wash-light: light-dark(#f0f0ff, #224); /* bot form button bg, badge bg (blue) */
@@ -121,7 +121,7 @@
   --clr-bubble-left-bg-flash: light-dark(#94a97c, #2c4517);
   --clr-bubble-right-bg: var(--clr-background-off-white);
   --clr-bubble-right-bg-flash: var(--clr-border-light);
-  --clr-bubble-text: light-dark(#212121, #bbb);
+  --clr-bubble-text: light-dark(#212121, #bbc);
   --clr-bubble-meta-text: var(--clr-text-primary);
   --clr-bubble-meta-deleted-bg: var(--clr-primary-wash);
   --clr-bubble-meta-date-bg: light-dark(rgba(255 255 255 / 80%), rgba(40 40 40 / 80%));
@@ -132,7 +132,7 @@
   --clr-reply-quote-border: var(--clr-light-blue-accent);
   --clr-reply-quote-text: var(--clr-text-primary);
   --clr-reply-quote-left-bg: light-dark(rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0.4));
-  --clr-reply-quote-right-bg: light-dark(rgba(128, 128, 128, 0.12), rgba(127, 127, 127, 0.12));
+  --clr-reply-quote-right-bg: light-dark(#8080801f, #c4c4c42e);
   --clr-reply-quote-preview-bg: var(--clr-background-off-white);
 
   /* Badges (small inline labels) */

img/routine.svg

@@ -0,0 +1 @@
+<svg height="24" viewBox="0 -960 960 960" width="24" fill="#5f6368" xmlns="http://www.w3.org/2000/svg"><path d="M197-706l-84-85 56-57 85 85zM791-112l-85-85 57-57 84 85zM0-440v-80h120v80zM840-440v-80h120v80zM169-113l-57-56 85-85 57 57zM763-706l-57-57 85-84 57 56zM440 0v-120h80V0zM440-840v-120h80v120zM743-380a766.09 766.09 0 01-39.5-11c-13-4-25.833-8.667-38.5-14 5.333-12 9.167-24.167 11.5-36.5 2.333-12.333 3.5-25.167 3.5-38.5 0-55.333-19.5-102.5-58.5-141.5S535.333-680 480-680c-13.333 0-26.167 1.167-38.5 3.5-12.333 2.333-24.5 6.167-36.5 11.5-5.333-12.667-9.833-25.333-13.5-38a1098.034 1098.034 0 01-10.5-39c16-6 32.333-10.5 49-13.5s33.667-4.5 51-4.5c78 0 144.167 27.167 198.5 81.5S761-558 761-480c0 17.333-1.5 34.333-4.5 51s-7.5 33-13.5 49z" fill="orange"/><path d="M453-452c34 34 72 63.167 114 87.5s87 43.167 135 56.5c-26.667 34-59.333 60.5-98 79.5S524.333-200 481-200c-78 0-144.167-27.167-198.5-81.5S201-402 201-480c0-43.333 9.5-84.333 28.5-123s45.5-71.333 79.5-98c13.333 48 32.167 93 56.5 135S419-486 453-452z" fill="#0c80d6"/></svg>

src/views/acc-appearance-view.jsx

@@ -0,0 +1,66 @@
+// Edit account parameters.
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import CheckBox from '../widgets/checkbox.jsx';
+
+export default class AccAppearanceView extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      colorSchema: props.colorSchema || 'light dark',
+    };
+
+    this.handleColorSchemaSelected = this.handleColorSchemaSelected.bind(this);
+  }
+
+  handleColorSchemaSelected(e) {
+    this.setState({colorSchema: e.currentTarget.value});
+    this.props.onChangeColorSchema(e.currentTarget.value);
+  }
+
+  render() {
+    return (
+        <div id="settings-form" className="scrollable-panel">
+          <div className="panel-form-row">
+            <label className="small">
+              <FormattedMessage id="label_color_schema" defaultMessage="Theme:"
+                description="Label for selecting color scheme (dark, light) in Settings" />
+            </label>
+          </div>
+          <div className="panel-form-row">
+            <ul className="quoted">
+              <li key="system">
+                <input type="radio" id="system" name="color-scheme-select" value="light dark"
+                  checked={this.state.colorSchema === 'light dark'}
+                  onChange={this.handleColorSchemaSelected} />&nbsp;
+                <label htmlFor="system">
+                  <FormattedMessage id="color_schema_system" defaultMessage="System default" description="Name of the color schema"/>&nbsp;
+                  <img src="../img/routine.svg" style={{verticalAlign: 'top', width: '1.6rem', height: '1.6rem'}}/>
+                </label>
+              </li>
+              <li key="light">
+                <input type="radio" id="light" name="color-scheme-select" value="light"
+                  checked={this.state.colorSchema === 'light'}
+                  onChange={this.handleColorSchemaSelected} />&nbsp;
+                <label htmlFor="light">
+                  <FormattedMessage id="color_schema_light" defaultMessage="Light" description="Name of the color schema"/>&nbsp;
+                  <i className="material-icons orange large">light_mode</i>
+                </label>
+              </li>
+              <li key="dark">
+                <input type="radio" id="dark" name="color-scheme-select" value="dark"
+                  checked={this.state.colorSchema === 'dark'}
+                  onChange={this.handleColorSchemaSelected} />&nbsp;
+                <label htmlFor="dark">
+                  <FormattedMessage id="color_schema_dark" defaultMessage="Dark" description="Name of the color schema"/>&nbsp;
+                  <i className="material-icons blue large">dark_mode</i>
+                </label>
+              </li>
+            </ul>
+          </div>
+        </div>
+    );
+  }
+};