commit 1348b8ea6d1c3269ffda1850e7e4daf947ecbcf7 · rita.moe/tz

+7 -35

app.vue

···

       2
       2
        
         <header>

     

       3
       3
        
           <nav>

     

       4
       4
        
             <NuxtLink to="/">Time Zones are hard</NuxtLink>

     

       5
       5
       -
             <span v-if="$colorMode.value === 'dark'" @click="$colorMode.preference = 'light'">

     

       6
       6
       -
               Light

     

       7
       7
       -
             </span>

     

       8
       8
       -
             <span v-else @click="$colorMode.preference = 'dark'">

     

       9
       9
       -
               Dark

     

       10
       10
       -
             </span>

     

       5
       5
       +
             <div class="nav-spacer"/>

     

       6
       6
       +
             <Icon

     

       7
       7
       +
               class="theme-toggle"

     

       8
       8
       +
               name="line-md:light-dark"

     

       9
       9
       +
               @click="$colorMode.value === 'dark' ? $colorMode.preference = 'light' : $colorMode.preference = 'dark'"

     

       10
       10
       +
               />

     

       11
       11
        
           </nav>

     

       12
       12
        
         </header>

     

       13
       13
        
       

     
···

       24
       24
        
       </script>

     

       25
       25
        
       

     

       26
       26
        
       <style lang="scss">

     

       27
       27
       -
       header,

     

       28
       28
       -
       main,

     

       29
       29
       -
       footer {

     

       30
       30
       -
         margin: 1rem auto;

     

       31
       31
       -
         max-width: 900px;

     

       32
       32
       -
       }

     

       33
       33
       -
       

     

       34
       34
       -
       header {

     

       35
       35
       -
         background: white;

     

       36
       36
       -
         border-radius: 10px;

     

       37
       37
       -
         padding: 1rem 2rem;

     

       38
       38
       -
       }

     

       39
       39
       -
       

     

       40
       40
       -
       main {

     

       41
       41
       -
         padding: 1rem 2rem;

     

       42
       42
       -
       

     

       43
       43
       -
         h1 {

     

       44
       44
       -
           text-align: center;

     

       45
       45
       -
         }

     

       46
       46
       -
       }

     

       47
       47
       -
       

     

       48
       48
       -
       footer {

     

       49
       49
       -
         color: gray;

     

       50
       50
       -
         font-size: small;

     

       51
       51
       -
         font-style: italic;

     

       52
       52
       -
         text-align: center;

     

       53
       53
       -
       }

     

       54
       54
       -
       

     

       55
       55
       -
       // @TODO: Add a dark colors

     

       27
       27
       +
       @import '@/styles/app';

     

       56
       28
        
       </style>

+12 -7

error.vue

···

       1
       1
        
       <template>

     

       2
       2
       -
         <h1>Error {{ props.error?.statusCode }}...</h1>

     

       3
       3
       -
         <h2>{{ props.error?.message }}</h2>

     

       4
       4
       -
         <p>

     

       5
       5
       -
           Did you try to type something manually?<br/>

     

       6
       6
       -
           <button @click="handleError">Go back home.</button>

     

       7
       7
       -
         </p>

     

       2
       2
       +
         <main>

     

       3
       3
       +
           <h1>Error {{ props.error?.statusCode }}...</h1>

     

       4
       4
       +
           <h2>{{ props.error?.message }}</h2>

     

       5
       5
       +
           <p>

     

       6
       6
       +
             <button type="button" @click="handleError">Go back home</button>

     

       7
       7
       +
           </p>

     

       8
       8
       +
         </main>

     

       8
       9
        
       </template>

     

       9
       10
        
       

     

       10
       11
        
       <script setup>

     
