Hugging Face's logo

Spaces:
CYV28
/
RetinAI
Sleeping

App Files Community
ViannyCruz commited on
Commit
2fc85e6
·
verified ·
1 Parent(s): 8765339

Update web/index.html

Browse files
Files changed (1) hide show
  1. web/index.html +31 -33
web/index.html CHANGED
@@ -5,6 +5,13 @@
5
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6
  <meta name="description" content="">
7
  <meta name="author" content="">
 
 
 
 
 
 
 
8
  <link rel="icon" href="favicon.ico">
9
  <title>Dashboard</title>
10
  <link rel="stylesheet" href="css/simplebar.css">
@@ -20,13 +27,7 @@
20
  <link rel="stylesheet" href="css/app-light.css" id="lightTheme">
21
  <link rel="stylesheet" href="css/app-dark.css" id="darkTheme" disabled
22
 
23
- <script>
24
- (function() {
25
- if (localStorage.getItem('theme') === 'dark') {
26
- document.documentElement.style.visibility = 'hidden';
27
- }
28
- })();
29
- </script>
30
  </head>
31
  <body class="vertical light ">
32
  <div class="wrapper">
@@ -1997,14 +1998,25 @@
1997
 
1998
  <script>
1999
  (function () {
2000
- // 1. Aplicar tema guardado inmediatamente
2001
- const savedTheme = localStorage.getItem('theme');
2002
- if (savedTheme === 'dark') {
2003
- document.getElementById('lightTheme').disabled = true;
2004
- document.getElementById('darkTheme').disabled = false;
 
 
 
 
 
 
2005
  }
2006
 
2007
- // 2. Overlay de transición
 
 
 
 
 
2008
  const overlay = document.createElement('div');
2009
  overlay.id = 'theme-overlay';
2010
  overlay.style.cssText = [
@@ -2015,15 +2027,14 @@
2015
  document.body.appendChild(overlay);
2016
 
2017
  function switchTheme() {
2018
- const lightTheme = document.getElementById('lightTheme');
2019
- const darkTheme = document.getElementById('darkTheme');
2020
- const goingDark = !darkTheme.disabled;
2021
  overlay.style.background = goingDark ? '#fff' : '#1a1a2e';
2022
  overlay.style.opacity = '1';
2023
  setTimeout(function () {
2024
- lightTheme.disabled = !lightTheme.disabled;
2025
- darkTheme.disabled = !darkTheme.disabled;
2026
- localStorage.setItem('theme', darkTheme.disabled ? 'light' : 'dark');
2027
  setTimeout(function () { overlay.style.opacity = '0'; }, 50);
2028
  }, 180);
2029
  }
@@ -2040,20 +2051,7 @@
2040
  });
2041
  });
2042
  })();
2043
-
2044
- function applyTheme(theme) {
2045
- const lightTheme = document.getElementById('lightTheme');
2046
- const darkTheme = document.getElementById('darkTheme');
2047
- if (theme === 'dark') {
2048
- lightTheme.disabled = true;
2049
- darkTheme.disabled = false;
2050
- } else {
2051
- lightTheme.disabled = false;
2052
- darkTheme.disabled = true;
2053
- }
2054
- // 👇 Revelar la página una vez aplicado el tema
2055
- document.documentElement.style.visibility = 'visible';
2056
- }
2057
  </script>
 
2058
  </body>
2059
  </html>
 
5
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6
  <meta name="description" content="">
7
  <meta name="author" content="">
8
+ <script>
9
+ (function() {
10
+ if (localStorage.getItem('theme') === 'dark') {
11
+ document.documentElement.style.visibility = 'hidden';
12
+ }
13
+ })();
14
+ </script>
15
  <link rel="icon" href="favicon.ico">
16
  <title>Dashboard</title>
17
  <link rel="stylesheet" href="css/simplebar.css">
 
27
  <link rel="stylesheet" href="css/app-light.css" id="lightTheme">
28
  <link rel="stylesheet" href="css/app-dark.css" id="darkTheme" disabled
29
 
30
+
 
 
 
 
 
 
31
  </head>
32
  <body class="vertical light ">
33
  <div class="wrapper">
 
1998
 
1999
  <script>
2000
  (function () {
2001
+ function applyTheme(theme) {
2002
+ const lightTheme = document.getElementById('lightTheme');
2003
+ const darkTheme = document.getElementById('darkTheme');
2004
+ if (theme === 'dark') {
2005
+ lightTheme.disabled = true;
2006
+ darkTheme.disabled = false;
2007
+ } else {
2008
+ lightTheme.disabled = false;
2009
+ darkTheme.disabled = true;
2010
+ }
2011
+ document.documentElement.style.visibility = 'visible';
2012
  }
2013
 
2014
+ applyTheme(localStorage.getItem('theme') || 'light');
2015
+
2016
+ window.addEventListener('storage', function(e) {
2017
+ if (e.key === 'theme') applyTheme(e.newValue);
2018
+ });
2019
+
2020
  const overlay = document.createElement('div');
2021
  overlay.id = 'theme-overlay';
2022
  overlay.style.cssText = [
 
2027
  document.body.appendChild(overlay);
2028
 
2029
  function switchTheme() {
2030
+ const darkTheme = document.getElementById('darkTheme');
2031
+ const goingDark = darkTheme.disabled;
 
2032
  overlay.style.background = goingDark ? '#fff' : '#1a1a2e';
2033
  overlay.style.opacity = '1';
2034
  setTimeout(function () {
2035
+ const newTheme = goingDark ? 'dark' : 'light';
2036
+ applyTheme(newTheme);
2037
+ localStorage.setItem('theme', newTheme);
2038
  setTimeout(function () { overlay.style.opacity = '0'; }, 50);
2039
  }, 180);
2040
  }
 
2051
  });
2052
  });
2053
  })();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2054
  </script>
2055
+
2056
  </body>
2057
  </html>