GDL - Global Design Language

Modetoggle 

<div class="c-modetoggle u-inline-flex">

    <label class="u-pointer c-modetoggle__label u-relative" aria-label="Modalità light">
        <input type="radio" value="-1" class="u-none" data-color-scheme="-1">
        <svg class="c-modetoggle__icon u-m-xsmall o-icon o-icon--animated o-icon--sm u-cursor-pointer">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-sun"></use>
        </svg>
    </label>

    <label class="u-pointer c-modetoggle__label u-relative" aria-label="Modalità di sistema">
        <input type="radio" value="0" class="u-none" data-color-scheme="0">
        <svg class="c-modetoggle__icon u-m-xsmall o-icon o-icon--animated o-icon--sm u-cursor-pointer">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-monitor"></use>
        </svg>
    </label>

    <label class="u-pointer c-modetoggle__label u-relative" aria-label="Modalità dark">
        <input type="radio" value="1" class="u-none" data-color-scheme="1">
        <svg class="c-modetoggle__icon u-m-xsmall o-icon o-icon--animated o-icon--sm u-cursor-pointer">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-moon"></use>
        </svg>
    </label>

</div>
 
<div class="c-modetoggle u-inline-flex">
  
  <label class="u-pointer c-modetoggle__label u-relative" aria-label="Modalità light">
    <input type="radio" value="-1" class="u-none" data-color-scheme="-1">
    <svg class="c-modetoggle__icon u-m-xsmall o-icon o-icon--animated o-icon--sm u-cursor-pointer">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-sun"></use>
    </svg>
  </label>
  
  <label class="u-pointer c-modetoggle__label u-relative" aria-label="Modalità di sistema">
    <input type="radio" value="0" class="u-none" data-color-scheme="0">
    <svg class="c-modetoggle__icon u-m-xsmall o-icon o-icon--animated o-icon--sm u-cursor-pointer">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-monitor"></use>
    </svg>
  </label>
  
  <label class="u-pointer c-modetoggle__label u-relative" aria-label="Modalità dark">
    <input type="radio" value="1" class="u-none" data-color-scheme="1">
    <svg class="c-modetoggle__icon u-m-xsmall o-icon o-icon--animated o-icon--sm u-cursor-pointer">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-moon"></use>
    </svg>
  </label>

</div>
 
/* No context defined. */
  • Content: 
    // Name:            modetoggle
// Description:     Switch color scheme from three options: light, dark or system preference 
//
// Component:       `c-modetoggle`
//
// ========================================================================