···

       13
       14
        
       })

     

       14
       15
        
       

     

       15
       16
        
       const handleError = () => clearError({ redirect: '/' })

     

       16
       16
       -
       </script>
     

       17
       17
       +
       </script>

     

       18
       18
       +
       

     

       19
       19
       +
       <style lang="scss">

     

       20
       20
       +
       @import '@/styles/app';

     

       21
       21
       +
       </style>

+7 -1

nuxt.config.ts

···

       6
       6
        
           '@nuxtjs/i18n',

     

       7
       7
        
           'dayjs-nuxt',

     

       8
       8
        
           'nuxt-icon'

     

       9
       9
       -
         ]

     

       9
       9
       +
         ],

     

       10
       10
       +
         dayjs: {

     

       11
       11
       +
           locales: ['en', 'fr'],

     

       12
       12
       +
           plugins: ['relativeTime', 'utc', 'timezone', 'localizedFormat', 'customParseFormat'],

     

       13
       13
       +
           defaultLocale: 'en',

     

       14
       14
       +
           defaultTimezone: 'UTC'

     

       15
       15
       +
         }

     

       10
       16
        
       })

+2 -1

package.json

···

       2
       2
        
         "name": "kdy-ts",

     

       3
       3
        
         "version": "0.0.1",

     

       4
       4
        
         "private": true,

     

       5
       5
       +
         "allowJs": true,

     

       5
       6
        
         "scripts": {

     

       6
       7
        
           "build": "nuxt build",

     

       7
       8
        
           "dev": "nuxt dev",

     
···

       13
       14
        
           "@nuxt/devtools": "latest",

     

       14
       15
        
           "@nuxtjs/color-mode": "^3.3.0",

     

       15
       16
        
           "@nuxtjs/i18n": "^8.0.0-rc.2",

     

       16
       16
       -
           "@types/node": "^18.17.3",

     

       17
       17
       +
           "@types/node": "^20.4.10",

     

       17
       18
        
           "dayjs-nuxt": "^1.1.2",

     

       18
       19
        
           "nuxt": "^3.6.5",

     

       19
       20
        
           "nuxt-icon": "^0.5.0",

+102 -18

pages/[id].vue

···

       1
       1
        
       <template>

     

       2
       2
       -
         <h1>{{ localDateTime }}</h1>

     

       3
       3
       -
         <p>

     

       4
       4
       -
           The shared date and time was {{ origDateTime }}.

     

       5
       5
       -
           That's {{ tzDiff }} of difference from your time zone.

     

       6
       6
       -
         </p>

     

       7
       7
       -
         <h2>In other popular time zones</h2>

     

       8
       8
       -
         <div class="tz-table">

     

       9
       9
       -
           <div v-for="tz in tzList" :key="tz.code">

     

       10
       10
       -
             {{ tz.code }}<br>

     

       11
       11
       -
             {{ tz.dt }}

     

       2
       2
       +
         <template v-if="!origDateTime" class="loading">

     

       3
       3
       +
           <h1>Loading...</h1>

     

       4
       4
       +
         </template>

     

       5
       5
       +
         <template v-else>

     

       6
       6
       +
           <h1>

     

       7
       7
       +
             {{ localDateTime }}<br/>

     

       8
       8
       +
             <small>({{ relativeTime }})</small>

     

       9
       9
       +
           </h1>

     

       10
       10
       +
           <p v-if="tzDiff" class="tz-diff">

     

       11
       11
       +
             You have {{ tzDiff }} hours of difference with the original timezone.

     

       12
       12
       +
           </p>

     

       13
       13
       +
       

     

       14
       14
       +
           <br/>

     

       15
       15
       +
       

     

       16
       16
       +
           <h2>In other popular time zones</h2>

     

       17
       17
       +
           <div class="tz-table">

     

       18
       18
       +
             <div v-for="tz in tzList" :key="tz">

     

       19
       19
       +
               {{ tz.split('/')[1].replace('_', ' ') }}

     

       20
       20
       +
               <span v-html="toTZ(tz)"/>

     

       21
       21
       +
             </div>

     

       12
       22
        
           </div>

     

       13
       13
       -
         </div>

     

       23
       23
       +
         </template>

     

       14
       24
        
       </template>

     

       15
       25
        
       

     

       16
       26
        
       <script setup>

     
···

       18
       28
        
       import { ref, onMounted } from 'vue'

     

       19
       29
        
       

     

       20
       30
        
       const route = useRoute()

     

       31
       31
       +
       const dayjs = useDayjs()

     

       21
       32
        
       

     

       22
       33
        
       const localDateTime = ref('...')

     

       23
       23
       -
       const origDateTime = ref('...')

     

       24
       24
       -
       const tzDiff = ref('...')

     

       25
       25
       -
       const tzList = ref([])

     

       34
       34
       +
       const relativeTime = ref('...')

     

       35
       35
       +
       const origDateTime = ref(null)

     

       36
       36
       +
       const tzDiff = ref(null)

     

       37
       37
       +
       const tzList = ref([

     

       38
       38
       +
         'America/Los_Angeles',

     

       39
       39
       +
         'America/New_York',

     

       40
       40
       +
         'Europe/London',

     

       41
       41
       +
         'Europe/Paris',

     

       42
       42
       +
         'Asia/Dubai',

     

       43
       43
       +
         'Asia/Bangkok',

     

       44
       44
       +
         'Asia/Tokyo',

     

       45
       45
       +
         'Australia/Sydney'

     

       46
       46
       +
       ])

     

       47
       47
       +
       

     

       48
       48
       +
       const toTZ = (tz) => {

     

       49
       49
       +
         return origDateTime.value?.tz(tz).format('([UTC]Z) [<br>] L LT')

     

       50
       50
       +
       }

     

       26
       51
        
       

     

       27
       52
        
       definePageMeta({ 

     

       28
       53
        
         validate: async (route) => {

     

       29
       54
        
           // Check if the id is made up of a date

     

       30
       30
       -
           return /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\+\d{2}:\d{2}$/.test(route.params.id)

     

       55
       55
       +
           return /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}[\+|-]\d{4}$/.test(route.params.id)

     

       31
       56
        
         }

     

       32
       57
        
       })

     

       33
       58
        
       

     

       34
       59
        
       onMounted(() => {

     

       35
       35
       -
         console.log('yo')

     

       36
       36
       -
         origDateTime.value = route.params.id

     

       60
       60
       +
         const dt = dayjs(route.params.id, 'YYYY-MM-DDTHH:mmZZ')

     

       61
       61
       +
         origDateTime.value = dt

     

       62
       62
       +
       

     

       63
       63
       +
         if (process.client) {

     

       64
       64
       +
           const local = dt.local()

     

       65
       65
       +
       

     

       66
       66
       +
           localDateTime.value = local.format('L LT')

     

       67
       67
       +
       

     

       68
       68
       +
           // Sorry that this is horrible

     

       69
       69
       +
           const diff = (parseInt(local.format('ZZ')) - parseInt(route.params.id.slice(-5))).toString()

     

       70
       70
       +
           const h = diff.slice(0, diff.length - 2)

     

       71
       71
       +
           const m = diff.slice(-2)

     

       72
       72
       +
       

     

       73
       73
       +
           if (h === '' && m === '0') {

     

       74
       74
       +
             tzDiff.value = null

     

       75
       75
       +
           } else if (h.startsWith('-') && h.length == 2) {

     

       76
       76
       +
             tzDiff.value = '-0' + h.slice(1) + ':' + m

     

       77
       77
       +
           } else if (h.length == 1) {

     

       78
       78
       +
             tzDiff.value = '+0' + h + ':' + m

     

       79
       79
       +
           } else if (h === '') {

     

       80
       80
       +
             tzDiff.value = '+00:' + m

     

       81
       81
       +
           } else if (!h.startsWith('-')) {

     

       82
       82
       +
             tzDiff.value = '+' + h + ':' + m

     

       83
       83
       +
           } else {

     

       84
       84
       +
             tzDiff.value = h + ':' + m

     

       85
       85
       +
           }

     

       86
       86
       +
       

     

       87
       87
       +
           // They could have done something to detect to/from by itself...

     

       88
       88
       +
           if (local.toDate().getTime() > Date.now()) {

     

       89
       89
       +
             // For some reason, it acts like fromNow (in French at least)

     

       90
       90
       +
             relativeTime.value = local.toNow(true)

     

       91
       91
       +
           } else {

     

       92
       92
       +
             relativeTime.value = local.fromNow()

     

       93
       93
       +
           }

     

       94
       94
       +
         }

     

       37
       95
        
       })

     

       38
       38
       -
       </script>
     

       96
       96
       +
       </script>

     

       97
       97
       +
       

     

       98
       98
       +
       <style lang="scss">

     

       99
       99
       +
       .tz-diff {

     

       100
       100
       +
         text-align: center;

     

       101
       101
       +
       }

     

       102
       102
       +
       

     

       103
       103
       +
       .tz-table {

     

       104
       104
       +
         display: grid;

     

       105
       105
       +
         grid-template-columns: repeat(1, 1fr);

     

       106
       106
       +
         row-gap: 1rem;

     

       107
       107
       +
         column-gap: 1rem;

     

       108
       108
       +
         text-align: center;

     

       109
       109
       +
       

     

       110
       110
       +
         @media screen and (min-width: 440px) {

     

       111
       111
       +
           grid-template-columns: repeat(2, 1fr);

     

       112
       112
       +
         }

     

       113
       113
       +
       

     

       114
       114
       +
         @media screen and (min-width: 630px) {

     

       115
       115
       +
           grid-template-columns: repeat(3, 1fr);

     

       116
       116
       +
         }

     

       117
       117
       +
       

     

       118
       118
       +
         @media screen and (min-width: 820px) {

     

       119
       119
       +
           grid-template-columns: repeat(4, 1fr);

     

       120
       120
       +
         }

     

       121
       121
       +
       }

     

       122
       122
       +
       </style>

