falcon-themes.lib

<!-- FALCON THEMES LIBRARY v2.2 -->
<!--
  Usage: 
    - Themes are set automatically on DOMContentLoaded
    - setTheme(): Loads the theme from USER_SETTINGS
-->

<!-- CSS THEMES -->
<style>
  :root, :root.Falcon-Light {
    color-scheme: light;
    --primary-color: #4db6ac; /* Teal 300 */
    --accent-color: #80cbc4; /* Teal 200 */
    --page-background-color: #eeeeee; /* Gray 200 */
    --page-accent-color: white;
    --menu-icon-color: black;
    --element-background-color: white;
    --element-accent-color: #e0e0e0; /* Gray 300 */
    --text-primary-color: black;
    --text-accent-color: #757575; /* Gray 600 */ 
    --warning-color: #ff9800; /* Orange 500 */
    --error-color: #f44336; /* Red 500 */
    --green: #c8e6c9; /* Green 100 */
    --orange: #ffe0b2; /* Orange 100 */
    --red: #ffcdd2; /* Red 100 */
    --blue: #bbdefb; /* Blue 100 */
    --pink: #f8bbd0; /* Pink 100 */
    --gray: #e0e0e0; /* Gray 300 */
  }

  :root.Falcon-Dark {
    color-scheme: dark;
    --primary-color: #00796b; /* Teal 700 */
    --accent-color: #00897b; /* Teal 600 */
    --page-background-color: #2e2e2e; /* Same color as dark mode select */ 
    --page-accent-color: #212121; /* Gray 900 */
    --menu-icon-color: white;
    --element-background-color: #121212; /* Gray Custom */
    --element-accent-color: #424242; /* Gray 800 */
    --text-primary-color: white;
    --text-accent-color: #bdbdbd; /* Gray 400 */
    --warning-color: #ff9800; /* Orange 500 */
    --error-color: #f44336; /* Red 500 */
    --green: #1b5e20; /* Green 900 */
    --orange: #e65100; /* Orange 900 */
    --red: #b71c1c; /* Red 900 */
    --blue: #0d47a1; /* Blue 900 */
    --pink: #880e4f; /* Pink 900 */
    --gray: #616161; /* Gray 700 */
  }

  :root.Flamingo-Nights {
    color-scheme: dark;
    --primary-color: #ff4081; /* Pink A200 */
    --accent-color: #ff80ab; /* Pink A100 */
    --page-background-color: #2e2e2e; /* Same color as dark mode select */
    --page-accent-color: #212121; /* Gray 900 */
    --menu-icon-color: white;
    --element-background-color: #121212; /* Gray Custom */
    --element-accent-color: #424242; /* Gray 800 */
    --text-primary-color: white;
    --text-accent-color: #bdbdbd; /* Gray 400 */    
    --warning-color: #ff9800; /* Orange 500 */
    --error-color: #f44336; /* Red 500 */
    --green: #1b5e20; /* Green 900 */
    --orange: #e65100; /* Orange 900 */
    --red: #b71c1c; /* Red 900 */
    --blue: #0d47a1; /* Blue 900 */
    --pink: #880e4f; /* Pink 900 */
    --gray: #616161; /* Gray 700 */
  }
  
  :root.Purple-Lightning {
    color-scheme: dark;
    --primary-color: #6200ea; /* Deep Purple A700 */
    --accent-color: #7c4dff; /* Deep Purple A200 */
    --page-background-color: #2e2e2e; /* Same color as dark mode select */
    --page-accent-color: #212121; /* Gray 900 */
    --menu-icon-color: white;
    --element-background-color: #121212; /* Gray Custom */
    --element-accent-color: #424242; /* Gray 800 */
    --text-primary-color: white;
    --text-accent-color: #bdbdbd; /* Gray 400 */    
    --warning-color: #ff9800; /* Orange 500 */
    --error-color: #f44336; /* Red 500 */
    --green: #1b5e20; /* Green 900 */
    --orange: #e65100; /* Orange 900 */
    --red: #b71c1c; /* Red 900 */
    --blue: #0d47a1; /* Blue 900 */
    --pink: #880e4f; /* Pink 900 */
    --gray: #616161; /* Gray 700 */
  }

  :root.Monochrome {
    color-scheme: light;
    --primary-color: #90a4ae; /* Blue Grey 300 */
    --accent-color: #b0bec5; /* Blue Grey 200 */
    --page-background-color: #cfd8dc; /* Blue Grey 100 */
    --page-accent-color: #eceff1; /* Blue Grey 50 */
    --menu-icon-color: black;
    --element-background-color: white;
    --element-accent-color: #e0e0e0; /* Gray 300 */
    --text-primary-color: black;
    --text-accent-color: #757575; /* Gray 600 */ 
    --warning-color: #ff9800; /* Orange 500 */
    --error-color: #f44336; /* Red 500 */
    --green: #c8e6c9; /* Green 100 */
    --orange: #ffe0b2; /* Orange 100 */
    --red: #ffcdd2; /* Red 100 */
    --blue: #bbdefb; /* Blue 100 */
    --pink: #f8bbd0; /* Pink 100 */
    --gray: #e0e0e0; /* Gray 300 */
  }

  :root.Yuzu {
    color-scheme: light;
    --primary-color: #FFD54F; /* Amber 300 */
    --accent-color: #FFE082; /* Amber 200 */
    --page-background-color: #FFECB3; /* Amber 100 */
    --page-accent-color: #FFF8E1; /* Amber 50 */
    --menu-icon-color: black;
    --element-background-color: white;
    --element-accent-color: #e0e0e0; /* Gray 300 */
    --text-primary-color: black;
    --text-accent-color: #757575; /* Gray 600 */ 
    --warning-color: #ff9800; /* Orange 500 */
    --error-color: #f44336; /* Red 500 */
    --green: #c8e6c9; /* Green 100 */
    --orange: #ffe0b2; /* Orange 100 */
    --red: #ffcdd2; /* Red 100 */
    --blue: #bbdefb; /* Blue 100 */
    --pink: #f8bbd0; /* Pink 100 */
    --gray: #e0e0e0; /* Gray 300 */
  }

  /* Highlighted text classes */
  .highlight-green {
    background-color: var(--green);
    margin: 10px 10px 0 10px;
    padding: 5px;
    border-radius: 10px;
    border: 2px solid var(--element-accent-color);
  }

  .highlight-orange {
    background-color: var(--orange);
    margin: 10px 10px 0 10px;
    padding: 5px;
    border-radius: 10px;
    border: 2px solid var(--element-accent-color);
  }

  .highlight-red {
    background-color: var(--red);
    margin: 10px 10px 0 10px;
    padding: 5px;
    border-radius: 10px;
    border: 2px solid var(--element-accent-color);
  }

  .highlight-gray {
    background-color: var(--gray);
    margin: 10px 10px 0 10px;
    padding: 5px;
    border-radius: 10px;
    border: 2px solid var(--element-accent-color);
  }

  .highlight-none {
    background-color: var(--element-background-color);
    margin: 10px 10px 0 10px;
    padding: 5px;
    border-radius: 10px;
    border: 2px solid var(--element-accent-color);
  }
