Archives/RTL
2
0
Fork 0
mirror of https://github.com/Ride-The-Lightning/RTL synced 2024-11-07 15:20:31 +00:00
Code Issues Releases Wiki Activity

Dark theme adjustments

Browse Source 
Dark theme adjustments
This commit is contained in:
Shahana Farooqui 2019-11-26 12:22:52 -05:00
parent b4c96314b9
commit 70c113f161
14 changed files with 169 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
angular/index.html
View File

@ -9,7 +9,7 @@
<link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon/favicon-16x16.png">
<link rel="manifest" href="assets/images/favicon/site.webmanifest">
<link rel="stylesheet" href="styles.62f55fd4bbc08a58c082.css"></head>
<link rel="stylesheet" href="styles.aef37d250eb6fe1fc81f.css"></head>
<body>
<rtl-app></rtl-app>
<script src="runtime.6de72bb8034866ce176f.js"></script><script src="polyfills-es5.92f4069201c83f4833ef.js" nomodule></script><script src="polyfills.5ddcccdb990eb395f306.js"></script><script src="main.c8e54865e9aba2fa4476.js"></script></body>

1
angular/styles.62f55fd4bbc08a58c082.css
View File

File diff suppressed because one or more lines are too long

1
angular/styles.aef37d250eb6fe1fc81f.css Normal file
View File

File diff suppressed because one or more lines are too long

9
src/app/shared/theme/skins/blue.scss
View File

@ -1,5 +1,5 @@
@import './color-swatches/day-foreground.scss';
@import './color-swatches/day-background.scss';
@import './color-swatches/light-dull-theme.scss';
@import './color-swatches/dark-bright-theme.scss';
@import './color-swatches/red-warn.swatch.scss';
@import '~@angular/material/theming';
@include mat-core();
@ -8,5 +8,8 @@ $blue-primary: mat-palette($mat-blue, 700, 200, A200);
$blue-accent: mat-palette($mat-pink, A200, A100, A400);
$blue-warn: mat-palette($red-warn, 500);
// $blue-day-theme: create-light-dull-theme($blue-primary, $blue-accent, $blue-warn);
$blue-night-theme: create-dark-bright-theme($blue-primary, $blue-accent, $blue-warn);
$blue-day-theme: mat-light-theme($blue-primary, $blue-accent, $blue-warn);
$blue-night-theme: mat-dark-theme($blue-primary, $blue-accent, $blue-warn);
// $blue-night-theme: mat-dark-theme($blue-primary, $blue-accent, $blue-warn);

78
src/app/shared/theme/skins/color-swatches/dark-bright-theme.scss Normal file
View File

@ -0,0 +1,78 @@
$dark-grey: (
50 : #484848,
100 : #464646,
200 : #444444,
300 : #404040,
400 : #363636,
500 : #303030,
600 : #262626,
700 : #202020,
800 : #1b1b1b,
900 : #0d0d0d,
A100 : #0d0d0d,
A200 : #0a0a0a,
A400 : #080808,
A700 : #030303,
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #ffffff,
400 : #ffffff,
500 : #ffffff,
600 : #ffffff,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
A100 : #000000,
A200 : #ffffff,
A400 : #ffffff,
A700 : #ffffff,
)
);
$dark-bright-foreground: (
base: white,
divider: $light-dividers,
dividers: $light-dividers,
disabled: $light-disabled-text,
disabled-button: rgba(white, 0.26),
disabled-text: $light-disabled-text,
hint-text: $light-disabled-text,
secondary-text: $light-secondary-text,
icon: rgba(white, 1),
icons: rgba(white, 1),
text: rgba(white, 1),
slider-min: rgba(white, 1),
slider-off: rgba(white, 0.5),
slider-off-active: rgba(white, 0.6)
);
$dark-bright-background: (
status-bar: map_get($dark-grey, 600),
app-bar: map_get($dark-grey, 600),
background:map_get($dark-grey, 900),
hover: rgba(black, 0.04),
card: map_get($dark-grey, 700),
dialog: map_get($dark-grey, 700),
disabled-button: map_get($dark-grey, 300),
raised-button: map_get($dark-grey, 400),
focused-button: $dark-focused,
selected-button: map_get($dark-grey, 500),
selected-disabled-button: map_get($dark-grey, 400),
disabled-button-toggle: map_get($dark-grey, 300),
unselected-chip: map_get($dark-grey, 300),
disabled-list-option: map_get($dark-grey, 200),
);
@function create-dark-bright-theme($primary, $accent, $warn: mat-palette($mat-red)) {
@return (
primary: $primary,
accent: $accent,
warn: $warn,
is-dark: true,
foreground: $dark-bright-foreground,
background: $dark-bright-background
);
}

16
src/app/shared/theme/skins/color-swatches/day-background.scss
View File

