fix/dark-mode-issues #16

Merged
benjamyn merged 4 commits from fix/dark-mode-issues into master 2023-10-09 07:18:47 -04:00
8 changed files with 49 additions and 18 deletions

20
package-lock.json generated
View File

@ -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",

View File

@ -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"
}
}

View 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';

View File

@ -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>

View File

@ -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')

View File

@ -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')

View File

@ -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],
},
},
},

View File

@ -11,12 +11,4 @@ export default defineConfig({
refresh: true,
}),
],
server: {
hmr: {
host: '10.6.9.126',
},
watch: {
usePolling: true,
},
}
});