</style>

<!-- JAVASCRIPT FUNCTIONS -->
<script type="text/javascript">
  
  document.addEventListener('DOMContentLoaded', function() {
    setTheme();
  });

  function setTheme() {
    const root = document.querySelector(':root');

    // Define a dictionary mapping theme names to class names
    const themeClasses = {
      'falconLight': 'Falcon-Light',
      'falconDark': 'Falcon-Dark',
      'flamingoNights': 'Flamingo-Nights',
      'monochrome': 'Monochrome',
      'purpleLightning': 'Purple-Lightning',
      'yuzu': 'Yuzu'
    };

    // Remove all theme classes from root element
    Object.values(themeClasses).forEach(className => {
      root.classList.remove(className);
    });

    // Check for custom theme
    if (USER_SETTINGS.theme === 'custom') {
      if (USER_SETTINGS.customThemeType === 'light') {
        root.classList.add(themeClasses['falconLight']);
      } else {
        root.classList.add(themeClasses['falconDark']);
      }

      // Apply custom theme colors
      root.style.setProperty('--primary-color', USER_SETTINGS.customThemePrimaryColor);
      root.style.setProperty('--accent-color', USER_SETTINGS.customThemeAccentColor);
    } else {
      // Remove custom theme colors if any
      root.style.removeProperty('--primary-color');
      root.style.removeProperty('--accent-color');

      // Add the selected theme to the root element
      root.classList.add(themeClasses[USER_SETTINGS.theme]);
    }
  }

  // Return colors for Google Charts, color values should not have leading '#'
  function getChartTheme() {
    const theme = USER_SETTINGS.theme;
    const barsLight = [
      'c8e6c9', // Green 100
      'ffe0b2', // Orange 100
      'ffcdd2', // Red 100
      'bbdefb', // Blue 100
      'f8bbd0', // Pink 100
      'e0e0e0', // Grey 300
      'e1bee7', // Purple 100
      'd1c4e9', // Deep Purple 100
      'c5cae9', // Indigo 100
      'b3e5fc', // Light Blue 100
      'b2ebf2', // Cyan 100
      'b2dfdb', // Teal 100
      'dcedc8', // Light Green 100
      'f0f4c3', // Lime 100
      'fff9c4', // Yellow 100
      'ffecb3', // Amber 100
      'ffccbc', // Deep Orange 100
      'd7ccc8', // Brown 100
      'cfd8dc' // Blue Grey 100
    ];
    
    const barsDark = [
      '1b5e20', // Green 900
      'e65100', // Orange 900
      'b71c1c', // Red 900
      '0d47a1', // Blue 900
      '880e4f', // Pink 900
      '616161', // Grey 700
      '4a148c', // Purple 900
      '311b92', // Deep Purple 900
      '1a237e', // Indigo 900
      '01579b', // Light Blue 900
      '006064', // Cyan 900
      '004d40', // Teal 900
      '33691e', // Light Green 900
      '827717', // Lime 900
      'f57f17', // Yellow 900
      'ff6f00', // Amber 900
      'bf360c', // Deep Orange 900
      '3e2723', // Brown 900
      '263238' // Blue Grey 900
    ];

    switch (theme) {
      case 'falconLight':
        return {
          backgroundColor: 'ffffff',
          text: '000000',
          bars: barsLight,
          gridLines: 'e0e0e0'
        };
      case 'falconDark':
        return {
          background: '121212',
          text: 'ffffff',
          bars: barsDark,
          gridLines: '424242'
        };
      case 'flamingoNights':
        return {
          background: '121212',
          text: 'ffffff',
          bars: barsDark,
          gridLines: '424242'
        };
      case 'monochrome':
        return {
          background: 'ffffff',
          text: '000000',
          bars: barsLight,
          gridLines: 'e0e0e0'
        };
      case 'purpleLightning':
        return {
          background: '121212',
          text: 'ffffff',
          bars: barsDark,
          gridLines: '424242'
        };
      case 'yuzu':
        return {
          background: 'ffffff',
          text: '000000',
          bars: barsLight,
          gridLines: 'e0e0e0'
        };
      case 'custom':
        let backgroundColor;
        let textColor;
        let barColor;
        let gridlinesColor;

        if (USER_SETTINGS.customThemeType === 'light') {
          backgroundColor = 'ffffff';
          textColor = '000000';
          barColor = barsLight;
          gridLines = 'e0e0e0';
        }
        if (USER_SETTINGS.customThemeType === 'dark') {
          backgroundColor = '121212';
          textColor = 'ffffff';
          barColor = barsDark;
          gridLines = '424242';
        }
        return {
          background: backgroundColor,
          text: textColor,
          bars: barColor,
          gridLines: gridLinesColor
        };
    }
  }
  
</script>