@ -1,16 +0,0 @@
$custom-day-theme-background: (
status-bar: map_get($mat-grey, 300),
app-bar: map_get($mat-grey, 100),
background:map_get($mat-gray, 100),
hover: rgba(black, 0.04),
card: map_get($mat-gray, 100),
dialog: map_get($mat-gray, 100),
disabled-button: rgba(black, 0.12),
raised-button: map_get($mat-grey, 50),
focused-button: $dark-focused,
selected-button: map_get($mat-grey, 300),
selected-disabled-button: map_get($mat-grey, 400),
disabled-button-toggle: map_get($mat-grey, 200),
unselected-chip: map_get($mat-grey, 300),
disabled-list-option: map_get($mat-grey, 200),
);

16
src/app/shared/theme/skins/color-swatches/day-foreground.scss
View File

@ -1,16 +0,0 @@
$custom-day-theme-foreground: (
base: black,
divider: $dark-dividers,
dividers: $dark-dividers,
disabled: $dark-disabled-text,
disabled-button: rgba(black, 0.26),
disabled-text: $dark-disabled-text,
hint-text: $dark-disabled-text,
secondary-text: $dark-secondary-text,
icon: rgba(black, 1),
icons: rgba(black, 1),
text: rgba(black, 1),
slider-min: rgba(black, 1),
slider-off: rgba(black, 0.5),
slider-off-active: rgba(black, 0.6),
);

45
src/app/shared/theme/skins/color-swatches/light-dull-theme.scss Normal file
View File

@ -0,0 +1,45 @@
$light-dull-foreground: (
base: black,
divider: $dark-dividers,
dividers: $dark-dividers,
disabled: $dark-disabled-text,
disabled-button: rgba(black, 0.26),
disabled-text: $dark-disabled-text,
hint-text: $dark-disabled-text,
secondary-text: $dark-secondary-text,
icon: rgba(black, 1),
icons: rgba(black, 1),
text: rgba(black, 1),
slider-min: rgba(black, 1),
slider-off: rgba(black, 0.5),
slider-off-active: rgba(black, 0.6),
);
$light-dull-background: (
status-bar: map_get($mat-grey, 300),
app-bar: map_get($mat-grey, 100),
background:map_get($mat-gray, 100),
hover: rgba(black, 0.04),
card: map_get($mat-gray, 100),
dialog: map_get($mat-gray, 100),
disabled-button: rgba(black, 0.12),
raised-button: map_get($mat-grey, 50),
focused-button: $dark-focused,
selected-button: map_get($mat-grey, 300),
selected-disabled-button: map_get($mat-grey, 400),
disabled-button-toggle: map_get($mat-grey, 200),
unselected-chip: map_get($mat-grey, 300),
disabled-list-option: map_get($mat-grey, 200),
);
@function create-light-dull-theme($primary, $accent, $warn: mat-palette($mat-red)) {
@return (
primary: $primary,
accent: $accent,
warn: $warn,
is-dark: false,
foreground: $light-dull-foreground,
background: $light-dull-background
);
}

23
src/app/shared/theme/skins/green.scss
View File

@ -1,25 +1,16 @@
@import './color-swatches/day-foreground.scss';
@import './color-swatches/day-background.scss';
@import './color-swatches/light-dull-theme.scss';
@import './color-swatches/dark-bright-theme.scss';
@import './color-swatches/red-warn.swatch.scss';
@import './color-swatches/green-primary.swatch.scss';
@import '~@angular/material/theming';
@include mat-core();
@function create-custom-theme($primary, $accent, $warn: mat-palette($mat-red)) {
@return (
primary: $primary,
accent: $accent,
warn: $warn,
is-dark: false,
foreground: $custom-day-theme-foreground,
background: $custom-day-theme-background
);
}
$green-primary: mat-palette($green-primary, 500, 300, A200);
$green-accent: mat-palette($mat-amber, A200, A100, A700);
$green-warn: mat-palette($red-warn, 500);
$green-day-theme: create-custom-theme($green-primary, $green-accent, $green-warn);
$green-night-theme: mat-dark-theme($green-primary, $green-accent, $green-warn);
// $green-day-theme: create-light-dull-theme($green-primary, $green-accent, $green-warn);
$green-night-theme: create-dark-bright-theme($green-primary, $green-accent, $green-warn);
$green-day-theme: mat-light-theme($green-primary, $green-accent, $green-warn);
// $green-night-theme: mat-dark-theme($green-primary, $green-accent, $green-warn);

21
src/app/shared/theme/skins/indigo.scss
View File

