<template>
  <scroll-view style="flex: 1;" :class="isDarkMode? 'dark' : 'light'">
    <view class="box">
      <text :class="isDarkMode? 'darkText' : 'lightText'">当前模式：{{isDarkMode? 'dark' : 'light'}}</text>
    </view>
    <view id="testView" hover-class="btn-hover" class="btn" @click="toggleTheme">
      <text>切换:{{isDarkMode? 'dark' : 'light'}} (应该无背景色)</text>
    </view>

  </scroll-view>
</template>

<script setup>
  const isDarkMode = ref(false)
  const testViewY = ref(0);

  onReady(() => {
    let ele = uni.getElementById('testView') as UniElement
    const currentPage = getCurrentInstance()!.proxy!.$page
    testViewY.value = ele.getBoundingClientRect().y + currentPage.statusBarHeight + 44
		console.log(testViewY.value)
  })

  const toggleTheme = () => {
    isDarkMode.value = !isDarkMode.value
  }

  function getTestViewY() {
    return testViewY.value;
  }

  defineExpose({
    getTestViewY
  })
</script>

<style lang="scss">
  .dark {
    --l-box-bg-color: #000;
  }

  .lightText {
    color: black;
  }

  .darkText {
    color: white;
  }

  .btn {
    height: 50px;
    padding: 10px;
  }

  .btn-hover {
    background-color: var(--l-btn-hover-color, red);
  }

  .box {
    width: 140px;
    height: 140px;
    background-color: var(--l-box-bg-color, #f5f5f5);
  }
</style>