Skip to content

Commit 30c38b8

Browse files
nolimits4webnolimits4web
committed
feat(core): move colors definitions to client side with new colors parameter and app.setColorTheme method
1 parent a9de963 commit 30c38b8

File tree

9 files changed

+109
-111
lines changed

9 files changed

+109
-111
lines changed

‎kitchen-sink/core/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<meta name="theme-color" content="#fff">
1111
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data:">
1212
<title>Framework7</title>
13-
<link rel="stylesheet" href="../../packages/core/framework7-bundle.min.css">
13+
<link rel="stylesheet" href="../../build/core/framework7-bundle.css">
1414
<link rel="stylesheet" href="css/app.css">
1515
<link rel="apple-touch-icon" href="img/f7-icon-square.png">
1616
<link rel="icon" href="img/f7-icon.png">
@@ -104,7 +104,7 @@
104104
</div>
105105
<div class="view view-main view-init safe-areas" data-master-detail-breakpoint="768" data-url="/"></div>
106106
</div>
107-
<script src="../../packages/core/framework7-bundle.min.js"></script>
107+
<script src="../../build/core/framework7-bundle.js"></script>
108108
<script src="js/routes.js"></script>
109109
<script src="js/store.js"></script>
110110
<script src="js/app.js"></script>

‎scripts/build-config.js

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -132,24 +132,6 @@ const config = {
132132
darkTheme: true,
133133
lightTheme: true,
134134
themes: ['ios', 'md'],
135-
themeColor: '#007aff',
136-
colors: {
137-
red: '#ff3b30',
138-
green: '#4cd964',
139-
blue: '#2196f3',
140-
pink: '#ff2d55',
141-
yellow: '#ffcc00',
142-
orange: '#ff9500',
143-
purple: '#9c27b0',
144-
deeppurple: '#673ab7',
145-
lightblue: '#5ac8fa',
146-
teal: '#009688',
147-
lime: '#cddc39',
148-
deeporange: '#ff6b22',
149-
gray: '#8e8e93',
150-
white: '#ffffff',
151-
black: '#000000',
152-
},
153135
};
154136

155137
module.exports = config;

