Skip to content

Commit

Permalink
refactor: dim theme handling, icons & colors (#608)
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexbarnsley
alexbarnsley authored Dec 21, 2023
1 parent 52994d3 commit 110e523
Show file tree
Hide file tree
Showing 9 changed files with 132 additions and 12 deletions.
4 changes: 2 additions & 2 deletions icons.html
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions resources/assets/icons/moon-stars.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions resources/assets/icons/moon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions resources/assets/icons/sun.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
81 changes: 81 additions & 0 deletions resources/assets/js/chart-theme.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,19 @@ function themes() {
pointBackgroundColor: "rgba(33,34,37,1)", // theme-secondary-900
pointHoverBackgroundColor: "rgba(33,34,37,1)", // theme-secondary-900
},
dim: {
..._default,
borderColor: "rgba(238,243,245,1)", // theme-secondary-200
pointHoverBorderColor: "rgba(238,243,245,1)", // theme-secondary-200
backgroundColor: {
gradient: [
{ stop: 0, value: "rgba(238,243,245,0.5)" }, // theme-secondary-200
{ stop: 1, value: "rgba(238,243,245,0)" }, // theme-secondary-200
],
},
pointBackgroundColor: "rgba(33,34,37,1)", // theme-secondary-900
pointHoverBackgroundColor: "rgba(33,34,37,1)", // theme-secondary-900
},
light: {
..._default,
borderColor: "rgba(33,34,37,1)", // theme-secondary-900
Expand Down Expand Up @@ -51,6 +64,19 @@ function themes() {
pointBackgroundColor: "rgba(33,34,37,1)", // theme-secondary-900
pointHoverBackgroundColor: "rgba(33,34,37,1)", // theme-secondary-900
},
dim: {
..._default,
borderColor: "rgba(126,138,156,1)", // theme-secondary-600
pointHoverBorderColor: "rgba(126,138,156,1)", // theme-secondary-600
backgroundColor: {
gradient: [
{ stop: 0, value: "rgba(126,138,156,1)" }, // theme-secondary-600
{ stop: 1, value: "rgba(126,138,156,0)" }, // theme-secondary-600
],
},
pointBackgroundColor: "rgba(33,34,37,1)", // theme-secondary-900
pointHoverBackgroundColor: "rgba(33,34,37,1)", // theme-secondary-900
},
light: {
..._default,
borderColor: "rgba(196,200,207,1)", // theme-secondary-400
Expand Down Expand Up @@ -80,6 +106,19 @@ function themes() {
pointBackgroundColor: "rgba(33,34,37,1)", // theme-secondary-900
pointHoverBackgroundColor: "rgba(33,34,37,1)", // theme-secondary-900
},
dim: {
..._default,
borderColor: "rgba(255,174,16,1)", // theme-warning-500
pointHoverBorderColor: "rgba(255,174,16,1)", // theme-warning-500
backgroundColor: {
gradient: [
{ stop: 0, value: "rgba(255,174,16,0.5)" }, // theme-warning-500
{ stop: 1, value: "rgba(255,174,16,0)" }, // theme-warning-500
],
},
pointBackgroundColor: "rgba(33,34,37,1)", // theme-secondary-900
pointHoverBackgroundColor: "rgba(33,34,37,1)", // theme-secondary-900
},
light: {
..._default,
borderColor: "rgba(255,174,16,1)", // theme-warning-500
Expand Down Expand Up @@ -109,6 +148,19 @@ function themes() {
pointBackgroundColor: "rgba(33,34,37,1)", // theme-secondary-900
pointHoverBackgroundColor: "rgba(33,34,37,1)", // theme-secondary-900
},
dim: {
..._default,
borderColor: "rgba(40,149,72,1)", // theme-success-600
pointHoverBorderColor: "rgba(40,149,72,1)", // theme-success-600
backgroundColor: {
gradient: [
{ stop: 0, value: "rgba(40,149,72,0.5)" }, // theme-success-600
{ stop: 1, value: "rgba(40,149,72,0)" }, // theme-success-600
],
},
pointBackgroundColor: "rgba(33,34,37,1)", // theme-secondary-900
pointHoverBackgroundColor: "rgba(33,34,37,1)", // theme-secondary-900
},
light: {
..._default,
borderColor: "rgba(40,149,72,1)", // theme-success-600
Expand Down Expand Up @@ -138,6 +190,19 @@ function themes() {
pointBackgroundColor: "rgba(33,34,37,1)", // theme-secondary-900
pointHoverBackgroundColor: "rgba(33,34,37,1)", // theme-secondary-900
},
dim: {
..._default,
borderColor: "rgba(222,88,70,1)", // theme-danger-400
pointHoverBorderColor: "rgba(222,88,70,1)", // theme-danger-400
backgroundColor: {
gradient: [
{ stop: 0, value: "rgba(222,88,70,0.5)" }, // theme-danger-400
{ stop: 1, value: "rgba(222,88,70,0)" }, // theme-danger-400
],
},
pointBackgroundColor: "rgba(33,34,37,1)", // theme-secondary-900
pointHoverBackgroundColor: "rgba(33,34,37,1)", // theme-secondary-900
},
light: {
..._default,
borderColor: "rgba(222,88,70,1)", // theme-danger-400
Expand Down Expand Up @@ -193,6 +258,10 @@ export function getFontConfig(type, mode) {
..._default.axis,
color: "rgba(164, 177, 188, 1)", // theme-dark-200
},
dim: {
..._default.axis,
color: "rgba(158, 179, 219, 1)", // theme-dim-200
},
},
tooltip: {
light: {
Expand All @@ -203,6 +272,10 @@ export function getFontConfig(type, mode) {
fontColor: "rgba(165,173,185,1)", // theme-secondary-500
backgroundColor: "rgba(33,34,37,1)", // theme-secondary-900
},
dim: {
fontColor: "rgba(158, 179, 219,1)", // theme-dim-200
backgroundColor: "rgba(23, 31, 52, 1)", // theme-dim-900
},
},
};

Expand All @@ -227,6 +300,14 @@ export function getAxisThemeConfig(mode) {
color: "rgba(61, 68, 77, 1)", // theme-dark-700
},
},
dim: {
x: {
color: "rgba(40, 60, 100, 1)", // theme-dim-700
},
y: {
color: "rgba(40, 60, 100, 1)", // theme-dim-700
},
},
};

return config[mode];
Expand Down
2 changes: 1 addition & 1 deletion resources/assets/js/chart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ const CustomChart = (
) => {
const themeMode = () => {
if (theme.mode === "auto") {
return ["light", "dark"].includes(localStorage.theme)
return ["light", "dark", "dim"].includes(localStorage.theme)
? localStorage.theme
: "light";
}
Expand Down
42 changes: 35 additions & 7 deletions resources/assets/js/navbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const Navbar = {
scrollProgress: 0,
nav: null,
header: null,
dark: false,
theme: "light",
lockBodyBreakpoint: 640,

onScroll() {
Expand Down Expand Up @@ -68,7 +68,7 @@ const Navbar = {

this.updateStyles(this.scrollProgress);

this.$watch("dark", () =>
this.$watch("theme", () =>
this.updateStyles(this.getScrollProgress())
);

Expand All @@ -89,16 +89,44 @@ const Navbar = {
}
},

get themeTransparency() {
if (this.theme === "dark") {
return 0.6;
} else if (this.theme === "dim") {
return 0.6;
}

return 0.22;
},

get themeBorderColor() {
if (this.theme === "dark") {
return [60, 66, 73];
} else if (this.theme === "dim") {
return [40, 60, 100];
}

return [219, 222, 229];
},

get themeBoxShadow() {
if (this.theme === "dark") {
return [18, 18, 19];
} else if (this.theme === "dim") {
return [18, 18, 19];
}

return [192, 200, 207];
},

updateShadow(progress) {
const maxTransparency = this.dark ? 0.6 : 0.22;
const maxTransparency = this.themeTransparency;
const shadowTransparency =
Math.round(maxTransparency * progress * 100) / 100;
const borderTransparency =
Math.round((1 - progress) * 100) / 100;
const borderColorRgb = this.dark
? [60, 66, 73]
: [219, 222, 229];
const boxShadowRgb = this.dark ? [18, 18, 19] : [192, 200, 207];
const borderColorRgb = this.themeBorderColor;
const boxShadowRgb = this.themeBoxShadow;
this.nav.style.boxShadow = `0px 2px 10px 0px rgba(${boxShadowRgb.join(
", "
)}, ${shadowTransparency})`;
Expand Down
4 changes: 2 additions & 2 deletions resources/views/navbar.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,9 @@
x-data="Navbar.dropdown({
inverted: @js($inverted ?? false),
invertOnScroll: @js($invertOnScroll ?? false),
dark: window.getThemeMode() === 'dark',
theme: window.getThemeMode(),
})"
@theme-changed.window="dark = $event.detail.theme === 'dark'"
@theme-changed.window="theme = $event.detail.theme"
@else
x-data="Navbar.dropdown({
inverted: @js($inverted ?? false),
Expand Down
8 changes: 8 additions & 0 deletions resources/views/scripts/dark-theme-script.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,17 @@
const toggleTheme = () => {
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
document.documentElement.classList.remove('light');
document.documentElement.classList.remove('dim');
_theme = 'dark';
} else if (localStorage.theme === 'dim') {
document.documentElement.classList.add('dim');
document.documentElement.classList.add('dark');
document.documentElement.classList.remove('light');
_theme = 'dim';
} else {
document.documentElement.classList.remove('dark');
document.documentElement.classList.remove('dim');
_theme = 'light';
}
Expand Down

0 comments on commit 110e523

Please sign in to comment.