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 // Define the primary, accent and warn palettes
/*$pink-light-theme-primary-palette: mat-palette($mat-grey,800); $lgRed-light-theme-primary-palette: mat-palette($mat-grey,800);
$pink-light-theme-accent-palette: mat-palette($lg-red, 400); $lgRed-light-theme-accent-palette: mat-palette($lg-red, 400);
$pink-light-theme-warn-palette: mat-palette($mat-red);*/ $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 // Create the Material theme object
$pink-light-theme: mat-light-theme( $lgRed-light-theme: mat-light-theme(
$pink-light-theme-primary-palette, $lgRed-light-theme-primary-palette,
$pink-light-theme-accent-palette, $lgRed-light-theme-accent-palette,
$pink-light-theme-warn-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. // Add ".theme-pink-dark" class to the body to activate this theme.
// Class name must start with "theme-" !!! // Class name must start with "theme-" !!!
body.theme-default { body.theme-default {
// Generate the Angular Material theme // 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 // Apply the theme to the user components
@include components-theme($pink-light-theme); @include components-theme($aquaBlue-light-theme);
@include ucap-material-theme($pink-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; list-style: none;
} }
$lg-red: ( $lg-red: (
50: #faf3f6, 50: #fff9fc,
100: #f8bbd0, 100: #f8bbd0,
200: #f48fb1, 200: #f48fb1,
300: #f06292, /*300: #f06292,*/300:#ef4c73,
400: #ef4c73, 400: #ec407a,
/* 400: #ec407a,*/ 500: #ed097e, 500: #ed097e,
600: #d81b60, 600: #d81b60,
700: #c2185b, 700: #c2185b,
800: #ad1457, 800: #ad1457,
@ -84,7 +84,7 @@ $lg-red: (
) )
); );
$daesang: ( $aquaBlue-daesang: (
50: #f9feff, 50: #f9feff,
//#e0f7fa, //#e0f7fa,
100: #b2ebf2, 100: #b2ebf2,
@ -173,6 +173,10 @@ $daesang-grey: (
$gradient-light: mat-color($accent, G100); $gradient-light: mat-color($accent, G100);
//basic //basic
.bg-primary-darkest{
background: mat-color($primary, 900);
color: mat-color($primary, default-contrast);
}
.bg-primary-dark { .bg-primary-dark {
background: mat-color($primary, 900); background: mat-color($primary, 900);
color: mat-color($primary, default-contrast); color: mat-color($primary, default-contrast);
@ -186,7 +190,7 @@ $daesang-grey: (
color: mat-color($primary, default-contrast); color: mat-color($primary, default-contrast);
} }
.bg-accent-darkest { .bg-accent-darkest {
background: mat-color($accent, 900); background: mat-color($accent, 800);
color: mat-color($primary, default-contrast); color: mat-color($primary, default-contrast);
} }
.bg-accent-dark { .bg-accent-dark {
@ -209,7 +213,7 @@ $daesang-grey: (
color: mat-color($primary); color: mat-color($primary);
} }
.text-accent-darkest { .text-accent-darkest {
color: mat-color($accent, 900); color: mat-color($accent, 800);
} }
.text-accent-color { .text-accent-color {
color: mat-color($accent); 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> </mat-form-field>
<button <button
class="send-message-button bg-accent-darkest" class="send-message-button bg-primary-darkest"
mat-icon-button mat-icon-button
type="submit" type="submit"
aria-label="Send message" aria-label="Send message"