Customizing the design in Sencha with SCSS using the "$base-color" variable

Question

Customizing the design in Sencha with SCSS using the "$base-color" variable

UPDATE :

It is crucial that this function properly, so before responding, please take a moment to review any previous comments on the question as your concern may have already been addressed.

I am attempting to modify the foundational variables of Sencha in order to develop a custom theme for my application

Below is the code snippet from my app.scss

@import 'sencha-touch/default';
@import 'sencha-touch/default/all';


$base-color: #8bc531;

I have tried this alternative as well, as mentioned in the comments. Please refrain from providing unhelpful answers and downvoting. Also, it is worth noting that the .scss file compiles without any errors.

$base-color: #8bc531;
@import 'sencha-touch/default';
@import 'sencha-touch/default/all';

It should be mentioned that the file is much longer and all other aspects are functioning correctly. The only issue I am encountering is with the $base-color not altering any colors as expected, despite it being intended to impact multiple components throughout the app...

Could someone kindly clarify why it is not functioning as anticipated and as demonstrated on the Sencha website...?

css extjs sencha-touch sencha-touch-2 sass

Answer 1

Answer №1

Be cautious when starting your project using the trial version of ST. The index file differs from the purchased version, as the trial version overrides theming with predetermined colors (which are uneditable), while this line is removed in the paid version -_-'

<!DOCTYPE HTML>

<html manifest="" lang="en-US">
<head>
<meta charset="UTF-8">
<title>CarboZero</title>
<style type="text/css">
    html, body {
        height: 100%;
        background-color: #1985D0
    }

    #appLoadingIndicator {
        position: absolute;
        top: 50%;
        margin-top: -15px;
        text-align: center;
        width: 100%;
        height: 30px;
        -webkit-animation-name: appLoadingIndicator;
        -webkit-animation-duration: 0.5s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: linear;
    }

    #appLoadingIndicator > * {
        background-color: #FFFFFF;
        display: inline-block;
        height: 30px;
        -webkit-border-radius: 15px;
        margin: 0 5px;
        width: 30px;
        opacity: 0.8;
    }

    @-webkit-keyframes appLoadingIndicator{
        0% {
            opacity: 0.8
        }
        50% {
            opacity: 0
        }
        100% {
            opacity: 0.8
        }
    }
</style>
<!-- The line below must be kept intact for Sencha Command to build your application -->
<script id="microloader" type="text/javascript" src="touch/microloader/development.js"></script>
<script src="resources/AppLibrary.js"></script>
<script src="resources/ENG.js"></script>
<script src="resources/FR.js"></script>
<script src="resources/ESP.js"></script>
<script src="resources/GlobalVariables.js"></script>
<script src="resources/ProjectStorage.js"></script>
<script src="resources/Elements.js"></script>
<script src="resources/UnitConversion.js"></script>
<script src="resources/Types.js"></script>
<script src="resources/LanguageConversion.js"></script>
<script src="resources/ESPElement.js"></script>
<script src="resources/ENGElement.js"></script>
<script src="resources/FRElement.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div id="appLoadingIndicator">
    <div></div>
    <div></div>
    <div></div>
</div>
</body>
</html>

Answer 2

Be cautious when starting your project using the trial version of ST. The index file differs from the purchased version, as the trial version overrides theming with predetermined colors (which are uneditable), while this line is removed in the paid version -_-'

<!DOCTYPE HTML>

<html manifest="" lang="en-US">
<head>
<meta charset="UTF-8">
<title>CarboZero</title>
<style type="text/css">
    html, body {
        height: 100%;
        background-color: #1985D0
    }

    #appLoadingIndicator {
        position: absolute;
        top: 50%;
        margin-top: -15px;
        text-align: center;
        width: 100%;
        height: 30px;
        -webkit-animation-name: appLoadingIndicator;
        -webkit-animation-duration: 0.5s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: linear;
    }

    #appLoadingIndicator > * {
        background-color: #FFFFFF;
        display: inline-block;
        height: 30px;
        -webkit-border-radius: 15px;
        margin: 0 5px;
        width: 30px;
        opacity: 0.8;
    }

    @-webkit-keyframes appLoadingIndicator{
        0% {
            opacity: 0.8
        }
        50% {
            opacity: 0
        }
        100% {
            opacity: 0.8
        }
    }
</style>
<!-- The line below must be kept intact for Sencha Command to build your application -->
<script id="microloader" type="text/javascript" src="touch/microloader/development.js"></script>
<script src="resources/AppLibrary.js"></script>
<script src="resources/ENG.js"></script>
<script src="resources/FR.js"></script>
<script src="resources/ESP.js"></script>
<script src="resources/GlobalVariables.js"></script>
<script src="resources/ProjectStorage.js"></script>
<script src="resources/Elements.js"></script>
<script src="resources/UnitConversion.js"></script>
<script src="resources/Types.js"></script>
<script src="resources/LanguageConversion.js"></script>
<script src="resources/ESPElement.js"></script>
<script src="resources/ENGElement.js"></script>
<script src="resources/FRElement.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div id="appLoadingIndicator">
    <div></div>
    <div></div>
    <div></div>
</div>
</body>
</html>

Customizing the design in Sencha with SCSS using the "$base-color" variable

Answer №1

Similar questions

Ensure that the elements within the container automatically adjust their height to fill the entirety of the

What is the process for setting up both an open and closed status for my accordion?

Formatting specific elements within an array

Angular-ui-bootstrap-tabs feature smooth transitions when switching between tabs, but lacks animation when moving

IE9 fails to display li::before element correctly

Differences in rendering with Google Chrome when zooming in or out

Is there a way to choose columns 2 to 6 of the row that is currently selected

Modifying the color of a variety of distinct data points

css displaying inconsistently on Mi Browser mobile view

Spooky results displayed on website from NightmareJS

What is the most effective way to utilize a loop in order to generate a comma-separated list of values that does not contain an additional comma

Using Slick Slider and Bootstrap CSS to display text on top of images

What is the functionality of `first-child` when used with custom variants in Tailwind CSS?

How can I make my JQuery datatable span the full width of the screen, regardless of the resolution?

The interaction between jQuery Masonry and Bootstrap results in unexpected grid behavior

How can I create editable text using typed.js?

Display the title of an image beneath the image using CSS

What is the process for requesting a css file?

I am experiencing issues with my drag and drop feature not functioning properly

What is the best way to position images and URLs in div elements using CSS?