@ -1,23 +1,16 @@
@import './color-swatches/day-foreground.scss';
@import './color-swatches/day-background.scss';
@import './color-swatches/light-dull-theme.scss';
@import './color-swatches/dark-bright-theme.scss';
@import './color-swatches/red-warn.swatch.scss';
@import '~@angular/material/theming';
@include mat-core();
@function create-custom-theme($primary, $accent, $warn: mat-palette($mat-red)) {
@return (
primary: $primary,
accent: $accent,
warn: $warn,
is-dark: false,
foreground: $custom-day-theme-foreground,
background: $custom-day-theme-background
);
}
$indigo-primary: mat-palette($mat-indigo, 500, 200, A200);
$indigo-accent: mat-palette($mat-pink, A200, A100, A400);
$indigo-warn: mat-palette($red-warn, 500);
$indigo-day-theme: create-custom-theme($indigo-primary, $indigo-accent, $indigo-warn);
$indigo-night-theme: mat-dark-theme($indigo-primary, $indigo-accent, $indigo-warn);
// $indigo-day-theme: create-light-dull-theme($indigo-primary, $indigo-accent, $indigo-warn);
$indigo-night-theme: create-dark-bright-theme($indigo-primary, $indigo-accent, $indigo-warn);
$indigo-day-theme: mat-light-theme($indigo-primary, $indigo-accent, $indigo-warn);
// $indigo-night-theme: mat-dark-theme($indigo-primary, $indigo-accent, $indigo-warn);

7
src/app/shared/theme/skins/pink.scss
View File

@ -1,3 +1,5 @@
@import './color-swatches/light-dull-theme.scss';
@import './color-swatches/dark-bright-theme.scss';
@import './color-swatches/red-warn.swatch.scss';
@import '~@angular/material/theming';
@include mat-core();
@ -6,5 +8,8 @@ $pink-primary: mat-palette($mat-pink, 500, 300, A200);
$pink-accent: mat-palette($mat-blue-grey, 700, 500, 900);
$pink-warn: mat-palette($red-warn, 500);
// $pink-day-theme: create-light-dull-theme($pink-primary, $pink-accent, $pink-warn);
$pink-night-theme: create-dark-bright-theme($pink-primary, $pink-accent, $pink-warn);
$pink-day-theme: mat-light-theme($pink-primary, $pink-accent, $pink-warn);
$pink-night-theme: mat-dark-theme($pink-primary, $pink-accent, $pink-warn);
// $pink-night-theme: mat-dark-theme($pink-primary, $pink-accent, $pink-warn);

7
src/app/shared/theme/skins/purple.scss
View File

@ -1,3 +1,5 @@
@import './color-swatches/light-dull-theme.scss';
@import './color-swatches/dark-bright-theme.scss';
@import './color-swatches/purple-primary.swatch.scss';
@import './color-swatches/red-warn.swatch.scss';
@import '~@angular/material/theming';
@ -7,5 +9,8 @@ $purple-primary: mat-palette($purple-primary, 500, 300, A200);
$purple-accent: mat-palette($mat-gray, 800, 600, 900);
$purple-warn: mat-palette($red-warn, 500);
// $purple-day-theme: create-light-dull-theme($purple-primary, $purple-accent, $purple-warn);
$purple-night-theme: create-dark-bright-theme($purple-primary, $purple-accent, $purple-warn);
$purple-day-theme: mat-light-theme($purple-primary, $purple-accent, $purple-warn);
$purple-night-theme: mat-dark-theme($purple-primary, $purple-accent, $purple-warn);
// $purple-night-theme: mat-dark-theme($purple-primary, $purple-accent, $purple-warn);

22
src/app/shared/theme/skins/teal.scss
View File

@ -1,23 +1,15 @@
@import './color-swatches/day-foreground.scss';
@import './color-swatches/day-background.scss';
@import './color-swatches/light-dull-theme.scss';
@import './color-swatches/dark-bright-theme.scss';
@import './color-swatches/red-warn.swatch.scss';
@import '~@angular/material/theming';
@include mat-core();
@function create-custom-theme($primary, $accent, $warn: mat-palette($mat-red)) {
@return (
primary: $primary,
accent: $accent,
warn: $warn,
is-dark: false,
foreground: $custom-day-theme-foreground,
background: $custom-day-theme-background
);
}
$teal-primary: mat-palette($mat-teal, 800, 300, A200);
$teal-accent: mat-palette($mat-amber, A200, A100, A700);
$teal-warn: mat-palette($red-warn, 500);
$teal-day-theme: create-custom-theme($teal-primary, $teal-accent, $teal-warn);
$teal-night-theme: mat-dark-theme($teal-primary, $teal-accent, $teal-warn);
// $teal-day-theme: create-light-dull-theme($teal-primary, $teal-accent, $teal-warn);
$teal-night-theme: create-dark-bright-theme($teal-primary, $teal-accent, $teal-warn);
$teal-day-theme: mat-light-theme($teal-primary, $teal-accent, $teal-warn);
// $teal-night-theme: mat-dark-theme($teal-primary, $teal-accent, $teal-warn);

6
src/app/shared/theme/styles/change-theme.scss
View File

@ -210,7 +210,7 @@
position: relative;
margin-top: 0.5rem;
width:100%;
color: $accent-color;
color: $warn-color;
}
.mat-vertical-content {
@ -333,4 +333,8 @@
background: none;
}
.mat-tab-label {
opacity: 1;
}
}