Merge pull request 'fix/dark-mode-issues' (#16) from fix/dark-mode-issues into master
Reviewed-on: #16
This commit is contained in:
commit
c8632e1a12
20
package-lock.json
generated
20
package-lock.json
generated
@ -1,9 +1,13 @@
|
||||
{
|
||||
"name": "priceybot",
|
||||
"name": "html",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"dependencies": {
|
||||
"@fontsource/cooper-hewitt": "^5.0.7",
|
||||
"@fortawesome/fontawesome-free": "^6.4.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/forms": "^0.5.2",
|
||||
"autoprefixer": "^10.4.2",
|
||||
@ -378,6 +382,20 @@
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/@fontsource/cooper-hewitt": {
|
||||
"version": "5.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@fontsource/cooper-hewitt/-/cooper-hewitt-5.0.7.tgz",
|
||||
"integrity": "sha512-TDbBV/TJGWeHxuBKIgF+yq1sQcOvRswEF0kwJ07FbEXEWYW4fR3uqrpMrGmlUWQKoMlSgo6EKe+u5dr3rJhrnQ=="
|
||||
},
|
||||
"node_modules/@fortawesome/fontawesome-free": {
|
||||
"version": "6.4.2",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.4.2.tgz",
|
||||
"integrity": "sha512-m5cPn3e2+FDCOgi1mz0RexTUvvQibBebOUlUlW0+YrMjDTPkiJ6VTKukA1GRsvRw+12KyJndNjj0O4AgTxm2Pg==",
|
||||
"hasInstallScript": true,
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/@jridgewell/gen-mapping": {
|
||||
"version": "0.3.3",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
|
||||
|
||||
15
package.json
15
package.json
@ -2,9 +2,16 @@
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite --host",
|
||||
"build": "vite build"
|
||||
"dev": "npm run development",
|
||||
"development": "vue-tsc --noEmit && NODE_ENV=development vite build --sourcemap -m development",
|
||||
"watch": "vite build -m development --watch",
|
||||
"prod": "npm run production",
|
||||
"production": "vue-tsc --noEmit && NODE_ENV=production vite build -m production",
|
||||
"lint": "eslint --ext .js,.ts,.vue --fix resources/js"
|
||||
},
|
||||
"browserslist": [
|
||||
"last 3 versions"
|
||||
],
|
||||
"devDependencies": {
|
||||
"@tailwindcss/forms": "^0.5.2",
|
||||
"autoprefixer": "^10.4.2",
|
||||
@ -13,5 +20,9 @@
|
||||
"postcss": "^8.4.6",
|
||||
"tailwindcss": "^3.1.0",
|
||||
"vite": "^4.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fontsource/cooper-hewitt": "^5.0.7",
|
||||
"@fortawesome/fontawesome-free": "^6.4.2"
|
||||
}
|
||||
}
|
||||
|
||||
9
resources/css/_fonts.scss
Normal file
9
resources/css/_fonts.scss
Normal file
@ -0,0 +1,9 @@
|
||||
// Cooper Hewitt
|
||||
@import "@fontsource/cooper-hewitt/latin.css";
|
||||
|
||||
// Font Awesome
|
||||
$fa-font-path: "@fortawesome/fontawesome-free/webfonts";
|
||||
@import '@fortawesome/fontawesome-free/scss/fontawesome';
|
||||
@import '@fortawesome/fontawesome-free/scss/regular';
|
||||
@import '@fortawesome/fontawesome-free/scss/solid';
|
||||
@import '@fortawesome/fontawesome-free/scss/brands';
|
||||
@ -1,5 +1,5 @@
|
||||
<div class="flex items-center">
|
||||
<template x-if="darkMode === 'dark'">
|
||||
<div x-show="darkMode === 'dark'">
|
||||
<button x-on:click="darkMode = 'light'" class="pl-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
x-bind:class="{'border-2 border-red/50': darkMode === 'light'}"
|
||||
@ -8,8 +8,8 @@
|
||||
</svg>
|
||||
<span class="sr-only">light</span>
|
||||
</button>
|
||||
</template>
|
||||
<template x-if="darkMode !== 'dark'">
|
||||
</div>
|
||||
<div x-show="darkMode !== 'dark'">
|
||||
<button x-on:click="darkMode = 'dark'" class="pl-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
x-bind:class="{'border-2 border-red/50': darkMode === 'dark'}"
|
||||
@ -18,5 +18,5 @@
|
||||
</svg>
|
||||
<span class="sr-only">dark</span>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"
|
||||
<html x-cloak lang="{{ str_replace('_', '-', app()->getLocale()) }}"
|
||||
x-data="{
|
||||
darkMode: localStorage.getItem('darkMode') ||
|
||||
localStorage.setItem('darkMode', 'system')
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"
|
||||
<html x-cloak lang="{{ str_replace('_', '-', app()->getLocale()) }}"
|
||||
x-data="{
|
||||
darkMode: localStorage.getItem('darkMode') ||
|
||||
localStorage.setItem('darkMode', 'system')
|
||||
|
||||
@ -46,7 +46,8 @@ export default {
|
||||
'nexi-orange': "rgb(241, 124, 37)",
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Figtree', ...defaultTheme.fontFamily.sans],
|
||||
sans: ['Cooper Hewitt', ...defaultTheme.fontFamily.sans],
|
||||
serif: ['Cooper Hewitt', ...defaultTheme.fontFamily.sans],
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -11,12 +11,4 @@ export default defineConfig({
|
||||
refresh: true,
|
||||
}),
|
||||
],
|
||||
server: {
|
||||
hmr: {
|
||||
host: '10.6.9.126',
|
||||
},
|
||||
watch: {
|
||||
usePolling: true,
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user