+132 -7

pages/index.vue

···

       1
       1
        
       <template>

     

       2
       2
       -
         <h1>Time Zones are hard</h1>

     

       3
       2
        
         <p>

     

       4
       3
        
           Fill out this form to make a page that shows a set date and time in the visitor's time zone.

     

       5
       4
        
           It will also show the time in other popular time zones.

     

       6
       5
        
         </p>

     

       7
       7
       -
         <form>

     

       8
       8
       -
           <label for="datetime">Date and Time</label>

     

       9
       9
       -
           <input type="datetime-local" id="datetime" />

     

       6
       6
       +
         <form class="creation-form">

     

       7
       7
       +
           <label for="datetime">Date and Time:</label>&nbsp;

     

       8
       8
       +
           <input required type="datetime-local" id="datetime" v-model="selectedDT" />

     

       9
       9
       +
       

     

       10
       10
        
           <br/>

     

       11
       11
       -
           <button type="submit">Submit</button>

     

       11
       11
       +
       

     

       12
       12
       +
           <label for="timezone">Time Zone:</label>&nbsp;

     

       13
       13
       +
           <select required id="timezone" v-model="selectedTZ">

     

       14
       14
       +
             <option selected :value="userTZ">Your time zone: {{ userTZ }}</option>

     

       15
       15
       +
             <optgroup label="General" v-if="tzList.general.length > 0">

     

       16
       16
       +
               <option

     

       17
       17
       +
                 v-for="tz in tzList.general"

     

       18
       18
       +
                 :key="tz"

     

       19
       19
       +
                 :value="tz">

     

       20
       20
       +
                 {{ tz }} ({{ getOffset(tz) }})</option>

     

       21
       21
       +
             </optgroup>

     

       22
       22
       +
             <optgroup label="GMT/UTC" v-if="tzList.gmt.length > 0">

     

       23
       23
       +
               <option

     

       24
       24
       +
                 v-for="tz in tzList.gmt"

     

       25
       25
       +
                 :key="tz"

     

       26
       26
       +
                 :value="tz">

     

       27
       27
       +
                 {{ tz.replace('Etc/', '').replace('UTC', 'GMT/UTC') }}</option>

     

       28
       28
       +
             </optgroup>

     

       29
       29
       +
             <optgroup label="Region">

     

       30
       30
       +
               <option

     

       31
       31
       +
                 v-for="tz in tzList.region"

     

       32
       32
       +
                 :key="tz"

     

       33
       33
       +
                 :value="tz">

     

       34
       34
       +
                 {{ tz }}</option>

     

       35
       35
       +
             </optgroup>

     

       36
       36
       +
           </select>

     

       37
       37
       +
       

     

       38
       38
       +
           <br/><br/>

     

       39
       39
       +
       

     

       40
       40
       +
           <button type="button" @click="goToResult">Submit</button>

     

       12
       41
        
         </form>

     

       13
       42
        
       </template>

     

       14
       43
        
       

     

       15
       15
       -
       <style lang="scss">

     

       16
       16
       -
       </style>
     

       44
       44
       +
       <script setup>

     

       45
       45
       +
       const dayjs = useDayjs()

     

       46
       46
       +
       

     

       47
       47
       +
       const goToResult = () => {

     

       48
       48
       +
         if (document.querySelector('.creation-form').checkValidity()) {

     

       49
       49
       +
           const dt = dayjs.tz(selectedDT.value, selectedTZ.value).format('YYYY-MM-DDTHH:mmZZ')

     

       50
       50
       +
       

     

       51
       51
       +
           // I have to do a whole window.location here because it wont take my param value

     

       52
       52
       +
           // into account with the client-side routing

     

       53
       53
       +
           window.location = `/${dt}`

     

       54
       54
       +
         } else {

     

       55
       55
       +
           alert('Please make sure you\'ve completed the form.')

     

       56
       56
       +
         }

     

       57
       57
       +
       }

     

       58
       58
       +
       

     

       59
       59
       +
       const getOffset = (tz) => {

     

       60
       60
       +
         const offset = dayjs().tz(tz).utcOffset() / 60

     

       61
       61
       +
         return offset >= 0 ? 'UTC+' + offset : 'UTC' + offset

     

       62
       62
       +
       }

     

       63
       63
       +
       

     

       64
       64
       +
       // Those two Arrays are not present in Chrome btw

     

       65
       65
       +
       // I've also added extra values, just in case

     

       66
       66
       +
       const generalTZ = [

     

       67
       67
       +
         'HST',

     

       68
       68
       +
         'PST',

     

       69
       69
       +
         'PDT',

     

       70
       70
       +
         'PST8PDT',

     

       71
       71
       +
         'MST',

     

       72
       72
       +
         'MST7MDT',

     

       73
       73
       +
         'CST',

     

       74
       74
       +
         'CDT',

     

       75
       75
       +
         'CST6CDT',

     

       76
       76
       +
         'EST',

     

       77
       77
       +
         'EST5EDT',

     

       78
       78
       +
         'WET',

     

       79
       79
       +
         'BST',

     

       80
       80
       +
         'CET',

     

       81
       81
       +
         'MET',

     

       82
       82
       +
         'EET',

     

       83
       83
       +
         'JST'

     

       84
       84
       +
       ]

     

       85
       85
       +
       const gmtTZ = [

     

       86
       86
       +
         'Etc/GMT-14',

     

       87
       87
       +
         'Etc/GMT-13',

     

       88
       88
       +
         'Etc/GMT-12',

     

       89
       89
       +
         'Etc/GMT-11',

     

       90
       90
       +
         'Etc/GMT-10',

     

       91
       91
       +
         'Etc/GMT-9',

     

       92
       92
       +
         'Etc/GMT-8',

     

       93
       93
       +
         'Etc/GMT-7',

     

       94
       94
       +
         'Etc/GMT-6',

     

       95
       95
       +
         'Etc/GMT-5',

     

       96
       96
       +
         'Etc/GMT-4',

     

       97
       97
       +
         'Etc/GMT-3',

     

       98
       98
       +
         'Etc/GMT-2',

     

       99
       99
       +
         'Etc/GMT-1',

     

       100
       100
       +
         'UTC',

     

       101
       101
       +
         'Etc/GMT+1',

     

       102
       102
       +
         'Etc/GMT+2',

     

       103
       103
       +
         'Etc/GMT+3',

     

       104
       104
       +
         'Etc/GMT+4',

     

       105
       105
       +
         'Etc/GMT+5',

     

       106
       106
       +
         'Etc/GMT+6',

     

       107
       107
       +
         'Etc/GMT+7',

     

       108
       108
       +
         'Etc/GMT+8',

     

       109
       109
       +
         'Etc/GMT+9',

     

       110
       110
       +
         'Etc/GMT+10',

     

       111
       111
       +
         'Etc/GMT+11',

     

       112
       112
       +
         'Etc/GMT+12'

     

       113
       113
       +
       ]

     

       114
       114
       +
       

     

       115
       115
       +
       const userTZ = ref('...')

     

       116
       116
       +
       const tzList = ref({

     

       117
       117
       +
         general: [],

     

       118
       118
       +
         gmt: [],

     

       119
       119
       +
         region: []

     

       120
       120
       +
       })

     

       121
       121
       +
       

     

       122
       122
       +
       const selectedDT = ref()

     

       123
       123
       +
       const selectedTZ = ref()

     

       124
       124
       +
       

     

       125
       125
       +
       onMounted(() => {

     

       126
       126
       +
         if (process.client) {

     

       127
       127
       +
           const allTZ = Intl.supportedValuesOf('timeZone')

     

       128
       128
       +
           tzList.value.general = generalTZ.filter(

     

       129
       129
       +
             (tz) => allTZ.find(i => i === tz)

     

       130
       130
       +
           )

     

       131
       131
       +
           tzList.value.gmt = gmtTZ.filter(

     

       132
       132
       +
             (tz) => allTZ.find(i => i === tz)

     

       133
       133
       +
           )

     

       134
       134
       +
           tzList.value.region = allTZ.filter(

     

       135
       135
       +
             (tz) => tz.includes('/') && !tz.includes('Etc/')

     

       136
       136
       +
           )

     

       137
       137
       +
       

     

       138
       138
       +
           userTZ.value = selectedTZ.value = dayjs.tz.guess()

     

       139
       139
       +
         }

     

       140
       140
       +
       })

     

       141
       141
       +
       </script>

