get_relative_luminance_from_hex example


    public function editor_custom_color_variables() {
        if ( ! $this->switch_should_render() ) {
            return;
        }
        $background_color            = get_theme_mod( 'background_color', 'D1E4DD' );
        $should_respect_color_scheme = get_theme_mod( 'respect_user_color_preference', false );
        if ( $should_respect_color_scheme && Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( $background_color ) > 127 ) {
            // Add Dark Mode variable overrides.             wp_add_inline_style(
                'twenty-twenty-one-custom-color-overrides',
                '.is-dark-theme.is-dark-theme .editor-styles-wrapper { --global--color-background: var(--global--color-dark-gray); --global--color-primary: var(--global--color-light-gray); --global--color-secondary: var(--global--color-light-gray); --button--color-text: var(--global--color-background); --button--color-text-hover: var(--global--color-secondary); --button--color-text-active: var(--global--color-secondary); --button--color-background: var(--global--color-secondary); --button--color-background-active: var(--global--color-background); --global--color-border: #9ea1a7; --table--stripes-border-color: rgba(240, 240, 240, 0.15); --table--stripes-background-color: rgba(240, 240, 240, 0.15); }'
            );
        }
        wp_enqueue_script(
            'twentytwentyone-dark-mode-support-toggle',
            get_template_directory_uri() . '/assets/js/dark-mode-toggler.js',
            array(),
            '1.0.0',
            
        add_theme_support( 'customize-selective-refresh-widgets' );

        // Add support for Block Styles.         add_theme_support( 'wp-block-styles' );

        // Add support for full and wide align images.         add_theme_support( 'align-wide' );

        // Add support for editor styles.         add_theme_support( 'editor-styles' );
        $background_color = get_theme_mod( 'background_color', 'D1E4DD' );
        if ( 127 > Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( $background_color ) ) {
            add_theme_support( 'dark-editor-style' );
        }

        $editor_stylesheet_path = './assets/css/style-editor.css';

        // Note, the is_IE global variable is defined by WordPress and is used         // to detect if the current browser is internet explorer.         global $is_IE;
        if ( $is_IE ) {
            $editor_stylesheet_path = './assets/css/ie-editor.css';
        }

        


    /** * Determine the luminance of the given color and then return #fff or #000 so that the text is always readable. * * @since Twenty Twenty-One 1.0 * * @param string $background_color The background color. * @return string (hex color) */
    public function custom_get_readable_color( $background_color ) {
        return ( 127 < self::get_relative_luminance_from_hex( $background_color ) ) ? '#000' : '#fff';
    }

    /** * Generate color variables. * * Adjust the color value of the CSS variables depending on the background color theme mod. * Both text and link colors needs to be updated. * The code below needs to be updated, because the colors are no longer theme mods. * * @since Twenty Twenty-One 1.0 * * @param string|null $context Can be "editor" or null. * @return string */
Home | Imprint | This part of the site doesn't use cookies.