.c-modetoggle {

  // Custom properties
  // ======================================================================

  --modetoggle-icon: #{$ui-03};
  --modetoggle-icon-active: var(--icon-color);
  --modetoggle-tooltip-bg: var(--background-color);
  --modetoggle-tooltip-color: var(--body-color);
  --modetoggle-tooltip-width: 130px;
  --modetoggle-shadow: var(--global-shadow);

  // ======================================================================= 
 
  .c-menu & {
    --modetoggle-border: #{$menu-divider-color};
    --modetoggle-icon: #{$ui-01-50};
    --modetoggle-icon-active: #{$ui-01};

    border: 1px solid var(--modetoggle-border);
    border-radius: 1rem;
  }

  &__icon { 
    stroke: var(--modetoggle-icon);
    
    &:hover,
    input[type="radio"]:checked + & {
      --modetoggle-icon: var(--modetoggle-icon-active);
    }
    
  }

  &__label {
    &:hover::after {
      position: absolute;
      top: 100%;
      left: calc(50% - (var(--modetoggle-tooltip-width) / 2 ));
      @include z(sky);
      content: attr(aria-label);
      display: block;
      width: var(--modetoggle-tooltip-width);
      padding: $padding-small;
      background-color: var(--modetoggle-tooltip-bg);
      box-shadow: var(--modetoggle-shadow);
      color: var(--modetoggle-tooltip-color);
      text-align: center;
      white-space: nowrap;
      @include type(label-08);
    }
  }
}
  • URL: /components/raw/modetoggle/_modetoggle.scss
  • Filesystem Path: src/lib/components/modetoggle/_modetoggle.scss
  • Size: 1.6 KB
  • Content: 
    ~function( )
  {
    if ( !document.querySelectorAll || !document.body )
      return;


    {
      var fGetColorScheme = function( )
      {
        var tsColorScheme = null;
        
        try
        {
          if ( window.localStorage )
          {
            var sColorScheme = localStorage.getItem( 'color_scheme' ) || null;

            if ( sColorScheme != null )
            {
              tsColorScheme = +sColorScheme || 0;
              
              if ( tsColorScheme > 0 )
                tsColorScheme = 1;
              else if ( tsColorScheme < 0 )
                tsColorScheme = -1;
              else
                tsColorScheme = 0; 
            }
          }
        } catch ( _ ) { }

        return tsColorScheme;
      };
      
      var fSetColorScheme = function( tsColorScheme )
      {
        tsColorScheme = +tsColorScheme || 0;
        
        try
        {
          if ( window.localStorage )
          {
            if ( tsColorScheme )
              localStorage.setItem( 'color_scheme', tsColorScheme > 0 ? +1 : (tsColorScheme < 0 ? -1 : 0) );
            else
              localStorage.removeItem( 'color_scheme' );
              
            return true;
          }
        } catch ( _ ) { }
        
        return false;
      };
    }
    
    
    
    {
      var bDarkMode          = null;
      var fUpdateColorScheme = function( )
      {
        var tsColorScheme = fGetColorScheme() || 0;


        {
          var bColorSchemeUser     = !!tsColorScheme;
          var bColorSchemeDarkMode = tsColorScheme ? tsColorScheme > 0 : bDarkMode;

          document.body.setAttribute( 'data-color-scheme', (bColorSchemeUser ? 'user' : 'system') + '-' + (bColorSchemeDarkMode ? 'dark' : 'light') );
        }
        
        
        document.querySelectorAll('input[data-color-scheme]').forEach( function(oNode)
        {
          var tsColorSchemeNew = (oNode.getAttribute('data-color-scheme') || '').trim();
          tsColorSchemeNew     = +tsColorSchemeNew || 0;
          
          if ( tsColorSchemeNew > 0 )
            tsColorSchemeNew = 1;
          else if ( tsColorSchemeNew < 0 )
            tsColorSchemeNew = -1;
          else
            tsColorSchemeNew = 0;

          oNode.checked = tsColorScheme == tsColorSchemeNew;
        });
        
        return true;
      };
      
      
      
      document.querySelectorAll('input[data-color-scheme]').forEach( function(oNode)
      {
        oNode.addEventListener( 'change', function( oEvent )
        {
          if ( !oEvent || !oEvent.currentTarget )
            return;
          
          
          var tsColorScheme = (oEvent.currentTarget.getAttribute('data-color-scheme') || '').trim();
          tsColorScheme     = +tsColorScheme || 0;
          
          if ( !fSetColorScheme(tsColorScheme) )
          {
            oEvent.preventDefault && oEvent.preventDefault();
            return false;
          }
          
          fUpdateColorScheme( );
        });
      });
    }
    
    
    {
      if ( window.matchMedia )
      {
        var fSystemColorScheme = function( oMatchMedia )
        {
          bDarkMode = oMatchMedia && !!oMatchMedia.matches;
          fUpdateColorScheme( );
        };
                    
        var oMatchMedia = matchMedia( '(prefers-color-scheme:dark)' );
        
        if ( oMatchMedia.addEventListener )
          oMatchMedia.addEventListener( 'change', fSystemColorScheme );
        else if ( oMatchMedia.addListner )
          oMatchMedia.addListner( 'change', fSystemColorScheme );
        
        fSystemColorScheme( oMatchMedia );
      }
      
      else
        fUpdateColorScheme( );
    }
    

  }();
  • URL: /components/raw/modetoggle/modetoggle.js
  • Filesystem Path: src/lib/components/modetoggle/modetoggle.js
  • Size: 3.7 KB

modetoggle Infos

The function in it is:

  • turn on light mode
  • turn on system mode
  • turn on dark mode

The component is visible only in desktop mode into toolbar component, while in mobile mode is rendered in menu

Usage

Render modetoggle

Use following syntax:

      {% render "@modetoggle" %}