+80

styles/app.scss

···

       1
       1
       +
       body {

     

       2
       2
       +
         background-color: #efefef;

     

       3
       3
       +
         color: #000;

     

       4
       4
       +
         font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

     

       5
       5
       +
         margin: 0;

     

       6
       6
       +
       }

     

       7
       7
       +
       

     

       8
       8
       +
       #__nuxt {

     

       9
       9
       +
         display: flex;

     

       10
       10
       +
         flex-direction: column;

     

       11
       11
       +
         margin: 0 auto;

     

       12
       12
       +
         max-width: 900px;

     

       13
       13
       +
         min-height: 100vh;

     

       14
       14
       +
       }

     

       15
       15
       +
       

     

       16
       16
       +
       header {

     

       17
       17
       +
         background: white;

     

       18
       18
       +
         border-radius: 10px;

     

       19
       19
       +
         font-size: 1.5rem;

     

       20
       20
       +
         margin: 1rem 0.5rem 0;

     

       21
       21
       +
         padding: 1rem 1.5rem;

     

       22
       22
       +
         position: sticky;

     

       23
       23
       +
         top: 1rem;

     

       24
       24
       +
         z-index: 999;

     

       25
       25
       +
       

     

       26
       26
       +
         @media screen and (min-width: 500px) {

     

       27
       27
       +
           font-size: 2rem;

     

       28
       28
       +
         }

     

       29
       29
       +
       

     

       30
       30
       +
         a {

     

       31
       31
       +
           color: inherit;

     

       32
       32
       +
           text-decoration: none;

     

       33
       33
       +
         }

     

       34
       34
       +
       

     

       35
       35
       +
         nav {

     

       36
       36
       +
           align-items: center;

     

       37
       37
       +
           display: flex;

     

       38
       38
       +
       

     

       39
       39
       +
           .nav-spacer {

     

       40
       40
       +
             flex: 1;

     

       41
       41
       +
           }

     

       42
       42
       +
         

     

       43
       43
       +
           .theme-toggle {

     

       44
       44
       +
             cursor: pointer;

     

       45
       45
       +
           }

     

       46
       46
       +
         }

     

       47
       47
       +
       

     

       48
       48
       +
       }

     

       49
       49
       +
       

     

       50
       50
       +
       main {

     

       51
       51
       +
         flex: 1;

     

       52
       52
       +
         padding: 1rem 2rem;

     

       53
       53
       +
       

     

       54
       54
       +
         h1 {

     

       55
       55
       +
           margin: 1rem 0;

     

       56
       56
       +
           text-align: center;

     

       57
       57
       +
         }

     

       58
       58
       +
       

     

       59
       59
       +
         button {

     

       60
       60
       +
           cursor: pointer;

     

       61
       61
       +
         }

     

       62
       62
       +
       }

     

       63
       63
       +
       

     

       64
       64
       +
       footer {

     

       65
       65
       +
         color: gray;

     

       66
       66
       +
         font-size: 0.7rem;

     

       67
       67
       +
         padding: 1rem;

     

       68
       68
       +
         text-align: center;

     

       69
       69
       +
       }

     

       70
       70
       +
       

     

       71
       71
       +
       html.dark-mode {

     

       72
       72
       +
         body {

     

       73
       73
       +
           background-color: #111;

     

       74
       74
       +
           color: #fff;

     

       75
       75
       +
         }

     

       76
       76
       +
       

     

       77
       77
       +
         header {

     

       78
       78
       +
           background: #000;

     

       79
       79
       +
         }

     

       80
       80
       +
       }

