Question

Background: I am doing a major new functional version of my web application, and I thought it would be nice to “celebrate” by updating the user interface as well. Since I don’t have the budget for a professional redesign, I thought I could make some subtle changes to the style.css sheet instead.

Ideally there would be a program which would import my style.css sheet (the colours are designed around Windows XP) and export a new style.css sheet in the style of Windows 7.
Although I have seen programs which allow you to import css sheets and play with each colour yourself and then export [something I have neither the time or the eye to do], I have not seen anything which changes the whole of your css sheet automatically while keeping some kind of correlation between your colours.

I wrote the following VBA code [I know it could be much improved, but I just threw it together to experiment] which will change all the colours of the style.css sheet (if it is pasted into column A of the active Excel sheet). Assuming that the CSS colors are represented in hexadecimal by eg #123456 (with the 12 being the Red component, the 34 being the Green component and the 56 representing the Blue component) The code as it stands makes the Red component of the colour greater, and the blue component less. [See the function makeWarmer]

Sub changeCSSColors()
    For j = 1 To 1390 'number of rows
        a = Cells(j, 1)
        b = InStr(a, "#")
        If b > 0 Then
            aHex = UCase(Mid(a, b + 1, 6))
            If isHexS(aHex) Then
                a = Left(a, b) + makeWarmer(aHex) + Mid(a, b + 7)
                Cells(j, 1) = a
            End If
        End If
    Next j

End Sub

Function isHex(aChar)
    If InStr("ABCDEFabcdef01234567890", aChar) > 0 Then isHex = True Else isHex = False
End Function

Function isHexS(aString)
    For j = 1 To Len(aString)
        b = Mid(aString, j, 1)
        If Not isHex(b) Then isHexS = False: Exit Function
    Next j
    isHexS = True
End Function

Function makeWarmer(aString)
    b = addOneToChar(Mid(aString, 1, 1))
    c = subOneToChar(Mid(aString, 5, 1))
    makeWarmer = addOneToChar(Mid(aString, 1, 1)) + Mid(aString, 2, 1) + addOneToChar(Mid(aString, 3, 1)) + Mid(aString, 4, 1) + addOneToChar(Mid(aString, 5, 1)) + Mid(aString, 6, 1)
End Function

Function swapBlueGreen(aString)
  swapBlueGreen = Mid(aString, 3, 2) + Mid(aString, 1, 2) + Mid(aString, 5, 2)
End Function

Function addOneToChar(aChar)
    If (aChar >= "0" And aChar <= "8") Or (aChar >= "A" And aChar <= "E") Then
        aChar = Chr(Asc(aChar) + 1)
    ElseIf aChar = "9" Then
        aChar = "A"
    ElseIf aChar = "F" Then
        aChar = "F"
    End If
    addOneToChar = aChar
End Function

Function subOneToChar(aChar)
    If (aChar >= "1" And aChar <= "9") Or (aChar >= "B" And aChar <= "F") Then
        aChar = Chr(Asc(aChar) - 1)
    ElseIf aChar = "A" Then
        aChar = "9"
    ElseIf aChar = "0" Then
        aChar = "0"
    End If
    subOneToChar = aChar
End Function

I also experimented by changing the Blue and Green components by using the function SwapBlueGreen. However I did not get satisfactory visual results with either function. [The web application just looked weird]

Has anyone got any other ideas of functions instead of makeWarmer or SwapBlueGreen that I could use, perhaps some kind of masking. Alternatively maybe there is some software that does what I want.

Answer 1

You could convert the old document to SASS and use the powerful SASS color functions to do your manipulation.

This might be easier than writing a program yourself 🙂