ucap/next-ucap-messenger
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

테마 수정

Browse Source
This commit is contained in:
khk 2019-11-25 09:05:35 +09:00
parent 4f31f81c26
commit 916b4cb75a
3 changed files with 48 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
projects/ucap-webmessenger-app/src/app/app.theme.scss
View File

@ -103,28 +103,51 @@ body.theme-pink-dark {
// -----------------------------------------------------------------------------------------------------
// Define the primary, accent and warn palettes
/*$pink-light-theme-primary-palette: mat-palette($mat-grey,800);
$pink-light-theme-accent-palette: mat-palette($lg-red, 400);
$pink-light-theme-warn-palette: mat-palette($mat-red);*/
$lgRed-light-theme-primary-palette: mat-palette($mat-grey,800);
$lgRed-light-theme-accent-palette: mat-palette($lg-red, 400);
$lgRed-light-theme-warn-palette: mat-palette($mat-cyan);
$pink-light-theme-primary-palette: mat-palette($daesang-grey, 900);
$pink-light-theme-accent-palette: mat-palette($daesang);
$pink-light-theme-warn-palette: mat-palette($mat-orange);
// Create the Material theme object
$pink-light-theme: mat-light-theme(
$pink-light-theme-primary-palette,
$pink-light-theme-accent-palette,
$pink-light-theme-warn-palette
$lgRed-light-theme: mat-light-theme(
$lgRed-light-theme-primary-palette,
$lgRed-light-theme-accent-palette,
$lgRed-light-theme-warn-palette
);
// Add ".theme-pink-dark" class to the body to activate this theme.
// Class name must start with "theme-" !!!
body.theme-lgRed{
// Generate the Angular Material theme
@include angular-material-theme($lgRed-light-theme);
// Apply the theme to the user components
@include components-theme($lgRed-light-theme);
@include ucap-material-theme($lgRed-light-theme);
}
// -----------------------------------------------------------------------------------------------------
//aqua-blue-daesang
// -----------------------------------------------------------------------------------------------------
$aquaBlue-light-theme-primary-palette: mat-palette($daesang-grey, 900);
$aquaBlue-theme-accent-palette: mat-palette($aquaBlue-daesang);
$aquaBlue-theme-warn-palette: mat-palette($mat-orange);
// Create the Material theme object
$aquaBlue-light-theme: mat-light-theme(
$aquaBlue-light-theme-primary-palette,
$aquaBlue-theme-accent-palette,
$aquaBlue-theme-warn-palette
);
// Add ".theme-pink-dark" class to the body to activate this theme.
// Class name must start with "theme-" !!!
body.theme-default {
// Generate the Angular Material theme
@include angular-material-theme($pink-light-theme);
@include angular-material-theme($aquaBlue-light-theme);
// Apply the theme to the user components
@include components-theme($pink-light-theme);
@include ucap-material-theme($pink-light-theme);
@include components-theme($aquaBlue-light-theme);
@include ucap-material-theme($aquaBlue-light-theme);
}

18
projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
View File

@ -46,12 +46,12 @@ ol {
list-style: none;
}
$lg-red: (
50: #faf3f6,
50: #fff9fc,
100: #f8bbd0,
200: #f48fb1,
300: #f06292,
400: #ef4c73,
/* 400: #ec407a,*/ 500: #ed097e,
/*300: #f06292,*/300:#ef4c73,
400: #ec407a,
500: #ed097e,
600: #d81b60,
700: #c2185b,
800: #ad1457,
@ -84,7 +84,7 @@ $lg-red: (
)
);
$daesang: (
$aquaBlue-daesang: (
50: #f9feff,
//#e0f7fa,
100: #b2ebf2,
@ -173,6 +173,10 @@ $daesang-grey: (
$gradient-light: mat-color($accent, G100);
//basic
.bg-primary-darkest{
background: mat-color($primary, 900);
color: mat-color($primary, default-contrast);
}
.bg-primary-dark {
background: mat-color($primary, 900);
color: mat-color($primary, default-contrast);
@ -186,7 +190,7 @@ $daesang-grey: (
color: mat-color($primary, default-contrast);
}
.bg-accent-darkest {
background: mat-color($accent, 900);
background: mat-color($accent, 800);
color: mat-color($primary, default-contrast);
}
.bg-accent-dark {
@ -209,7 +213,7 @@ $daesang-grey: (
color: mat-color($primary);
}
.text-accent-darkest {
color: mat-color($accent, 900);
color: mat-color($accent, 800);
}
.text-accent-color {
color: mat-color($accent);

2
projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html
View File

@ -56,7 +56,7 @@
</mat-form-field>
<button
class="send-message-button bg-accent-darkest"
class="send-message-button bg-primary-darkest"
mat-icon-button
type="submit"
aria-label="Send message"