+10 -15

yarn.lock

···

       1054
       1054
        
           slash "^4.0.0"

     

       1055
       1055
        
       

     

       1056
       1056
        
       "@rollup/plugin-commonjs@^25.0.2":

     

       1057
       1057
       -
         version "25.0.3"

     

       1058
       1058
       -
         resolved "https://registry.yarnpkg.com/@rollup/plugin-commonjs/-/plugin-commonjs-25.0.3.tgz#eb5217ebae43d63a172b516655be270ed258bdcc"

     

       1059
       1059
       -
         integrity sha512-uBdtWr/H3BVcgm97MUdq2oJmqBR23ny1hOrWe2PKo9FTbjsGqg32jfasJUKYAI5ouqacjRnj65mBB/S79F+GQA==

     

       1057
       1057
       +
         version "25.0.4"

     

       1058
       1058
       +
         resolved "https://registry.yarnpkg.com/@rollup/plugin-commonjs/-/plugin-commonjs-25.0.4.tgz#a7547a0c4ec3fa79818eb313e1de0023e548f4e6"

     

       1059
       1059
       +
         integrity sha512-L92Vz9WUZXDnlQQl3EwbypJR4+DM2EbsO+/KOcEkP4Mc6Ct453EeDB2uH9lgRwj4w5yflgNpq9pHOiY8aoUXBQ==

     

       1060
       1060
        
         dependencies:

     

       1061
       1061
        
           "@rollup/pluginutils" "^5.0.1"

     

       1062
       1062
        
           commondir "^1.0.1"

     
