Skip to content

Commit

Permalink
feat: enable light mode
Browse files Browse the repository at this point in the history
  • Loading branch information
DDonochVA committed Aug 6, 2024
1 parent 3affdbb commit 5ca24cf
Show file tree
Hide file tree
Showing 8 changed files with 32 additions and 12 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
[priority]="imagePriority()"
size="32"
/>
<span class="text-sm/[14px] font-medium">
<span class="text-al-primary-foreground text-sm/[14px] font-medium">
{{ article().author.name }}
</span>
</div>
Expand All @@ -45,7 +45,10 @@
</div>

<div class="flex flex-col gap-3 px-4 pb-4 pt-3">
<h3 class="text-2xl font-bold" [id]="article().slug">
<h3
class="text-al-primary-foreground text-2xl font-bold"
[id]="article().slug"
>
{{ article().title }}
</h3>
<p class="line-clamp-2">
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div class="my-3 flex flex-row items-center justify-between gap-6">
<h2
data-testId="article-list-title"
class="line-clamp-2 max-w-[160px] text-xl font-bold md:line-clamp-1 md:max-w-full lg:text-3xl"
class="text-al-primary-foreground line-clamp-2 max-w-[160px] text-xl font-bold md:line-clamp-1 md:max-w-full lg:text-3xl"
>
{{ title() }}
</h2>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
<header class="bg-al-background/95 z-30 h-20 w-full border-b shadow-xl">
<header
class="dark:bg-al-background/95 z-30 h-20 w-full border-b bg-white shadow-xl"
>
<div
class="mx-auto flex h-full w-full max-w-screen-xl items-center justify-between px-6 py-4 xl:px-0"
>
Expand Down Expand Up @@ -29,7 +31,7 @@ <h1 class="text-al-primary px-4 text-lg font-bold">angular.love</h1>
type="button"
class="border-al-gray-200 mr-1 rounded border bg-transparent px-1 py-2 font-medium leading-4 md:mr-2 md:px-4"
[ngClass]="{
'!text-white': language() === 'en',
'!text-al-foreground': language() === 'en',
'!text-al-gray-50 opacity-50': language() !== 'en',
}"
[attr.aria-label]="t('changeLangToEnglish')"
Expand All @@ -42,7 +44,7 @@ <h1 class="text-al-primary px-4 text-lg font-bold">angular.love</h1>
type="button"
class="border-al-gray-200 mr-1 rounded border bg-transparent px-1 py-2 font-medium leading-4 md:mr-2 md:px-4"
[ngClass]="{
'!text-white': language() === 'pl',
'!text-al-foreground': language() === 'pl',
'!text-al-gray-50 opacity-50': language() !== 'pl',
}"
[attr.aria-label]="t('changeLangToPolish')"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<div class="flex flex-col">
<h2
id="newsletter-title"
class="text-4xl font-bold lg:text-2xl xl:text-4xl"
class="text-al-primary-foreground text-4xl font-bold lg:text-2xl xl:text-4xl"
>
{{ t('title') }}
</h2>
Expand Down
2 changes: 1 addition & 1 deletion libs/blog/shared/ui-card/src/lib/card.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ export class CardLinkableDirective {
export class GradientCardDirective {
@HostBinding('class')
get hostClasses() {
return 'border !bg-al-radial-gradient bg-al-background';
return 'border !bg-al-radial-gradient bg-al-card dark:bg-al-background';
}
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export type UiDifficulty = 'beginner' | 'intermediate' | 'advanced';
<div
class="flex items-center self-stretch rounded-l-md pl-1 text-center align-middle xl:pl-2"
[ngClass]="{
'bg-al-background': isColorBackground(),
'dark:bg-al-background bg-transparent': isColorBackground(),
'bg-al-border': !isColorBackground(),
}"
>
Expand All @@ -39,7 +39,8 @@ export type UiDifficulty = 'beginner' | 'intermediate' | 'advanced';
<div
class="mx-0.5 inline-block h-4 w-4 rounded-full bg-transparent lg:mx-1"
[ngClass]="{
'shadow-al-full-background': isColorBackground(),
'dark:shadow-al-full-background shadow-transparent':
isColorBackground(),
'shadow-al-full-border': !isColorBackground(),
}"
></div>
Expand Down Expand Up @@ -71,7 +72,7 @@ export type UiDifficulty = 'beginner' | 'intermediate' | 'advanced';
<div
class="flex items-center self-stretch rounded-r-md pr-1 text-center align-middle"
[ngClass]="{
'bg-al-background': isColorBackground(),
'dark:bg-al-background bg-transparent': isColorBackground(),
'bg-al-border': !isColorBackground(),
}"
></div>
Expand Down
13 changes: 13 additions & 0 deletions libs/shared/assets/src/lib/styles/main.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,24 @@
:root {
--primary: 255 0 106;
--foreground: 255 255 255;
--primary-foreground: 255 255 255;
--muted: 190 196 202;
--border: 46 47 59;
--card: 25 26 34;
--background: 16 15 21;
}

@media (prefers-color-scheme: light) {
:root {
--primary: 213 1 89;
--foreground: 20 21 27;
--primary-foreground: 106 121 139;
--muted: 25 25 25;
--border: 200 200 200;
--card: 255 255 255;
--background: 236 236 236;
}
}
}

@layer base {
Expand Down
3 changes: 2 additions & 1 deletion tailwind.preset.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ['class'],
theme: {
extend: {
colors: {
'al-foreground': 'rgb(var(--foreground) / <alpha-value>)',
'al-primary-foreground':
'rgb(var(--primary-foreground) / <alpha-value>)',
'al-card': 'rgb(var(--card) / <alpha-value>)',
'al-background': 'rgba(var(--background) / <alpha-value>)',
'al-border': 'rgb(var(--border) / <alpha-value>)',
Expand Down

0 comments on commit 5ca24cf

Please sign in to comment.