From 110e523b23cb680752ed46d7d4b89c01aeb21274 Mon Sep 17 00:00:00 2001 From: Alex Barnsley <8069294+alexbarnsley@users.noreply.github.com> Date: Thu, 21 Dec 2023 17:00:38 +0000 Subject: [PATCH] refactor: dim theme handling, icons & colors (#608) --- icons.html | 4 +- resources/assets/icons/moon-stars.svg | 1 + resources/assets/icons/moon.svg | 1 + resources/assets/icons/sun.svg | 1 + resources/assets/js/chart-theme.js | 81 +++++++++++++++++++ resources/assets/js/chart.js | 2 +- resources/assets/js/navbar.js | 42 ++++++++-- resources/views/navbar.blade.php | 4 +- .../views/scripts/dark-theme-script.blade.php | 8 ++ 9 files changed, 132 insertions(+), 12 deletions(-) create mode 100644 resources/assets/icons/moon-stars.svg create mode 100644 resources/assets/icons/moon.svg create mode 100644 resources/assets/icons/sun.svg diff --git a/icons.html b/icons.html index 1f49bd2c6..6c8d64848 100644 --- a/icons.html +++ b/icons.html @@ -17,7 +17,7 @@ menu-open
menu-show
menu
message-code
message-edit
message-ellipsis
message-empty
message-question-mark
microchip-long
microchip
mobile-phone
modal/confirm-password
money-bills
money-coin-swap
money-coins
-monitor
moon-underline
multicolor/business
multicolor/cards
multicolor/collectibles
multicolor/developer-tools
multicolor/exchanges
multicolor/finance
multicolor/games
multicolor/governance
multicolor/health-fitness
multicolor/identity
multicolor/organizations
multicolor/security
multicolor/shops
multicolor/social-media
multicolor/storage
multicolor/travel
multicolor/wallets
networks/ark-square
networks/ark
networks/avalanche
networks/binance
networks/bitcoin
networks/cardano
networks/compendia
networks/cosmos
networks/elrond
networks/eos
networks/ethereum
networks/hive
networks/komodo
networks/lisk
networks/nano
networks/neo
networks/polkadot
networks/polygon
networks/ripple
networks/solana
networks/steem
networks/stellar
+monitor
moon-stars
moon-underline
moon
multicolor/business
multicolor/cards
multicolor/collectibles
multicolor/developer-tools
multicolor/exchanges
multicolor/finance
multicolor/games
multicolor/governance
multicolor/health-fitness
multicolor/identity
multicolor/organizations
multicolor/security
multicolor/shops
multicolor/social-media
multicolor/storage
multicolor/travel
multicolor/wallets
networks/ark-square
networks/ark
networks/avalanche
networks/binance
networks/bitcoin
networks/cardano
networks/compendia
networks/cosmos
networks/elrond
networks/eos
networks/ethereum
networks/hive
networks/komodo
networks/lisk
networks/nano
networks/neo
networks/polkadot
networks/polygon
networks/ripple
networks/solana
networks/steem
networks/stellar
networks/stratis
networks/terra
networks/tron
networks/waves
networks/zilliqa
newspaper
notification/empty
open-quote
organizations
page-reference
paper-plane
pause
payvo-sdk
pencil-bracket
pencil-ruler
pencil-window
pencil
play-filled
play
plug
plus-one
plus
programming-browser-1
@@ -26,5 +26,5 @@ ribbon
sdk
semi-globe-sign
server-lock
server
shield-check-mark
shield
sliders-vertical
sliders
smiley
social-media-twitter
social-media
social-music-podcast
-social-video-youtube-clip
square-expand
square-play
square-plus
square-return-arrow
square-shrink
star-filled
star
stars
stop
storage
+social-video-youtube-clip
square-expand
square-play
square-plus
square-return-arrow
square-shrink
star-filled
star
stars
stop
storage
sun
table
text-bold
text-italic
text-strike-through
text-underline
thumbs-down
thumbs-up
transaction/blockchain-registration
transaction/business-registration
transaction/delegate-registration
transaction/delegate-resignation
transaction/ipfs
transaction/magistrate
transaction/module-registration
transaction/multipayment
transaction/multisignature
transaction/plugin-registration
transaction/product-registration
transaction/received
transaction/return
transaction/second-signature
transaction/sent
transaction/timelock
transaction/transfer
transaction/unknown-transaction
transaction/unvote
transaction/vote-combination
trash
tutorials
type
unban
underline-location
underline-moon
underline-sun
user-arrows
user-check-mark
user-pencil
user-share
user
users
verified-checkmark
video
wallet-desktop
wallet-mobile
wallet
wave-pulse
\ No newline at end of file diff --git a/resources/assets/icons/moon-stars.svg b/resources/assets/icons/moon-stars.svg new file mode 100644 index 000000000..fcc80f623 --- /dev/null +++ b/resources/assets/icons/moon-stars.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/resources/assets/icons/moon.svg b/resources/assets/icons/moon.svg new file mode 100644 index 000000000..a0e4320cd --- /dev/null +++ b/resources/assets/icons/moon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/resources/assets/icons/sun.svg b/resources/assets/icons/sun.svg new file mode 100644 index 000000000..4dab4d4be --- /dev/null +++ b/resources/assets/icons/sun.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/resources/assets/js/chart-theme.js b/resources/assets/js/chart-theme.js index 3547f10d2..7d29bd459 100644 --- a/resources/assets/js/chart-theme.js +++ b/resources/assets/js/chart-theme.js @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -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: { @@ -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 + }, }, }; @@ -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]; diff --git a/resources/assets/js/chart.js b/resources/assets/js/chart.js index c9ee9d478..920e816b2 100644 --- a/resources/assets/js/chart.js +++ b/resources/assets/js/chart.js @@ -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"; } diff --git a/resources/assets/js/navbar.js b/resources/assets/js/navbar.js index 90904e35e..138d55e67 100644 --- a/resources/assets/js/navbar.js +++ b/resources/assets/js/navbar.js @@ -21,7 +21,7 @@ const Navbar = { scrollProgress: 0, nav: null, header: null, - dark: false, + theme: "light", lockBodyBreakpoint: 640, onScroll() { @@ -68,7 +68,7 @@ const Navbar = { this.updateStyles(this.scrollProgress); - this.$watch("dark", () => + this.$watch("theme", () => this.updateStyles(this.getScrollProgress()) ); @@ -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})`; diff --git a/resources/views/navbar.blade.php b/resources/views/navbar.blade.php index 66fa11938..ad8139d16 100644 --- a/resources/views/navbar.blade.php +++ b/resources/views/navbar.blade.php @@ -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), diff --git a/resources/views/scripts/dark-theme-script.blade.php b/resources/views/scripts/dark-theme-script.blade.php index bc9a24ba7..60d7e195f 100644 --- a/resources/views/scripts/dark-theme-script.blade.php +++ b/resources/views/scripts/dark-theme-script.blade.php @@ -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'; }