···

       1213
       1213
        
         dependencies:

     

       1214
       1214
        
           "@types/node" "*"

     

       1215
       1215
        
       

     

       1216
       1216
       -
       "@types/node@*":

     

       1217
       1217
       -
         version "20.4.9"

     

       1218
       1218
       -
         resolved "https://registry.yarnpkg.com/@types/node/-/node-20.4.9.tgz#c7164e0f8d3f12dfae336af0b1f7fdec8c6b204f"

     

       1219
       1219
       -
         integrity sha512-8e2HYcg7ohnTUbHk8focoklEQYvemQmu9M/f43DZVx43kHn0tE3BY/6gSDxS7k0SprtS0NHvj+L80cGLnoOUcQ==

     

       1220
       1220
       -
       

     

       1221
       1221
       -
       "@types/node@^18.17.3":

     

       1222
       1222
       -
         version "18.17.4"

     

       1223
       1223
       -
         resolved "https://registry.yarnpkg.com/@types/node/-/node-18.17.4.tgz#bf8ae9875528929cc9930dc3f066cd0481fe1231"

     

       1224
       1224
       -
         integrity sha512-ATL4WLgr7/W40+Sp1WnNTSKbgVn6Pvhc/2RHAdt8fl6NsQyp4oPCi2eKcGOvA494bwf1K/W6nGgZ9TwDqvpjdw==

     

       1216
       1216
       +
       "@types/node@*", "@types/node@^20.4.10":

     

       1217
       1217
       +
         version "20.4.10"

     

       1218
       1218
       +
         resolved "https://registry.yarnpkg.com/@types/node/-/node-20.4.10.tgz#73c9480791e3ddeb4887a660fc93a7f59353ad45"

     

       1219
       1219
       +
         integrity sha512-vwzFiiy8Rn6E0MtA13/Cxxgpan/N6UeNYR9oUu6kuJWxu6zCk98trcDp8CBhbtaeuq9SykCmXkFr2lWLoPcvLg==

     

       1225
       1220
        
       

     

       1226
       1221
        
       "@types/resolve@1.20.2":

     

       1227
       1222
        
         version "1.20.2"

     
