Rainbow! 🌈

src/components/menu-bar/menu-bar.css

@@ -28,6 +28,7 @@
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size: $menu-bar-standard-font-size;
     font-weight: bold;
+    background: $menu-bar-alternate;
     background-color: $menu-bar-background;
     color: $menu-bar-foreground;
 }

src/components/menu-bar/tw-theme-accent.jsx

@@ -7,13 +7,20 @@ import {connect} from 'react-redux';
 import check from './check.svg';
 import dropdownCaret from './dropdown-caret.svg';
 import {MenuItem, Submenu} from '../menu/menu.jsx';
-import {ACCENT_BLUE, ACCENT_MAP, ACCENT_PURPLE, ACCENT_RED, Theme} from '../../lib/themes/index.js';
+import {ACCENT_BLUE, ACCENT_MAP, ACCENT_PURPLE, ACCENT_RAINBOW, ACCENT_RED, Theme} from '../../lib/themes/index.js';
 import {openAccentMenu, accentMenuOpen, closeSettingsMenu} from '../../reducers/menus.js';
 import {setTheme} from '../../reducers/theme.js';
 import {persistTheme} from '../../lib/themes/themePersistance.js';
 import styles from './settings-menu.css';
 
+import prideIcon from './tw-accent-pride.svg';
+
 const options = defineMessages({
+    [ACCENT_RED]: {
+        defaultMessage: 'Pride',
+        description: 'Name of the pride color scheme.',
+        id: 'tw.accent.pride'
+    },
     [ACCENT_RED]: {
         defaultMessage: 'Red',
         description: 'Name of the red color scheme, used by TurboWarp by default.',
@@ -31,14 +38,29 @@ const options = defineMessages({
     }
 });
 
-const ColorIcon = props => (
-    <div
-        className={styles.accentIconOuter}
-        style={{
-            backgroundColor: ACCENT_MAP[props.id].guiColors['looks-secondary']
-        }}
-    />
-);
+const icons = {
+    [ACCENT_RAINBOW]: prideIcon,
+};
+
+const ColorIcon = props => {
+    if (icons[props.id]) {
+        return (
+            <img
+                src={icons[props.id]}
+                draggable={false}
+                width={24}
+            />
+        )
+    }
+    return (
+        <div
+            className={styles.accentIconOuter}
+            style={{
+                backgroundColor: ACCENT_MAP[props.id].guiColors['looks-secondary']
+            }}
+        />
+    )
+};
 
 ColorIcon.propTypes = {
     id: PropTypes.string

src/css/colors.css

@@ -54,6 +54,7 @@ $extensions-light: var(--extensions-light);
 $drop-highlight: var(--drop-highlight);
 
 $menu-bar-background: var(--menu-bar-background);
+$menu-bar-alternate: var(--menu-bar-alternate);
 $menu-bar-foreground: var(--menu-bar-foreground);
 
 $assets-background: var(--assets-background);

src/css/default-colors.css

@@ -52,6 +52,7 @@ $extensions-light-default: var(--extensions-light-default);
 $drop-highlight-default: var(--drop-highlight-default);
 
 $menu-bar-background-default: var(--menu-bar-background-default);
+$menu-bar-alternate-default: var(--menu-bar-background-default);
 $menu-bar-foreground-default: var(--menu-bar-foreground-default);
 
 $assets-background-default: var(--assets-background-default);

src/lib/themes/accent/blue.js

@@ -2,7 +2,9 @@ const guiColors = {
     'looks-secondary': 'hsla(215, 100%, 65%, 1)',
     'looks-transparent': 'hsla(215, 100%, 65%, 0.35)',
     'looks-light-transparent': 'hsla(215, 100%, 65%, 0.15)',
-    'looks-secondary-dark': 'hsla(215, 60%, 50%, 1)'
+    'looks-secondary-dark': 'hsla(215, 60%, 50%, 1)',
+
+    'menu-bar-alternate': 'hsla(0, 0, 0, 0)'
 };
 
 const blockColors = {};

src/lib/themes/accent/purple.js

@@ -6,7 +6,9 @@ const guiColors = {
     'looks-secondary': 'hsla(260, 60%, 60%, 1)',
     'looks-transparent': 'hsla(260, 60%, 60%, 0.35)',
     'looks-light-transparent': 'hsla(260, 60%, 60%, 0.15)',
-    'looks-secondary-dark': 'hsla(260, 42%, 51%, 1)'
+    'looks-secondary-dark': 'hsla(260, 42%, 51%, 1)',
+
+    'menu-bar-alternate': 'hsla(0, 0, 0, 0)'
 };
 
 const blockColors = {};

src/lib/themes/accent/rainbow.js

@@ -0,0 +1,37 @@
+const guiColors = {
+    'motion-primary': '#66757f',
+    'motion-primary-transparent': '#667580e6',
+    'motion-tertiary': '#4a5a65',
+
+    'looks-secondary': '#66757f',
+    'looks-transparent': '#66758059',
+    'looks-light-transparent': '#66758026',
+    'looks-secondary-dark': 'hsla(204, 8%, 35%, 1)',
+
+    'extensions-primary': 'hsla(205, 22%, 65%, 1)',
+    'extensions-tertiary': 'hsla(203, 16%, 22%, 1)',
+    'extensions-transparent': 'hsla(204, 19%, 67%, 0.35)',
+    'extensions-light': 'hsla(203, 16%, 84%, 1)',
+
+    'drop-highlight': '#8ea3b2',
+
+    'menu-bar-alternate': `linear-gradient(
+        90deg,
+        rgba(255, 76, 76, 0.7) 0%,
+        rgba(255, 140, 26, 0.7) 20%,
+        rgba(255, 191, 0, 0.7) 40%,
+        rgba(89, 192, 89, 0.7) 60%,
+        rgba(76, 151, 255, 0.7) 80%,
+        rgba(153, 102, 255, 0.7) 100%
+    )`
+};
+
+const blockColors = {
+    checkboxActiveBackground: '#66757f',
+    checkboxActiveBorder: '#4a5a65'
+};
+
+export {
+    guiColors,
+    blockColors
+};

src/lib/themes/accent/red.js

@@ -13,7 +13,9 @@ const guiColors = {
     'extensions-transparent': 'hsla(10, 85%, 65%, 0.35)',
     'extensions-light': 'hsla(10, 57%, 85%, 1)',
 
-    'drop-highlight': '#ff8c8c'
+    'drop-highlight': '#ff8c8c',
+
+    'menu-bar-alternate': 'hsla(0, 0, 0, 0)'
 };
 
 const blockColors = {

src/lib/themes/guiHelpers.js

@@ -67,6 +67,9 @@ const applyGuiColors = theme => {
     }
     metaThemeColor.setAttribute('content', evaluateCSS(guiColors['menu-bar-background']));
 
+    // the "alternate" colour allows for persistent gradient colours even in dark mode
+    metaThemeColor.setAttribute('content', evaluateCSS(guiColors['menu-bar-alternate']));
+
     // a horrible hack for icons...
     window.Recolor = {
         primary: guiColors['looks-secondary']

src/lib/themes/index.js

@@ -3,6 +3,7 @@ import defaultsDeep from 'lodash.defaultsdeep';
 import * as accentPurple from './accent/purple';
 import * as accentBlue from './accent/blue';
 import * as accentRed from './accent/red';
+import * as accentRainbow from './accent/rainbow';
 
 import * as guiLight from './gui/light';
 import * as guiDark from './gui/dark';
@@ -14,10 +15,12 @@ import * as blocksDark from './blocks/dark';
 const ACCENT_PURPLE = 'purple';
 const ACCENT_BLUE = 'blue';
 const ACCENT_RED = 'red';
+const ACCENT_RAINBOW = 'rainbow';
 const ACCENT_MAP = {
     [ACCENT_PURPLE]: accentPurple,
     [ACCENT_BLUE]: accentBlue,
-    [ACCENT_RED]: accentRed
+    [ACCENT_RED]: accentRed,
+    [ACCENT_RAINBOW]: accentRainbow
 };
 const ACCENT_DEFAULT = ACCENT_RED;
 
@@ -143,6 +146,7 @@ export {
     Theme,
     defaultBlockColors,
 
+    ACCENT_RAINBOW,
     ACCENT_RED,
     ACCENT_PURPLE,
     ACCENT_BLUE,