‎scripts/build-core-lazy-components.js

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -56,9 +56,6 @@ const outro = `
5656
async function buildLazyComponentsLess(components, rtl, cb) {
5757
const config = getConfig();
5858
const output = `${getOutput()}/core`;
59-
const colors = `{\n${Object.keys(config.colors)
60-
.map((colorName) => ` ${colorName}: ${config.colors[colorName]};`)
61-
.join('\n')}\n}`;
6259
const includeIosTheme = config.themes.indexOf('ios') >= 0;
6360
const includeMdTheme = config.themes.indexOf('md') >= 0;
6461
const includeDarkTheme = config.darkTheme;
@@ -81,8 +78,6 @@ async function buildLazyComponentsLess(components, rtl, cb) {
8178
.replace('$includeMdTheme', includeMdTheme)
8279
.replace('$includeDarkTheme', includeDarkTheme)
8380
.replace('$includeLightTheme', includeLightTheme)
84-
.replace('$themeColor', config.themeColor)
85-
.replace('$colors', colors)
8681
.replace('$rtl', rtl);
8782

8883
let cbs = 0;

‎scripts/build-core-styles.js

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,6 @@ const fs = require('./utils/fs-extra.js');
1616
// Copy LESS
1717
function copyLess(config, components, cb) {
1818
const output = `${getOutput()}/core`;
19-
const colors = `{\n${Object.keys(config.colors)
20-
.map((colorName) => ` ${colorName}: ${config.colors[colorName]};`)
21-
.join('\n')}\n}`;
2219
const includeIosTheme = config.themes.indexOf('ios') >= 0;
2320
const includeMdTheme = config.themes.indexOf('md') >= 0;
2421
const includeDarkTheme = config.darkTheme;
@@ -33,8 +30,6 @@ function copyLess(config, components, cb) {
3330
.replace('$includeMdTheme', includeMdTheme)
3431
.replace('$includeDarkTheme', includeDarkTheme)
3532
.replace('$includeLightTheme', includeLightTheme)
36-
.replace('$colors', colors)
37-
.replace('$themeColor', config.themeColor)
3833
.replace('$rtl', rtl);
3934

4035
fs.writeFileSync(`${output}/framework7.less`, lessContent);
@@ -65,9 +60,6 @@ function copyLess(config, components, cb) {
6560
// Build CSS Bundle
6661
async function buildBundle(config, components, themes, rtl, cb) {
6762
const env = process.env.NODE_ENV || 'development';
68-
const colors = `{\n${Object.keys(config.colors)
69-
.map((colorName) => ` ${colorName}: ${config.colors[colorName]};`)
70-
.join('\n')}\n}`;
7163
const includeIosTheme = themes.indexOf('ios') >= 0;
7264
const includeMdTheme = themes.indexOf('md') >= 0;
7365
const includeDarkTheme = config.darkTheme;
@@ -87,8 +79,6 @@ async function buildBundle(config, components, themes, rtl, cb) {
8779
.replace('$includeMdTheme', includeMdTheme)
8880
.replace('$includeDarkTheme', includeDarkTheme)
8981
.replace('$includeLightTheme', includeLightTheme)
90-
.replace('$colors', colors)
91-
.replace('$themeColor', config.themeColor)
9282
.replace('$rtl', rtl);
9383

9484
let cssContent;
@@ -126,9 +116,6 @@ async function buildCore(themes, rtl, cb) {
126116
const includeDarkTheme = config.darkTheme;
127117
const includeLightTheme = config.lightTheme;
128118
const output = `${getOutput()}/core`;
129-
const colors = `{\n${Object.keys(config.colors)
130-
.map((colorName) => ` ${colorName}: ${config.colors[colorName]};`)
131-
.join('\n')}\n}`;
132119

133120
let lessContent = fs.readFileSync(path.resolve(__dirname, '../src/core/framework7.less'));
134121
lessContent = lessContent
@@ -137,8 +124,6 @@ async function buildCore(themes, rtl, cb) {
137124
.replace('$includeMdTheme', includeMdTheme)
138125
.replace('$includeDarkTheme', includeDarkTheme)
139126
.replace('$includeLightTheme', includeLightTheme)
140-
.replace('$colors', colors)
141-
.replace('$themeColor', config.themeColor)
142127
.replace('$rtl', rtl);
143128

144129
let cssContent;

‎src/core/components/app/app-class.d.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,8 @@ export interface Framework7Parameters {
6868
iosTranslucentBars?: boolean;
6969
/** Enable translucent effect (blur background) on modals (Dialog, Popover, Actions) for iOS theme (on iOS devices) (by default enabled) */
7070
iosTranslucentModals?: boolean;
71+
/** Object with app colors where `primary` color (key) defines main app color theme */
72+
colors?: object;
7173
/** userAgent string. Required for browser/device detection when rendered on server-side */
7274
userAgent?: string;
7375
/** Required for current route detection when rendered on server-side */
@@ -162,6 +164,10 @@ interface Framework7 extends Framework7Class<Framework7Events> {
162164
$: Dom7;
163165
/** App parameters */
164166
params: Framework7Parameters;
167+
/** Object with colors you have passed in params.colors */
168+
colors: any;
169+
/** Sets primary color theme */
170+
setColorTheme(hexColor: string): void;
165171
/** Enables auto dark mode detection */
166172
enableAutoDarkMode(): void;
167173
/** Disables auto dark mode detection */

‎src/core/components/app/app-class.js

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,24 @@ class Framework7 extends Framework7Class {
5454
componentUrl: undefined,
5555
userAgent: null,
5656
url: null,
57+
colors: {
58+
primary: '#007aff',
59+
red: '#ff3b30',
60+
green: '#4cd964',
61+
blue: '#2196f3',
62+
pink: '#ff2d55',
63+
yellow: '#ffcc00',
64+
orange: '#ff9500',
65+
purple: '#9c27b0',
66+
deeppurple: '#673ab7',
67+
lightblue: '#5ac8fa',
68+
teal: '#009688',
69+
lime: '#cddc39',
70+
deeporange: '#ff6b22',
71+
gray: '#8e8e93',
72+
white: '#ffffff',
73+
black: '#000000',
74+
},
5775
};
5876

5977
// Extend defaults with modules params
@@ -86,6 +104,7 @@ class Framework7 extends Framework7Class {
86104
// Initially passed parameters
87105
passedParams,
88106
online: w.navigator.onLine,
107+
colors: app.params.colors,
89108
});
90109

91110
if (params.store) app.params.store = params.store;
@@ -116,6 +135,87 @@ class Framework7 extends Framework7Class {
116135
return app;
117136
}
118137

138+
setColorTheme(color) {
139+
if (!color) return;
140+
const app = this;
141+
app.colors.primary = color;
142+
app.setColors();
143+
}
144+
145+
setColors() {
146+
const app = this;
147+
const document = getDocument();
148+
if (!app.colorsStyleEl) {
149+
app.colorsStyleEl = document.createElement('style');
150+
document.head.appendChild(app.colorsStyleEl);
151+
}
152+
const colorVars = app.utils.colorThemeCSSProperties(app.colors.primary);
153+
let primary = '';
154+
// primary
155+
Object.keys(colorVars).forEach((key) => {
156+
primary += `${key}: ${colorVars[key]};`;
157+
});
158+
primary = `:root {${primary};--swiper-theme-color:var(--f7-theme-color);}`;
159+
160+
const restVars = {};
161+
Object.keys(app.colors).forEach((colorName) => {
162+
const colorValue = app.colors[colorName];
163+
restVars[colorName] = app.utils.colorThemeCSSProperties(colorValue);
164+
});
165+
166+
// rest
167+
let rest = '';
168+
169+
rest += ':root{';
170+
Object.keys(app.colors).forEach((colorName) => {
171+
rest += [
172+
`--f7-color-${colorName}: ${restVars[colorName]['--f7-theme-color']};`,
173+
`--f7-color-${colorName}-rgb: ${restVars[colorName]['--f7-theme-color-rgb']};`,
174+
`--f7-color-${colorName}-shade: ${restVars[colorName]['--f7-theme-color-shade']};`,
175+
`--f7-color-${colorName}-tint: ${restVars[colorName]['--f7-theme-color-tint']};`,
176+
].join('');
177+
});
178+
rest += '}';
179+
180+
Object.keys(app.colors).forEach((colorName) => {
181+
rest += [
182+
`.color-theme-${colorName} {`,
183+
`--f7-theme-color : ${restVars[colorName]['--f7-theme-color']};`,
184+
`--f7-theme-color-rgb : ${restVars[colorName]['--f7-theme-color-rgb']};`,
185+
`--f7-theme-color-shade : ${restVars[colorName]['--f7-theme-color-shade']};`,
186+
`--f7-theme-color-tint : ${restVars[colorName]['--f7-theme-color-tint']};`,
187+
`--swiper-theme-color: ${restVars[colorName]['--f7-theme-color']};`,
188+
`}`,
189+
].join('');
190+
});
191+
192+
Object.keys(app.colors).forEach((colorName) => {
193+
rest += [
194+
`.color-${colorName} {`,
195+
`--f7-theme-color : ${restVars[colorName]['--f7-theme-color']};`,
196+
`--f7-theme-color-rgb : ${restVars[colorName]['--f7-theme-color-rgb']};`,
197+
`--f7-theme-color-shade : ${restVars[colorName]['--f7-theme-color-shade']};`,
198+
`--f7-theme-color-tint : ${restVars[colorName]['--f7-theme-color-tint']};`,
199+
`--swiper-theme-color: ${restVars[colorName]['--f7-theme-color']};`,
200+
`}`,
201+
`.text-color-${colorName} {`,
202+
`--f7-theme-color-text-color: ${app.colors[colorName]};`,
203+
`}`,
204+
`.bg-color-${colorName} {`,
205+
`--f7-theme-color-bg-color: ${app.colors[colorName]};`,
206+
`}`,
207+
`.border-color-${colorName} {`,
208+
`--f7-theme-color-border-color: ${app.colors[colorName]};`,
209+
`}`,
210+
`.ripple-color-${colorName}, .ripple-${colorName} {`,
211+
`--f7-theme-color-ripple-color: rgba(${restVars[colorName]['--f7-theme-color-rgb']}, 0.3);`,
212+
`}`,
213+
].join('');
214+
});
215+
216+
app.colorsStyleEl.textContent = `${primary}${rest}`;
217+
}
218+
119219
mount(rootEl) {
120220
const app = this;
121221
const window = getWindow();
@@ -212,6 +312,7 @@ class Framework7 extends Framework7Class {
212312
init(rootEl) {
213313
const app = this;
214314

315+
app.setColors();
215316
app.mount(rootEl);
216317

217318
const init = () => {

‎src/core/components/app/app-vars.less

Lines changed: 0 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,6 @@
22
Core
33
==================== */
44
:root {
5-
@themeColorRed: red(@themeColor);
6-
@themeColorGreen: green(@themeColor);
7-
@themeColorBlue: blue(@themeColor);
8-
--f7-theme-color: @themeColor;
9-
--f7-theme-color-rgb: @themeColorRed, @themeColorGreen, @themeColorBlue;
10-
--f7-theme-color-shade: darken(@themeColor, 8%);
11-
--f7-theme-color-tint: lighten(@themeColor, 8%);
12-
135
--f7-safe-area-left: 0px;
146
--f7-safe-area-right: 0px;
157
--f7-safe-area-top: 0px;
@@ -145,48 +137,3 @@
145137
.ripple-color-primary {
146138
--f7-theme-color-ripple-color: rgba(var(--f7-theme-color-rgb), 0.3);
147139
}
148-
:root {
149-
each(@colors, {
150-
@themeColorRed: red(@value);
151-
@themeColorGreen: green(@value);
152-
@themeColorBlue: blue(@value);
153-
--f7-color-@{key}: @value;
154-
--f7-color-@{key}-rgb: @themeColorRed, @themeColorGreen, @themeColorBlue;
155-
--f7-color-@{key}-shade: darken(@value, 8%);
156-
--f7-color-@{key}-tint: lighten(@value, 8%);
157-
});
158-
}
159-
each(@colors, {
160-
.color-theme-@{key} {
161-
@themeColorRed: red(@value);
162-
@themeColorGreen: green(@value);
163-
@themeColorBlue: blue(@value);
164-
--f7-theme-color: @value;
165-
--f7-theme-color-rgb: @themeColorRed, @themeColorGreen, @themeColorBlue;
166-
--f7-theme-color-shade: darken(@value, 8%);
167-
--f7-theme-color-tint: lighten(@value, 8%);
168-
}
169-
});
170-
each(@colors, {
171-
@themeColorRed: red(@value);
172-
@themeColorGreen: green(@value);
173-
@themeColorBlue: blue(@value);
174-
.color-@{key} {
175-
--f7-theme-color: @value;
176-
--f7-theme-color-rgb: @themeColorRed, @themeColorGreen, @themeColorBlue;
177-
--f7-theme-color-shade: darken(@value, 8%);
178-
--f7-theme-color-tint: lighten(@value, 8%);
179-
}
180-
.text-color-@{key} {
181-
--f7-theme-color-text-color: @value;
182-
}
183-
.bg-color-@{key} {
184-
--f7-theme-color-bg-color: @value;
185-
}
186-
.border-color-@{key} {
187-
--f7-theme-color-border-color: @value;
188-
}
189-
.ripple-color-@{key}, .ripple-@{key} {
190-
--f7-theme-color-ripple-color: rgba(@themeColorRed, @themeColorGreen, @themeColorBlue, 0.3);
191-
}
192-
});

‎src/core/components/swiper/swiper.less

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,5 @@
11
/* === Swiper === */
22
@import (inline) 'swiper/css/bundle';
33

4-
:root {
5-
--swiper-theme-color: var(--f7-theme-color);
6-
}
7-
each(@colors, {
8-
.color-theme-@{key} {
9-
--swiper-theme-color: @value;
10-
}
11-
});
12-
each(@colors, {
13-
.color-@{key} {
14-
--swiper-theme-color: @value;
15-
}
16-
});
17-
184
.if-ios-theme({@import './swiper-ios.less' ;});
195
.if-md-theme({@import './swiper-md.less' ;});

‎src/core/framework7.less

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,6 @@
77
@includeDarkTheme: $includeDarkTheme;
88
@includeLightTheme: $includeLightTheme;
99

10-
@themeColor: $themeColor;
11-
12-
@colors: $colors;
13-
1410
@rtl: $rtl;
1511

1612
// Core

0 commit comments

Comments
 (0)