···

       5948
       5943
        
           vscode-uri "^3.0.2"

     

       5949
       5944
        
       

     

       5950
       5945
        
       vite-plugin-inspect@^0.7.35:

     

       5951
       5951
       -
         version "0.7.36"

     

       5952
       5952
       -
         resolved "https://registry.yarnpkg.com/vite-plugin-inspect/-/vite-plugin-inspect-0.7.36.tgz#736be99c2b8830902b5bee06d2f14b62cb4067db"

     

       5953
       5953
       -
         integrity sha512-zdFTvLAU0Xb0C9B+JepUN353bZxBWqgkE71URe/9kfM38r6PtR5y2mo0CH1lBuX1DHNhKumLMUGXkvJ+z2OJ4w==

     

       5946
       5946
       +
         version "0.7.37"

     

       5947
       5947
       +
         resolved "https://registry.yarnpkg.com/vite-plugin-inspect/-/vite-plugin-inspect-0.7.37.tgz#80f4b0f661831300f880418b450f70c4963c7bc0"

     

       5948
       5948
       +
         integrity sha512-cRHzaE8g8/UUK0hA5DunAXiN3eJnq7Dpcu2bVf5dCRj/MYBKGeAv0Z27vYMhm2F/oeE5aG3+oYF4tkdhOlpXxg==

     

       5954
       5949
        
         dependencies:

     

       5955
       5950
        
           "@antfu/utils" "^0.7.5"

     

       5956
       5951
        
           "@rollup/pluginutils" "^5.0.2"