Skip to content

Commit f522e5b

Browse files
llorenspujolllorenspujol
committed
style(demo-app): added custom black theme and also added some useful theming css variables
1 parent 06051f6 commit f522e5b

File tree

8 files changed

+145
-26
lines changed

8 files changed

+145
-26
lines changed

‎projects/demo-app/src/app/app.component.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
:host {
22
width: 100%;
33
display: block;
4-
background: #121212;
4+
background-color: var(--ktd-background-color-step-50);
55
box-sizing: border-box;
66

77
.app-header {
88
display: flex;
99
align-items: center;
1010
justify-content: space-between;
1111
padding: 12px 24px;
12-
background-color: #222222;
13-
border-bottom: 1px solid #424242;
12+
background-color: var(--ktd-background-color-step-100);
13+
border-bottom: 1px solid var(--ktd-border-color);
1414

1515
h1 {
1616
margin-bottom: 0;

‎projects/demo-app/src/app/custom-handles/custom-handles.component.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
:host {
22
display: block;
33
width: 100%;
4-
padding: 24px;
4+
padding: 48px 32px;
55
box-sizing: border-box;
66

77
.grid-container {
88
padding: 4px;
99
box-sizing: border-box;
10-
border: 1px solid gray;
1110
border-radius: 2px;
12-
background: #313131;
11+
border: 1px solid var(--ktd-border-color);
12+
background-color: var(--ktd-background-color);
1313
}
1414

1515
.grid-item-content {

‎projects/demo-app/src/app/playground/playground.component.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
:host {
22
display: block;
33
width: 100%;
4-
padding: 24px;
4+
padding: 48px 32px;
55
box-sizing: border-box;
66

77
.playground-container {
@@ -22,9 +22,9 @@
2222
.grid-container {
2323
padding: 4px;
2424
box-sizing: border-box;
25-
border: 1px solid gray;
25+
border: 1px solid var(--ktd-border-color);
26+
background-color: var(--ktd-background-color);
2627
border-radius: 2px;
27-
background: #313131;
2828
}
2929

3030
ktd-grid-item {

‎projects/demo-app/src/app/real-life-example/real-life-example.component.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
:host {
22
display: block;
33
width: 100%;
4-
padding: 24px;
4+
padding: 48px 32px;
55
box-sizing: border-box;
66

77
.grid-container {
88
padding: 4px;
99
box-sizing: border-box;
10-
border: 1px solid gray;
1110
border-radius: 2px;
12-
background: #313131;
11+
border: 1px solid var(--ktd-border-color);
12+
background-color: var(--ktd-background-color);
1313
}
1414

1515
ktd-grid {

‎projects/demo-app/src/app/scroll-test/scroll-test.component.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
:host {
22
display: block;
33
width: 100%;
4-
padding: 24px;
4+
padding: 48px 32px;
55
box-sizing: border-box;
66

77
.grids-container {
@@ -21,9 +21,9 @@
2121
.grid-container-1, .grid-container-2 {
2222
padding: 4px;
2323
box-sizing: border-box;
24-
border: 1px solid gray;
2524
border-radius: 2px;
26-
background: #313131;
25+
border: 1px solid var(--ktd-border-color);
26+
background-color: var(--ktd-background-color);
2727
height: 100%;
2828
overflow-y: auto;
2929
overflow-x: hidden;

‎projects/demo-app/src/styles/_variables.scss‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
@use '~@angular/material' as mat;
2+
@use 'sass:map';
3+
4+
@mixin cssVariables($theme) {
5+
$is-dark-theme: map.get($theme, is-dark);
6+
$primary: map.get($theme, primary);
7+
$accent: map.get($theme, accent);
8+
$warn: map.get($theme, warn);
9+
$background: map.get($theme, background);
10+
$foreground: map.get($theme, foreground);
11+
12+
13+
--ktd-color-primary: #{mat.get-color-from-palette($primary, default)};
14+
--ktd-color-primary-rgb: #{red(mat.get-color-from-palette($primary, default)), green(mat.get-color-from-palette($primary, default)), blue(mat.get-color-from-palette($primary, default))};
15+
--ktd-color-primary-contrast: #{mat.get-color-from-palette($primary, default-contrast)};
16+
17+
--ktd-color-accent: #{mat.get-color-from-palette($accent, default)};
18+
--ktd-color-accent-rgb: #{red(mat.get-color-from-palette($accent, default)), green(mat.get-color-from-palette($accent, default)), blue(mat.get-color-from-palette($accent, default))};
19+
--ktd-color-accent-contrast: #{mat.get-color-from-palette($accent, default-contrast)};
20+
21+
// Background & foreground (as background contrast)
22+
--ktd-background-color: #121212;
23+
--ktd-background-color-rgb: 18,18,18;
24+
--ktd-background-color-contrast: #ffffff;
25+
--ktd-background-color-contrast-rgb: 255,255,255;
26+
27+
--ktd-background-color-step-25: #1a1a1a;
28+
--ktd-background-color-step-50: #1e1e1e;
29+
--ktd-background-color-step-100: #2a2a2a;
30+
--ktd-background-color-step-150: #363636;
31+
--ktd-background-color-step-200: #414141;
32+
--ktd-background-color-step-250: #4d4d4d;
33+
--ktd-background-color-step-300: #595959;
34+
--ktd-background-color-step-350: #656565;
35+
--ktd-background-color-step-400: #717171;
36+
--ktd-background-color-step-450: #7d7d7d;
37+
--ktd-background-color-step-500: #898989;
38+
39+
// steps in rgb
40+
--ktd-background-color-step-150-rgb: 54,54,54;
41+
42+
--ktd-item-background: #1A1B1E;
43+
--ktd-border-color: #4a4a4a;
44+
--ktd-border-color-light: #4a4e51;
45+
46+
// Background light
47+
--ktd-background-color-light: #222428;
48+
--ktd-background-color-light-rgb: 34,36,40;
49+
--ktd-background-color-light-contrast: #ffffff;
50+
--ktd-background-color-light-contrast-rgb: 255,255,255;
51+
--ktd-background-color-light-darker: #1e2023;
52+
--ktd-background-color-light-lighter: #383a3e;
53+
54+
// Custom SVG variable colors
55+
--ktd-svg-color: #ffffff;
56+
--ktd-svg-color-complementary: #9b9b9b;
57+
--ktd-svg-color-rgb: 255,255,255;
58+
--ktd-svg-color-complementary-rgb: 155,155,155;
59+
60+
// text colors
61+
--ktd-text-color: map.get($foreground, text);
62+
--ktd-text-accent-color: rgba(var(--ktd-color-accent-rgb), 0.94);
63+
}

‎projects/demo-app/src/styles/styles.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
html, body {
44
height: 100%;
5-
background: #121212;
5+
background-color: var(--ktd-background-color-step-50);
66
}
77

88
body {

‎projects/demo-app/src/styles/theme.scss‎

Lines changed: 66 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,79 @@
11
@use '~@angular/material' as mat;
2+
@use 'variables' as variables;
3+
@use 'sass:map';
24

35
$app-primary: mat.define-palette(mat.$orange-palette, 500);
46
$app-accent: mat.define-palette(mat.$orange-palette, 300);
57
$app-warn: mat.define-palette(mat.$red-palette, 400);
6-
$app-theme: mat.define-dark-theme((
7-
color: (
8-
primary: $app-primary,
9-
accent: $app-accent,
10-
warn: $app-warn,
11-
)
12-
));
8+
9+
$dark-primary-text: rgba(black, 0.87);
10+
$dark-secondary-text: rgba(black, 0.54);
11+
$dark-disabled-text: rgba(black, 0.38);
12+
$dark-dividers: rgba(black, 0.12);
13+
$dark-focused: rgba(black, 0.12);
14+
$light-primary-text: white;
15+
$light-secondary-text: rgba(white, 0.7);
16+
$light-disabled-text: rgba(white, 0.5);
17+
$light-dividers: rgba(white, 0.12);
18+
$light-focused: rgba(white, 0.12);
19+
20+
21+
// Foreground palette for dark themes.
22+
$dark-theme-foreground-palette: (
23+
base: white,
24+
divider: $light-dividers,
25+
dividers: $light-dividers,
26+
disabled: $light-disabled-text,
27+
disabled-button: rgba(white, 0.3),
28+
disabled-text: $light-disabled-text,
29+
elevation: black,
30+
hint-text: $light-disabled-text,
31+
secondary-text: $light-secondary-text,
32+
icon: white,
33+
icons: white,
34+
text: rgba(white, 0.87),
35+
slider-min: white,
36+
slider-off: rgba(white, 0.3),
37+
slider-off-active: rgba(white, 0.3),
38+
);
39+
40+
// Background palette for dark themes.
41+
$dark-theme-background-palette: (
42+
status-bar: black,
43+
app-bar: map.get(mat.$grey-palette, 900),
44+
background: #2a2a2a,
45+
hover: rgba(white, 0.04),
46+
card: map.get(mat.$grey-palette, 800),
47+
dialog: map.get(mat.$grey-palette, 800),
48+
disabled-button: rgba(white, 0.12),
49+
raised-button: map.get(mat.$grey-palette, 800),
50+
focused-button: $light-focused,
51+
selected-button: map.get(mat.$grey-palette, 900),
52+
selected-disabled-button: map.get(mat.$grey-palette, 800),
53+
disabled-button-toggle: black,
54+
unselected-chip: map.get(mat.$grey-palette, 700),
55+
disabled-list-option: black,
56+
tooltip: map.get(mat.$grey-palette, 700),
57+
);
58+
59+
$app-theme: (
60+
primary: $app-primary,
61+
accent: $app-accent,
62+
warn: $app-warn,
63+
is-dark: true,
64+
foreground: $dark-theme-foreground-palette,
65+
background: $dark-theme-background-palette,
66+
);
67+
1368

1469
// Include the common styles for Angular Material. We include this here so that you only
1570
// have to load a single css file for Angular Material in your app.
1671
// Important: include this mixin only once.
1772
@include mat.core();
1873

19-
// App theme
20-
$app-theme: mat.define-dark-theme($app-primary, $app-accent, $app-warn);
21-
2274
// Specifies the theming for angular material components
2375
@include mat.all-component-themes($app-theme);
76+
77+
body {
78+
@include variables.cssVariables($app-theme)
79+
}

0 commit comments

Comments
 (0)